Quote from Alex Dev on July 10, 2026, 17:41

Hello

Both are possible with built-in means, no core edits needed. Here is each one.

1) The "orderby" label

Yes, this can be changed. The label is a translatable string (text domain woocommerce-products-filter), and so are the values like "popularity", "rating", "date", and so on. So you have two clean ways to change it.

The easy no-code way: use Loco Translate. Open the plugin's text domain and translate the string "orderby" to "Sort By" (or "Order By"), and translate "popularity" to "Popularity", "rating" to "Rating", etc. That gives you "Sort By: Popularity".

The code way, if you prefer a snippet, add this to your child theme functions.php:

add_filter( 'gettext', function ( $translated, $text, $domain ) {
    if ( 'woocommerce-products-filter' === $domain ) {
        $map = array(
            'orderby'    => 'Sort By',
            'popularity' => 'Popularity',
            'rating'     => 'Rating',
            'date'       => 'Date',
            'menu order' => 'Default',
        );
        if ( isset( $map[ $text ] ) ) {
            return $map[ $text ];
        }
    }
    return $translated;
}, 20, 3 );

One note on the snippet: the gettext filter runs on a lot of strings, so it checks the text domain and matches exact strings, as above. Keep that structure so it does not affect other text on your site. You can add or remove lines in the map to suit your wording.

2) The red remove (X) icon

Yes, there is a built-in filter for this. The icon is an image, and its URL comes from the woof_delete_img_url filter, so you can swap it globally with a snippet:

add_filter( 'woof_delete_img_url', function ( $url ) {
    return 'https://your-site.com/wp-content/uploads/my-remove-icon.svg';
} );

Two things to keep in mind:

Because it is an image and not a font icon, "changing the color" means supplying an image in the color you want (a PNG or an SVG). You cannot recolor it with CSS color. A convenient approach is to use an SVG (you can even use an inline SVG data URI) drawn in your preferred color.

The filter above changes the icon everywhere it appears (top panel, term reset icons, date picker clear, saved queries, and so on). If you only want to change it in the top panel, target it with CSS instead. The plugin outputs an inline style for this, so you need !important:

.woof_products_top_panel li span,
.woof_products_top_panel2 li span {
    background-image: url('YOUR_ICON_URL') !important;
}

Both of these work with the standard plugin, nothing in the core needs to be touched, and they survive updates. If you tell us the exact wording and the icon you want, we can tailor the snippets for you.

 

Quote from AmrMo on July 11, 2026, 12:38

Hi Alex,

Thank you so much for your detailed explanation and for taking the time to help me.

I wanted to let you know that the first solution using the gettext snippet worked perfectly. It was exactly what I was looking for.

Regarding the remove icon, I was hoping there might be a built-in way to display just a simple "X" instead of the red circular icon. I'd prefer not to rely on additional CSS because my site already has quite a bit of custom CSS, and I try to keep it as lightweight as possible.

If possible, I'd love to see more customization options for the top panel added in a future update, such as:

• Choosing the remove icon (or using a simple "X")
• Changing the icon color from the plugin settings
• Customizing labels like "Order By" directly from the plugin settings

I think these options would be very useful for many users and would reduce the need for custom code or CSS.

Thanks again for your excellent support and for the great plugin. I really appreciate your help!

Quote from Alex Dev on July 13, 2026, 13:27

Hello

Thank you for the kind words, and I am glad the gettext snippet did exactly what you needed.

About the remove icon

You can get a plain "X" without writing any CSS at all. The woof_delete_img_url filter accepts any image URL, so the simplest route is to upload a small SVG and point the filter at it. I have attached below code you can use, it is a clean thin "X", about a hundred bytes, and the color is defined inside the file itself.

Upload it to your media library, then add this to your child theme functions.php:

add_filter( 'woof_delete_img_url', function ( $url ) {
    return 'https://your-site.com/wp-content/uploads/2026/07/woof-remove-x.svg';
} );

One note in case you were thinking of it: an inline data URI will not work here. Most of the icons are rendered as an img tag passed through WordPress esc_url(), which only allows standard protocols, so a data URI would be stripped and the icons would disappear. A normal file URL is the way to go.

Here is the code exemple of svg image-icon you can use with your own params, just save it as the file and upload to the site:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <!-- Simple remove icon. To change the color, edit the stroke value below. -->
  <path d="M4 4 L12 12 M12 4 L4 12"
        fill="none"
        stroke="#333333"
        stroke-width="2"
        stroke-linecap="round"/>
</svg>

Replace the URL with the one your media library gives you after upload.

To change the color, open the SVG in any text editor and edit the stroke value, for example stroke="#333333" to stroke="#888888". Nothing else needs to be touched, and no CSS is involved.

 

About your suggestions

Choosing the remove icon and its color from the plugin settings is a reasonable idea and we will think about adding it.

For the labels, we would rather not add a separate settings screen for them. All of those strings are already translatable, and translation is the standard mechanism for exactly this, whether through Loco Translate or through the gettext snippet you are already using. Adding a second way to override the same texts inside the plugin settings would give two sources of truth for the same string, and would make the interface heavier without giving you anything the translation layer does not already do.