Variable product drop-down styling

Hi, I’ve just found following issue – than variable product attribute’s term is too long it is being overlapped by arrow used to open drop-down. Here’s the pic – https://prnt.sc/sesl9f

Hello,

There is hardly ever a way to correct it, try to make your attributes shorter. An attribute is a feature and not description, It should not be too long.

Best Regards

Although you say “There is hardly ever a way to correct it” I was able to correct this with adding following CSS:
#place-your-attribute-name-here {padding-right: 20px}
So I apply it to only particular attribute this way. But it can be applied to .select element or some other way to affect all drop-downs.
And I suppose this makes sense and you’d better implement this in theme because selector field can be rather narrow sometimes.

Hmm, looks like my previous statement is not true. Actually in your demo all the table rows have the same height and all row except last one have 20 px bottom padding.
But in my case last row has bigger height than previous ones and lacks padding as well. It’s size is equal size + padding of previous ones.
See the pic to better understand, here’s my site – https://prnt.sc/sf97tq and here’s your demo – https://prnt.sc/sf9n0y

This is what causes the issue but I have no idea from where this last table row height increase does come.

Please ignore last message (#194315) I misposted it here instead of another topic.

Hello,

Please provide the page URL.

Best Regards

Here it is:

Hello,

The better way is to set medium image size in the product page and enables the zoom or light shot view to show larger. You will get space enough for the long attribute items.

The solution with padding is not good. There is no space enough and we would get the problem on narrower screen width.

Best Regards

Glad to hear that. But are you sure this was meant for me?

Hello,

Yes, that is not a mistake. Product page and attribute drop-down is the Woocommerce functionality and our theme does not influence or have option to change that. I do not see the way to change this with CSS as there is just no space to enlarge. It would not look good.

Best Regards

I can’t agree here. Text overlapped by arrow can’t be read anyway.
Here’s how it looks:
without fix – https://gyazo.com/b957dc330ae3dc2333819ded5acee2d9
with fix – https://gyazo.com/d192a0810c0360811306b43404a4c433
And there’s no problem on narrower screens cause without padding as I mentioned earlier text is overlapped by arrow anyway and becomes unreadable.

Hello,

This is a specific case and it cannot be fixed with custom CSS, unfortunately. It may require more complicated customization which is not covered by our support.

Best Regards

Nothing specific here. Actually it’s default WordPress and Woocommerce behaviour – https://gyazo.com/47e5b0300616c0466c759d541f4d6fb4

Hello,

Our theme does not influence this feature or have any options to change.

Best Regards

It does influence, because by default WordPress and WooCommerce use padding to prevent arrow overlapping. I provided screenshot proof, if you don’t believe you can check on Storefront demo page yourself.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.variations .value select {
  padding-right: 15px;
}

Best Regards

Maybe you should use it in your theme as it won’t hurt anybody but will prevent above mentioned overlapping.

ok. If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts