Ecommerce Shopify WordPress Discussion

Add extra price field to woocommerce product variable and update it after the user clicks on it

In WooCommerce, for variation on variable products, I want to add a field that shows the price of one unit of the product to the user. In this case I want create an extra price field in WooCommerce and display it instead of the variation price. So, the extra field must be display initially and then updating the price after the user clicks on a variation. Please see these images: On first image display extra price field (not variation price) like these pic: and second image display variation price when user select it (update the price after the user clicks on a variation) like this pic: I have work on these code but there is a problem, when user click on variation the price is not change and I cannot find the right way to do that. // Add custom price field for variations with description function custom_variation_price_field( $loop, $variation_data, $variation ) { ?> <p class="form-row form-row-full"> <label for="_custom_price[<?php echo esc_attr($variation->ID); ?>]"> <?php esc_html_e('Custom Price', 'woocommerce'); ?> (<?php echo get_woocommerce_currency_symbol(); ?>) </label> <input type="text" class="short" name="_custom_price[<?php echo esc_attr($variation->ID); ?>]" id="_custom_price[<?php echo esc_attr($variation->ID); ?>]" value="<?php echo esc_attr(get_post_meta($variation->ID, '_custom_price', true)); ?>" data_type="price" /> <span class="description"> <?php esc_html_e('Enter the custom price for this variation.', 'woocommerce'); ?> </span> </p> <?php add_action('woocommerce_variation_options_pricing', 'custom_variation_price_field', 10, 3); // Save custom price field value function save_custom_variation_price_field($post_id) { $custom_price = $_POST['_custom_price'][$post_id]; update_post_meta($post_id, '_custom_price', esc_attr($custom_price)); } add_action('woocommerce_save_product_variation', 'save_custom_variation_price_field', 10, 2); // Display custom price instead of variation price function display_custom_variation_price($price, $product) { if ($product->is_type('variable')) { $price = ''; foreach ($product->get_available_variations() as $variation) { $custom_price = get_post_meta($variation['variation_id'], '_custom_price', true); $price.= '<span class="price">' . wc_price($custom_price) . '</span>'; } } return $price; } add_filter('woocommerce_variable_price_html', 'display_custom_variation_price', 10, 2);
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.