Move the Variation Price Location in Woocommerce

Move woocommerce variation price

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>

Moving variable product dropdowns in WooCommerce

Edit (related to your last comment):

For variable products only, the code below will:

• Remove the price range (If you are doing this already, you should remove your related code).
• Move the live variation selected price above the attribute select fields…
• Add CSS to get the attribute select fields at the left of the block that contains the quantity field and the add-to-cart button.http://www.cbleu.net/sites/tie2/product/premium-quality/
• Move the short description location after the add-to-cart button

In this function you can just remove Css and add them in your active child theme (or active theme) styles.css file.

Here is that code:

add_action( 'woocommerce_single_product_summary', 'custom_single_product_styles', 2 );
function custom_single_product_styles() {
    global $product;

    // Only for variable products
    if ( ! $product->is_type('variable') ) return;

    // Change the short description location after the add-to-cart button
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
    add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 15 );

    // Removing the price range
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

    // Change the price location above variation attribute select fields
    remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
    add_action( 'woocommerce_before_variations_form', 'woocommerce_single_variation', 10 );

    // Styles to display the variation attribute select fields at the left of Quantity/Add to cart
    // (Can be removed and inserted in styles.css file)
    ?>
        <style>
            .single-product div.product table.variations{
                float:left;
                max-width:50%;
            }
            .single-product div.product div.single_variation_wrap{
                float:left;
                max-width:50%;
            }
        </style>
    <?php
}

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

Tested and works… You will get something like:

The related template that is involved specifically in this is single-product/add-to-cart/variable.php

You can try to change there the existing structure to match with your requirements specifically to your theme and styling needs...

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

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.

---

Related Topics