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.

Inspire us with your love!


Art of Awesome Professional WordPress themes & Site templates. Our responsive themes are designed to work seamlessly for all desktop and mobile devices. Modern, Clean & Easy To Use.

You can check also

Take a look! how reaching out the post

    January 2, 2020 at 3:39 pm

    Hi, where do I have to enter this code to make it work properly?

    Edoardo Guerini
    February 18, 2020 at 8:21 pm

    Hi, i have test your code and nothing happen!

Comments are closed.