[Resolved] woocommerce select box arrows styling

Home Forums Support woocommerce select box arrows styling

  • This topic has 3 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1009747
    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

    #1010030
    David
    Staff
    Customer Support

    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.

    #1010321
    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.

    #1010490
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.