Archived topic
Center Woocommerce variations - label and drop down.
7 replies · Started by P on January 28, 2020
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
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;
}Well, bloody hell. I have no idea what that CSS did but it worked. Thank you, it's sincerely appreciated.
Haha - it dragged Table HTML into the 21st century lol
Glad to be of help
What should I Google to learn about it? Flex ?
flexbox
Good article here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Well flex is just cheating.
Feels like it
