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.

WooCommerce sales flash

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.

WooCommerce featured product flash

Shop Page

WooCommerce featured product flash

Product Page

You can also adjust the text if you want to use the “Featured” indicator as something else, such as “Top Product!” or something similar.

Published by Beka Rice

Beka leads product direction for SkyVerge, focusing on new features for our plugins and Jilt. She spends a lot of time on research and interviews, but likes to write so she has an excuse to spend more time jamming out to anything from The Clash to Lady Gaga.

1 Comment

  1. […] a guide guide on adding a featured product flash to WooCommerce from […]

Hmm, looks like this article is quite old! Its content may be outdated, so comments are now closed.