Archived topic
Use CSS to stack WooCommerce variation labels above input
5 replies · Started by Kevin on November 3, 2022
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/
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;
}
}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;
}
}I was missing the second declaration.
You are amazing!
Thank you so much!
👏👏
You are welcome :)
