How to Display Magento Product Labels in Custom Templates

In this developer guide article for Product Labels Magento 2 Extension, you can find out how to display product labels on product images rendered by custom or third-party functionality. Additionally, this guide helps resolve compatibility issues with third-party themes that modify templates so that product labels no longer appear automatically. Please follow the steps below to display product labels in custom templates.

Step 1. Find the Template

Find your custom template with the help of path hints.

Step 2. Get Product Labels Helper

Add the following code at the beginning of the template:

<?php
	/** @var \Plumrocket\ProductLabels\Helper\Label $labelHelper */
	$labelHelper = $this->helper(\Plumrocket\ProductLabels\Helper\Label::class);
?>

Step 3. Render Labels

After the <img> tag, use the $labelHelper->getProductLabelsHtml($block->getLayout(), $_product); code to get product labels HTML.

The getProductLabelsHtml method requires two arguments: Layout and Product.

Third-party theme integration example
<a href="<?= $block->escapeUrl($_product->getProductUrl()) ?>"
	   class="product photo product-item-photo"
	   tabindex="-1">
	    <img class="product-image-photo default_image <?php if(!$_lazyload): ?>porto-lazyload<?php endif;?>"
	     <?php if(!$_lazyload): ?>data-<?php endif; ?>
	     src="<?php echo $productImageUrl; ?>"
	       width="<?php echo $image_width; ?>"
	     height="<?php echo $image_height; ?>"
    />
	 <?= $labelHelper->getProductLabelsHtml($block->getLayout(), $_product); ?>
</a>

Was this article helpful?