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