How to add a “Sold Out” badge for out of stock products in Bricks

Looking to add a “Sold Out” badge for products in the Shop page for WooCommerce products that are out of stock when using Bricks’ Products element?

One way in which this can be done is by defining a custom function that checks the product object’s is_in_stock method and returns the HTML followed by using this function inside the Products element as a field.

Add this in the child theme’s functions.php or a code snippets plugin:

// Function that returns the HTML for Out of Stock badge when the product is out of stock.
// Can be used in Products element as a dynamic data field: 
function bl_sold_out_badge() {
	// ensure that the global $product variable is in scope
	global $product;

	if ( ! $product->is_in_stock() ) {
		return '<span class="sold-out-badge">Sold Out</span>';
	}
}

Edit your Shop page with Bricks and add this CSS at Settings → PAGE SETTINGS → CUSTOM CODE → Custom CSS:

.sold-out-badge {
  background: #654ea3;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 5px 10px;
  position: absolute;
  right: 10px;
  top: 10px;
}

If you haven’t already, add a Section having the Products element.

Add a new Field (position does not matter – can be at the beginning/end/middle) having:

Forum post.