Change variation drop-down box over to the left

Hi there,

It’s difficult to determine the best CSS to achieve this by only looking at an image. What have you tried so far?

If you link to the actual product page instead, then the code and structure can be inspected, making a suggestion for a fix easier.

Good Morning @eastofwest – Thank you for replying! The following is the url to the page in question: https://dev.morganeliteenterprises.com/product/product-1/

The HTML structure of your variation dropdown box, and the label to the left of it, looks very similar to how it does in Storefront, the only difference being the CSS.

I just copied the CSS rules applied to it in the Storefront theme, and it seems to work on your theme too:

Here’s the CSS:

.single-product div.product table.variations td {
    display: list-item;
    padding: 0;
    list-style: none;
    background-color: transparent;
}

It’s been a while with no reply to this thread, so I’ll go ahead and it as solved. If you require any more help though, do reach out to us again; we’re happy to help.

I apologize for the delay. I was unable to get the variation box to move to the left using the following css code on he single product page.

.single-product div.product table.variations td {
display: list-item;
padding: 0;
list-style: none;
background-color: transparent;
}

Although I was able to move the variation selector over it was moved over to the left and placed under above the add to cart buttoom. Is there any way to move it over on the current line?

Removing myself from replies