On Sale Ribbon for WooCommerce Products Query Loop in Bricks

Updated on 8 Apr 2024

This Pro tutorial provides the steps to show a SALE ribbon for products that are output using Bricks‘ Query Loop.

Step 1

Let’s register a custom function that outputs the sale ribbon for products that are on sale.

Add the following in your child theme‘s functions.php or a code snippets plugin like WPCodeBox:

/**
 * Function that returns the HTML for a ribbon reading "Sale" for products on sale.
 *
 * @return string
 */
function bl_on_sale_ribbon(): string {
	global $product;

	return $product->is_on_sale() ? sprintf( '<div class="ribbon ribbon--left"><div class="ribbon__title ribbon__title--left">%s</div></div>',  __( 'Sale', 'woocommerce' ) ) : '';
}

Whitelist the function.

Step 2

Import this (mirror) Section into your site at Bricks → Templates.

Edit a Page/template with Bricks and insert this section template either using a Template element or by clicking the Templates (folder) icon in the top toolbar at the right. That should insert a Section having this structure:

The key thing is adding a text element inside the query loop item having:

{echo:bl_on_sale_ribbon}

You should also set the query loop item’s position to relative and its overflow to hidden.

Step 3

Add this CSS: (ex: in the child theme’s style.css)

/* --- Ribbon --- */

.ribbon {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 0;
  z-index: 2;
  transform: rotate(90deg);
}

.ribbon--left {
  right: auto;
  left: 0;
}

.ribbon__title {
  font-size: 12px;
  margin-top: 39px;
  width: 200% !important;
  color: #fff;
  text-align: center;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0.25px;
  background-color: #e70d4f;
  transform: translateY(-50%) translateX(-50%) translateX(39px) rotate(-45deg);
  max-width: none;
  text-transform: uppercase;
}

.ribbon__title--left {
  transform: translateY(-50%) translateX(-50%) translateX(39px) rotate(225deg);
  margin-top: 60px;
}

That’s it! Save and check the front end.