Relocate WooCommerce Product Variation Prices to Any Location on Your Webpage

The WooCommerce Variation Price is typically displayed in the product summary section of the single product page, once a customer selects the appropriate product options such as size, color, etc. However, as a beginner developer, moving the WooCommerce variation price on the web page can be challenging as there are limited solutions available on Stackoverflow or online forums and network.

In this article, we will provide simple techniques to move the variation price to any div/element of your choice. The code snippet provided uses jQuery to update the variation price whenever a customer changes their product option selection.

here is the simple code

if( jQuery( ".variations_form select" ).length  ){

    // get json value from woocomerce from
    
    var product_attr    =   jQuery.parseJSON( $(".variations_form").attr("data-product_variations") ),
        obj_attr        = "";

    
    jQuery( ".variations_form select" ).on( "change", function () {
        
        
       // Create New Array by selecting variations
        jQuery( ".variations_form select" ).each(function( index ) {
            
             obj_attr[ $(this).attr("name") ] = $(this).val();
            
        });
        
        // Get Variations
        jQuery.each( product_attr, function( index, loop_value ) {
        
            if( JSON.stringify( obj_attr ) === JSON.stringify( loop_value.attributes )  ){
                
                $('#update_here_your_id_or_class').html( loop_value.price_html );
                
            }
            
        });
        
        
        
    });
    

}

If this information helps you, please let me know. Sharing or promoting the content would also be appreciated!

When working with WooCommerce variations, consider using the WooCommerce variation swatches plugin. This plugin offers incredible features, including the ability to add labels, images, and colors to enhance the shopping experience for customers. The plugin will increase customer satisfaction and boost sales with its fantastic variation features.