When a product is on sale in your shop, WooCommerce adds a sales flash to that product to show customers that the product has a sale running to draw their attention to it.
This sales flash is shown on the shop page and on the single product page to keep the customer informed.
Depending on how you’re using “Featured” products in your shop, you may want to draw the customer’s attention to the featured products as well. We can add a flash for WooCommerce featured products in the same way as the sales flash to catch customers’ attention for these products as well.
Here are a couple notes before we show you how to add the flash for WooCommerce featured products:
- Your theme needs to have these actions present in its templates to ensure that this will work. If you don’t see the sales flash, your theme may have removed these.
- Your theme needs to style the sales flash that uses the
class="onsale". If your theme changes the class name for the sales flash, your new featured flash may look weird, and you’ll have to either (1) add the onsale class to your stylesheet where the sales flash is styled, or (2) use the correct class name so the featured flash looks like the sales flash.
- These actions are what WooCommerce core uses to add the sales flashes, but you can certainly hook into different actions if you want to move the flash elsewhere on the shop / product page.
Here’s how you can add custom code to your site if you’ve not done it before.
How to add a flash for WooCommerce featured product
To add the sales flash to your products, we can use the really handy
is_featured() function in WooCommerce, which returns a boolean to check if the product is featured.
We’ll first check this, and if the product is featured, we’ll add a flash just like the sales flash to the shop and product page.
You can choose to use one or both of these actions depending on your needs. Here’s what your “Featured” flash will look like with the Storefront theme.
You can also adjust the text if you want to use the “Featured” indicator as something else, such as “Top Product!” or something similar.