Replace the Variable Price range by the chosen variation price in WooCommerce 4+

by

Update March 2021 (Works at least from WooCommerce 3.7 up to 5+)

The code:

add_action('woocommerce_before_add_to_cart_form', 'selected_variation_price_replace_variable_price_range');
function selected_variation_price_replace_variable_price_range(){
    global $product;

    if( $product->is_type('variable') ):
    ?><style> .woocommerce-variation-price {display:none;} </style>
    <script>
    jQuery(function($) {
        var p = 'p.price'
            q = $(p).html();

        $('form.cart').on('show_variation', function( event, data ) {
            if ( data.price_html ) {
                $(p).html(data.price_html);
            }
        }).on('hide_variation', function( event ) {
            $(p).html(q);
        });
    });
    </script>
    <?php
    endif;
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

More Related Contents:

  1. Replace the Variable Price range by the chosen variation price in WooCommerce 3
  2. Change product prices via a hook in WooCommerce 3+
  3. Hide variation info from cart item title in WooCommerce 3+
  4. Show stock status next to each attribute value in WooCommerce variable products
  5. Set product sale price programmatically in WooCommerce 3
  6. Set cart item price from a hidden input field custom price in Woocommerce 3
  7. How to get WooCommerce order details
  8. How to add custom stock status to products in WooCommerce 4+
  9. Get in WooCommerce cart the product ID of a cart item
  10. Update fee dynamically based on radio buttons in Woocommerce checkout
  11. Allow re-sending New Order Notification in WooCommerce 5+
  12. WooCommerce: Add product to cart with price override?
  13. Create programmatically a variable product and two new attributes in WooCommerce
  14. Hide shipping methods for specific shipping class in WooCommerce
  15. How can I get customer details from an order in WooCommerce?
  16. Adding custom field to product category
  17. WooCommerce : Add custom Metabox to admin order page
  18. Display custom order meta data value in email notifications WooCommerce
  19. Programmatically creating new order in Woocommerce
  20. Disable add to cart button for an array of products IDs in WooCommerce
  21. Get all Orders IDs from a product ID in Woocommerce
  22. Show hide payment methods based on selected shipping method in Woocommerce
  23. How to add variation stock status to Woocommerce product variation dropdown
  24. Send an Email notification to the admin for pending order status in WooCommerce
  25. Change sender name and email address for specific WooCommerce email notifications
  26. Set custom shipping rates programmatically in Woocommerce 3
  27. Adding multiple tabs to WooCommerce single product pages
  28. Add a fee to an order programmatically in Woocommerce 3
  29. Add a custom checkbox in WooCommerce checkout which value shows in admin edit order
  30. WooCommerce – send custom email on custom order status change

Leave a Comment