[Resolved] woocommerce select box arrows styling

[Natalie]

There seems to be an inconsistency with woocommerce dropdown select boxes styling in terms of the arrows.

On the woocommerce ‘shop’ page there is a ‘default sorting’ select box which GP restyles (wp-content/plugins/gp-premium/woocommerce/functions/css/woocommerce.min.css) to use an ‘icon’ arrow:

.woocommerce-ordering::after {
    content: "\e903";
    font-family: "GP Premium";

The default arrow is suppressed using:

.woocommerce-ordering select {
    -webkit-appearance: none;

However this fails on Firefox and you end up with two arrows
for Firefox you would need to add
-moz-appearance: none;
to the above rule.

On the single product page GP does not do any restyling of the down arrow on the ‘Choose an Option’ dropdown select box, so the native browser styling is used.

Do you have plans to do restyling of the ‘Choose and Option’ dropdown on the single product page?
Thanks

[David]

Hi there,

thanks for pointing this out – don’t see the issue on my FF browser, but we’ll look at adding to cover all versions.

The Variations form is a little more tricky to style, for example you can add this CSS:

.woocommerce div.product form.cart .variations select {
    font-size: 14px;
    font-weight: 500;
    padding: 10px 40px 10px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    background: 0 0;
    border-color: rgba(0, 0, 0, .1);
    color: inherit;
    cursor: pointer;
}

Which remove the browser styles. Hard part is injecting the dropdown icon, form elements can’t have psuedo elements attached to them so it would require a background image on the select fields.

Issues here is the variations names can vary significantly in size so there isn’t an easy CSS method that would work for all sizes.

Alternative would require us to edit the template directly. Which we try to avoid doing as we want to keep Woo default templates to ensure compatibility. But we’ll definitely look into it.

[Natalie]

Thanks so much for your reply. Yes that makes sense.
Interesting that on the checkout page woocommerce use their own arrow icon in the dropdown boxes – e.g. in the ‘country’ dropdown box. so maybe they have plans to do that for the product option select box as well.

[David]

You’re welcome 🙂

[Author]

Posts