Sort by dropdown menu is not customizable

Hi @hui12345,

Thanks for reaching out! I understand you’re trying to style the “Sort by” dropdown on your shop page and while you’ve successfully added custom sort options like Bestsellers and New in, you’re finding that the default appearance of the dropdown isn’t responding to your styling changes. That can be frustrating, especially when it feels like your CSS isn’t being applied.

The issue you’re experiencing is common because the sort dropdown is rendered using the native HTML <select> element, which has limited styling capabilities and behaves differently across browsers. Many browsers restrict how these elements can be styled for accessibility and consistency.

That said, you can apply custom styling, but it often requires a combination of CSS and sometimes JavaScript or replacing the dropdown entirely with a custom-styled alternative. If you’re looking to keep it simple, you can try targeting the sort dropdown with this CSS:

.woocommerce-ordering select {
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
    padding: 10px;
}

Be sure to add this to Appearance → Customize → Additional CSS, and clear your site and browser cache afterward to see changes.

If that still doesn’t give you the results you’re after and you want more control over the appearance, you might consider using a plugin or theme that supports fully custom-styled dropdowns or replaces the sort filter with a custom-built UI element.