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
.
