Move woocommerce variation price

Question

I'm running my demo store under Woocommerce and I want to move price that shows up when you choose product variations to be right below Qty field and not between it and the last variation.

This is the code I tried inside my functions.php file so far but it didn't work:

// Move WooCommerce price
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 25 );

Did I make a mistake somewhere?

Answer 1

The javascript file woocommerce/assets/js/frontend/add-to-cart-variation.js, responsible for displaying variable product prices, basically uses $('form').find('.single_variation'); to update the price, so if the .single_variation is outside of the form, it will not work.

So things like this do not work:

function move_variation_price() {
    remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
    add_action( 'woocommerce_single_product_summary', 'woocommerce_single_variation', 5 );
}
add_action( 'woocommerce_before_add_to_cart_form', 'move_variation_price' );

That said, your best bet if you want to use it on top of your product, is to use the woocommerce_before_variations_form hook.

woocommerce_single_variation hook will bring up the add to cart button too, so you will have to hide that out with CSS:

form.variations_form.cart .single_variation_wrap:nth-child(1) .quantity {
    display: none !important; /* important is necessary */
}
form.variations_form.cart .single_variation_wrap:nth-child(1) button {
    display: none;
}

I know it hurts. But it's the "only" way.

Method 2

Ok, I was pissed with Method 1 and came up with this new method, that doesn't require any changes in PHP, only Javascript and CSS.

Javascript that will check if the variable product price changed, and will update the actual price div with the new value. This new price div can be anywhere, not only inside the form.

Javascript:

// Update price according to variable price
if (jQuery('form.variations_form').length !== 0) {
    var form = jQuery('form.variations_form');
    var variable_product_price = '';
    setInterval(function() {
        if (jQuery('.single_variation_wrap span.price span.amount').length !== 0) {
            if (jQuery('.single_variation_wrap span.price span.amount').text() !== variable_product_price) {
                variable_product_price = jQuery('.single_variation_wrap span.price span.amount').text();
                jQuery('.single-product-summary p.price span.amount').text(variable_product_price);
            }
        }
    }, 500);
}

CSS:

.single_variation_wrap .price {
    display: none;
}

Final result:

Answer 2

This will move the variation price to below the quantity and just above the add to cart button. You may need to apply some CSS styles as needed.

function move_variation_price() {
    remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
    add_action( 'woocommerce_after_add_to_cart_quantity', 'woocommerce_single_variation', 10 );
}
add_action( 'woocommerce_before_add_to_cart_form', 'move_variation_price' );

Since the woocommerce_after_add_to_cart_quantity hook was added in WooCommerce 3.0, in order to get the above code to be work in WooCommerce 2.6.x, you will need to override the single-product/add-to-cart/variation-add-to-cart-button.php template by saving it to your theme's woocommerce folder and then adding in the action hook. See below:

<?php
/**
 * Single variation cart button
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 2.5.0
 */
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

global $product;
?>
<div class="woocommerce-variation-add-to-cart variations_button">
    <?php if ( ! $product->is_sold_individually() ) : ?>
        <?php woocommerce_quantity_input( array( 'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( $_POST['quantity'] ) : 1 ) ); ?>
    <?php endif; ?>
    
    <?php do_action( 'woocommerce_after_add_to_cart_quantity' ); ?>
    
    <button type="submit" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
    <input type="hidden" name="add-to-cart" value="<?php echo absint( $product->id ); ?>" />
    <input type="hidden" name="product_id" value="<?php echo absint( $product->id ); ?>" />
    <input type="hidden" name="variation_id" class="variation_id" value="0" />
</div>