How can I have variations label above the “Select” field instead of the left

My site has the label for the variation on the left and the select on the right (as in the screenshot attached) for desktop. How can I have the label on top and the Select underneath like it looks for mobile.

Attachments:

You must be logged in to view attached files.

[Luke Nielsen]

Hello,

I have prepared a custom CSS code for moving labels above the variation fields. Please, paste it to the “Custom CSS for desktop” area that is in Theme Settings -> Custom CSS.

.single-product table.extra-options tr,
.single-product table.variations tr {
    display: grid;
}

https://gyazo.com/191f65d6ce2627ef2d87f6b844e2a520

If you want to add the “Cabinet Size” label additional indentation, please use this one custom also.

.single-product table.variations .cell label {
    padding-bottom: 12px;
}

https://gyazo.com/6b23e348468b7705a2d06deeb3f72988

Please feel welcome to reach out to me with any questions you may have and I would be more than happy to help.

Kind Regards

• This reply was modified 2 years, 10 months ago by Luke Nielsen.
• This reply was modified 2 years, 10 months ago by Luke Nielsen.
• This reply was modified 2 years, 10 months ago by Luke Nielsen.

that’s great, thanks! Can you help us with showing it another way.

How can we make the Cabinet Select the same format as the other Select’s?

Attachments:

You must be logged in to view attached files.

Also, I there anyway it could look like this Select? (with the label in the same select as the select values?)

Attachments:

You must be logged in to view attached files.

Hello,

1. The below code will align the select with others, you should enter it to the “Custom CSS for desktop” area.

.single-product table.variations .label {
    width: 32%;
}

2. Unfortunately, there is currently no way to do that. We appreciate you taking the time to let us know what you’re looking for.

Have a wonderful day!

Kind Regards

works! thank you

Hello,

Please feel welcome to reach out to me with any questions you may have and I would be more than happy to help.

Have a good day!

Kind Regards

[Author]

Posts