- This topic has 7 replies, 2 voices, and was last updated 3 years ago by
David.
-
AuthorPosts
-
January 28, 2020 at 8:25 am #1147214
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
January 28, 2020 at 9:20 am #1147287David
StaffCustomer SupportHi 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/January 28, 2020 at 9:24 am #1147294P
Well, bloody hell. I have no idea what that CSS did but it worked. Thank you, it’s sincerely appreciated.
January 28, 2020 at 9:25 am #1147296David
StaffCustomer SupportHaha – it dragged Table HTML into the 21st century lol
Glad to be of helpDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 28, 2020 at 9:30 am #1147302P
What should I Google to learn about it? Flex ?
January 28, 2020 at 9:31 am #1147305David
StaffCustomer Supportflexbox
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/January 28, 2020 at 9:40 am #1147312P
Well flex is just cheating.
January 28, 2020 at 9:45 am #1147317David
StaffCustomer SupportFeels like it
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.