Woocommerce quantity selection and button alignment

[Andrew]

Andrew

May 16, 2018 at 10:33 am

Hello Kadence team,

Please forgive another support request for a similar topic previously raised, but I’m having trouble with the alignment of my Woocommerce quantity selections and buttons on different types of product page. I’ve spent hours trying to find a css solution to save having to ask you!

A while back, Ben very kindly provided a css workaround for centering this area of the product page, as follows:

table.variations {
margin: 0 auto 25px;
}
.woocommerce-variation-add-to-cart {
display: block;
margin: 0 auto;
max-width: 200px;
}
.single_variation_wrap {
text-align: center;
}

The problem arises when I only use a single, large product image with no extra gallery images. When the variation is selected, the quantity selection jumps above the button and out of alignment, as can be seen here: *Login to see link

Other types of product page – both with and without variations – which include extra gallery images behave fine (due to Ben’s code), examples of these are as follows:
*Login to see link
*Login to see link

What I’m trying to achieve is an equal spacing between the quantity selection and the button for each product scenario – whether it has a single product image or additional gallery image thumbnails. At the moment, each product type (from the three links above) produce different results.

I hope that all makes sense …and thank you in advance for any guidance you can offer!

Andrew.