Adding a Featured Product flash in WooCommerce

Avatar

By default, WooCommerce displays an ‘On Sale’ flash on any products that are on sale. You might wish to display other information to the customer, such as whether the product is featured or even if it’s out of stock.

We can do that quite simply by hooking into the existing woocommerce_before_shop_loop_item_title action. The woocommerce_show_product_loop_sale_flash action, which displays the ‘On Sale’ flash, is hooked at priority 10 so we’ll hook our action just after that, at priority 15.

function ignition_feature_flash() {
 global $post, $product;
 if ( $product->is_featured() ) :
  echo apply_filters( 'woocommerce_featured_flash', '<span class="is-featured">' . __( 'Hot!', 'ignition-theme' ) . '</span>', $post, $product ); 
 endif;
 if ( ! $product->is_in_stock() ) :
  echo apply_filters( 'woocommerce_stock_flash', '<span class="out-of-stock">' . __( 'Sold Out!', 'ignition-theme' ) . '</span>', $post, $product ); 
 endif;
}
add_action( 'woocommerce_before_shop_loop_item_title', 'ignition_feature_flash', 15 );

This code uses the WooCommerce $product global variable to get product information then a couple of useful methods, is_featured() and is_in_stock() to check whether the product is featured or in stock. If the condition is met, we add the HTML for the flash, and apply a filter in case anyone wants to modify the content.

In our Ignition theme, we added some styling so that the flashes appear in the top left of the product image:

.onsale,
.is-featured,
.is-out-of-stock {
 position: absolute;
 top: 15px;
 left: 30px;
 padding: 4px 8px;
 text-transform: uppercase;
 font-weight: bold;
}
.sale .is-featured,
.sale .is-out-of-stock,
.featured .is-out-of-stock {
 top: 55px;
}
.sale.featured .is-out-of-stock {
 top: 95px;
}

Note that if products have multiple flashes, we push the featured and out of stock flashes down below the on sale flash.

 

Leave a Reply

Your email address will not be published. All fields are required.