[Resolved] Move Woocommerce Product Variation Label and Drop down to different lines

[James]

Hello! I’m a newer GeneratePress premium user and so far I’m loving the theme. I’m in the process of changing all of our sites over and I love the theme more each day. I’m running into one issue on a woocommerce site however.

I’ve noticed the product variation drop down box gets cut off on smaller screen sizes. It seems to be an issue with the variation label and the dropdown box being on the same line.

For example, I have an option where a customer chooses colors in a variation titled, “Background Color.” The label “Background Color” and the drop down box are on the same line on the woocommerce product page. It ends up displaying as two columns and this results in the drop down box being cut off on the right side on mobile and smaller screens. Everything still works it just looks bad.

Not a big deal but it becomes very evident with longer variation/attribute titles.

Is there any css or other easy way to move the label and drop down to separate lines or any other easy fix? I’m using the base premium theme (nothing from the site library) with the Woocommerce Module in GP Premium enabled. Site layout has content on the left and a right sidebar. Not using any page builder etc.

[David]

Hi there,

try this CSS:

.woocommerce div.product form.cart .variations td {
    display: block;
}

[James]

Thanks for the prompt reply! The CSS worked well to put the label and drop down menu on seperate lines. I like the look of this much better.

Unfortunately the variation drop down menu still gets cut off but only if it contains a long variation title. It appears the search box is automatically made wide enough so it can accommodate the longest variation title. (Makes sense.) If a variation name goes too many characters it eventually makes the box so big it gets cut off on smaller displays.

For now I suppose the easiest fix is reworking titles and keeping them short to avoid the issue as much as possible. Any other suggestions?

[David]

To the best of my knowledge its not possible to wrap the Select Option Value without Javascript and i haven’t found a solution that doesn’t potentially break the list on different devices.

[James]

Yeah I couldn’t find an easy solution either. I’ll just keep it simple and ensure I use shorter labels etc. I appreciate the help considering this was more of a woocommerce issue and not so much the theme. Thanks again!

[David]

You’re welcome. Let us know if you find a solution.

[Author]

Posts