How to create a custom product label in magento 2

On many occasions you would want to tag your product with a custom product label to make them stand out for your customers.

Because these labels are to be assign to the products you will need to create a new attribute and add it to the attribute set for those products. Let’s assume you will call this new attribute Custom Label and it’s id custom_label. Also set it as a dropdown and add all the options you want to it.

If you want to show this label in the product page, add to your theme’s (or module) catalog_product_view.xml layout file (located at app/design/frontend/Theme_Vendor/Theme_Name/Magento_Catalog/layout) the following code:

<?xml version="1.0"?>
<!--
/**
 * Copyright Â© 2018 Porto. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page layout="2columns-right" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Magento_Catalog::css/product.css" rel="stylesheet" type="text/css"  />
    </head>
    <body>
        <referenceContainer name="product.info.media">
			<block class="Magento\Catalog\Block\Product\View" name="custom.label" template="Magento_Catalog::product/view/custom-label.phtml" />
		</referenceContainer>
    </body>
</page>

Note that the catalog_product_view.xml layout file call also be located elsewhere. The point here is to add a new block to that layout which is responsible to render the product page.

On the above code I added the new block that will render the label to the product.info.media container because it is inside that container that the image gallery is usually rendered (and I want my label to be place on top of the main product image). I have also added a new css file to the product pages as you can see. This css file (or less file) will be place in app/design/frontend/Theme_Vendor/Theme_Name/Magento_Catalog/web/css and will contain the necessary css rules to be applied to the HTML code responsable to render the label.

My block will use a template called custom-label.phtml which is a new file I create under app/design/frontend/Theme_Vendor/Theme_Name/Magento_Catalog/templates/product/view. This phtml file contains the php code responsible to get the label value from the product and render it to HTML. Here is the code for that:

<?php $_product = $block->getProduct(); ?>
<?php $label = $_product->getResource()->getAttribute('custom_label')->getFrontend()->getValue($_product); ?>
<?php if ($label) { ?>
		<div class="custom-label">
			<?= $label; ?>
		</div>
<?php } ?>

Because the block uses the Magento\Catalog\Block\Product\View class we can get the product using line #1. Then, on line #2, we get the value for the label attribute on that product. If that value exists we then render a div tag with the label value.

Finally, to place the label on the top left corner of the product image and to make it look good 🙂 add the following rules to the product.css file we added above.

.catalog-product-view .custom-label {
    position: absolute;
    top: 0;
    padding: 10px;
    font-weight: bold;
}

.custom-label {
    background: #c5b358;
    color: white;
    width: max-content;
    text-transform: uppercase;
}

This same idea can be applied to similar situations where you want to display a product attribute on the product page. You just need to change the place where you want to render it (by placing the block inside another container and the design). Enjoy!

Leave a Reply Cancel reply