Price and add to cart button before variations

Adrian Brocki

Hello, is possible to display price and add to cart button before variations (now display under variations)

Hi Adrian,

Could you kindly share your website URL? I need to see the page layout before suggesting solutions

Regards

Hi Adrian,

I was hoping the product page structure would allow me to change the layout with CSS code only, but it wouldn’t . The closest I came to achieve your desired layout was placing “Add to Cart” & “Price” just after variation. Check this screenshot. To achieve this layout Add these CSS code –

 
.single_variation_wrap { display: flex; flex-direction: column; }
.single_variation { display: flex; flex-direction: column; order: 1; }
.woocommerce-variation-description { order: 3; }
.woocommerce-variation-price { order: 2; }
 

Thank You

.single_variation_wrap { display: flex !important; flex-direction: column !important; }
.single_variation { display: flex !important; flex-direction: column !important; order: 1 !important; }
.woocommerce-variation-description { order: 3 !important; }
.woocommerce-variation-price { order: 2 !important; }

Try this one

Adrian Brocki

I see price and add to cart button change places but still they are under variations

Yes, this is the best I can do for you without directly editing theme files.

Thank You

Hi Adrian,

Our plugin doesn’t handle this option. The job of our plugin is to replace WooCommerce variation select dropdown into color, image, label and radio swatches.

I recommend to ask your theme developer to help in reordering page elements. Wherever the our WooCommerce select dropdown appear, our plugin can enable swatches there.

If you are enjoying our plugin, could you leave your valuable review here: https://wordpress.org/support/plugin/woo-variation-swatches/reviews/?filter=5

It would  mean a lot to us 🙂