Home ยป How to change WooCommerce product count highlight color

How to change WooCommerce product count highlight color

If you have a page that displays your WooCommerce categories, you’ll notice WC shows a product count beside the category name. In this example, the product count is highlighted in yellow.
 

Category product count highlighted in yellow.
Category product count highlighted in yellow.

Note: DefaultSites.com is an out-of-the-box install of WooCommerce on The Theme Foundry’s “Make” WordPress theme.
 


Here are the steps for changing the product-count highlight color

You can change the color of the highlighted product count using the WordPress Customizer, Additional CSS feature.

1. Login with your WordPress Admin credentials and select Customize at the top of the page.

WordPress customizer
Select the WordPress customizer

2. Select Additional CSS.

Additional CSS
Additional CSS

3. Paste this code in the Additional CSS window and click Publish.

mark {
background: transparent;
text-decoration: none;
}

Paste code into CSS window
Paste code into CSS window

Notes:

With my background color set to background: transparent;, this makes the background transparent. You can change this to a hex value background: #fff111; to make any color the background. Click here for a list of hex values for different colors.

Did that work for you? If not, contact me here and maybe I can help.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.