Center Woocommerce variations – label and drop down.

[P]

Hello guys

I feel I am pushing the boundaries of support here, perhaps even taking the piss… hopefully you can help.

Bottom line up front: I need to centre the variable product label and the variable product drop down (in my case, swatches). I’ve tried to work this out for two days now.

I use GP as my base theme, and Elementor for styling. I am knocking up some templates for variable product pages and I can find no way to centre the variable product label (“Metal”) and the swatches.

I’ve used a plugin to swap the drop down for swatches, but that shoudn’t make a difference here.

The issue is that Woocommerce put it’s variable product layout in a table (found woocommerce > single-product >
add-to-cart). Tables are not divs and are really hard to position elements. The amount of “bodge” work I have had to do in CSS to get this far is pretty crazy.

I tried changing the <td>‘s to <div> in a copy of the add-to-cart PHP which makes it super easy to align everything centre, but then it breaks functionality.

If you could help me centre the <td>’s for class “Label” and “Value” I would be very grateful.

<td class="label"><label for="pa_metal">Metal</label></td>
<td class="value"></td>

I tried adding style="text-align:center to the <td>with no luck.

Peter

[David]

Hi there,

if we can help – we will – try this:

.woocommerce div.product.elementor form.cart table.variations tr,
.woocommerce div.product.elementor form.cart table.variations td {
    display: flex;
    justify-content: center;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[P]

Well, bloody hell. I have no idea what that CSS did but it worked. Thank you, it’s sincerely appreciated.

[David]

Haha – it dragged Table HTML into the 21st century lol
Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[P]

What should I Google to learn about it? Flex ?

[David]

flexbox

Good article here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[P]

Well flex is just cheating.

[David]

Feels like it

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts