Move the variation price location in WooCommerce

Question

I'm have started building an e-shop in Wordepress with WooCommerce plugin.

I added some products with variations and I noticed that the price is displayed after attributes select fields.

Is it possible to move the price between Title and short description as for simple products?

The url of one product is: http://www.roubinisideas.com/test2/product/uncategorized/vintage/

Answer 1

Update (on September 2019):

• Avoiding availability repetitions (bug solved on 2018)

• Keep other product types unchanged (2019)

This is possible and it's is based on this answer that I have made:

Here I have updated the jQuery code to take into account when a variation is set by default for a variable product.

Here is the code:

add_action( 'woocommerce_single_product_summary', 'move_single_product_variable_price_location', 2 );

function move_single_product_variable_price_location() {
    global $product;

    // Variable product only
    if( $product->is_type('variable') ):
    
    // removing the price of variable products
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
    
    // Add back the relocated (customized) price of variable products
    add_action( 'woocommerce_single_product_summary', 'custom_single_product_variable_prices', 10 );
    
    endif;
}


function custom_single_product_variable_prices(){
    global $product;

    // Main Price
    $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
    $price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    // Sale Price
    $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
    sort( $prices );
    $saleprice = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    if ( $price !== $saleprice && $product->is_on_sale() ) {
        $price = '<del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price . $product->get_price_suffix() . '</ins>';
    }

    ?>
    <style>
        div.woocommerce-variation-price,
        div.woocommerce-variation-availability,
        div.hidden-variable-price {
            height: 0px !important;
            overflow:hidden;
            position:relative;
            line-height: 0px !important;
            font-size: 0% !important;
            visibility: hidden !important; 
        }
    </style>
    <script>
        jQuery(document).ready(function($) {
            // When variable price is selected by default
            setTimeout( function(){
                if( 0 < $('input.variation_id').val() && null != $('input.variation_id').val() ){
                    if($('p.availability'))
                        $('p.availability').remove();

                    $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
                    console.log($('div.woocommerce-variation-availability').html());
                }
            }, 300 );

            // On live variation selection
            $('select').blur( function(){
                if( 0 < $('input.variation_id').val() && null != $('input.variation_id').val() ){
                    if($('.price p.availability') || $('.price p.stock') )
                        $('p.price p').each(function() {
                            $(this).remove();
                        });

                    $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
                    console.log($('input.variation_id').val());
                } else {
                    $('p.price').html($('div.hidden-variable-price').html());
                    if($('p.availability'))
                        $('p.availability').remove();
                    console.log('NULL');
                }
            });
        });
    </script>
    <?php

    echo '<p class="price">'.$price.'</p>
    <div class="hidden-variable-price" >'.$price.'</div>';
}

Code goes in any php file of your active child theme (or theme) or also in any plugin php file.

This code is tested and works on WooCommerce 3+ (should work on WooCommerce 2.6.x too)

---

related: Replace the Variable Price range by the chosen variation price in WooCommerce 3