Moving variable product dropdowns in WooCommerce

问题

I've been playing around with hooks for a few hours and couldn't find the solution so far.

I am trying to move the variable product dropdown next to the quantity / add to cart button, but I don't know how to achieve this.

Here is the current render :

So the display would go like :

• Product title
• Price area
• Attribute dropdown / Quantity / Add to cart

Edit :

I have removed the price range.

In the following code I change the live price behavior :

add_filter( 'woocommerce_variable_price_html', 'bbloomer_variation_price_format', 10, 2 );


function bbloomer_variation_price_format( $price, $product ) {

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

        if ( $price !== $saleprice ) {
        $price = '<del>' . $saleprice . '</del> <ins>' . $price . '</ins>';
        }
        return $price;
}

How can I move the variable product dropdown at the left of Quantity / Add to cart button?

回答1:

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...

来源：https://stackoverflow.com/questions/47971273/moving-variable-product-dropdowns-in-woocommerce