[Support request] Center Woocommerce variations – label and drop down.

Home Forums Support [Support request] Center Woocommerce variations – label and drop down.

Home Forums Support Center Woocommerce variations – label and drop down.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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

    #1147287
    David
    Staff
    Customer Support

    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;
    }
    #1147294
    P

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

    #1147296
    David
    Staff
    Customer Support

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

    #1147302
    P

    What should I Google to learn about it? Flex ?

    #1147305
    David
    Staff
    Customer Support
    #1147312
    P

    Well flex is just cheating.

    #1147317
    David
    Staff
    Customer Support

    Feels like it

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.