[Resolved] Use CSS to stack WooCommerce variation labels above input

[Kevin]

Hi there,

On single-product.php, WooCommerce variations are displayed in a table.

This positions the label and the input beside each other.

On my website, it looks bad on mobile because there is too much crammed in and elements drop underneath.

Is it possible to stack the label on top of the input?

I’ve spent a few hours and can’t seem to find the correct CSS.

If not possible with CSS, is there a template I can edit?

Please and thanks.

https://boltmobile.ca/phones-devices/sasktel-apple-iphones/apple-iphone-14-plus/

[Ying]

Hi Kevin,

Do you mean something like this?
https://www.screencast.com/t/lo37HExMP

If so, try this CSS:

@media (max-width: 768px) {
label.variable-item-radio-input-wrapper {
    flex-direction: column-reverse;
}

.woo-variation-swatches .variable-items-wrapper.radio-variable-items-wrapper .radio-variable-item label {
    display: flex;
    flex-direction: column-reverse;
}
}

[Kevin]

Here is what I am trying to achieve:

Screenshot = https://imgur.com/a/PklkLgz

Please and thanks 🙂

[Ying]

Oh I see, try this instead:

@media (max-width: 768px) {
table.variations tbody tr {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.woo-variation-swatches .variable-items-wrapper.radio-variable-items-wrapper li .variable-item-radio-input-wrapper {
    display: flex !important;
    flex-wrap: nowrap;
}
}

[Kevin]

I was missing the second declaration.

You are amazing!

Thank you so much!

👏👏

[Ying]

You are welcome 🙂

[Author]

Posts