Shop Sort function only Icon

Hey there

I am searching for hours and could not find it. Where can I set to only show the sorting Icon like in the image attached. On my site it has a text and a plus.

Attachments:

You must be logged in to view attached files.

Hello,

The default Woocommerce does not provide the option to customize the sorting drop-down. HTML structure does not allow to do it with CSS either.

Best Regards

Hey Elise

This is on a page with woodmart see private url.

Hello,

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

body .woocommerce-ordering {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
        vertical-align: top;
}
body .woocommerce-ordering select {
        position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    border: none;
    background-image: none;
    font-weight: 400;
    font-size: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}
body .woocommerce-ordering option {
    font-size: 14px;
}
body .woocommerce-ordering:after {
      position: static;
    margin-top: 0;
    color: #2d2a2a;
    font-size: 20px;
    content: "\f117";
    font-family: "woodmart-font";
}

Best Regards

Hey ELise

thank you for the CSS but in the picture above you see a shop that runs on woodmart and the icon is there without adding any css. Do you know how thisis possible?

Have a great week ahead!

Hello,

The image shows the sorting on mobile. We provide CSS to do the same on the desktop.

Best Regards

[Author]

Posts