How to Add Custom Product Label in WooCommerce?

In this post, we’ll see how we can add custom product label in WooCommerce on the shop page and single page.

If you require expert assistance or want to develop custom unique functionality, hire WooCommerce Developers for your project.

We can add labels to either all products or based on any condition like the product is simple to highlight from others like WooCommerce does when the product is in the sale.

Let’s start with creating a test plugin to achieve the said feature.

<?php

/**
 *  Plugin Name: WooCommerce Custom Product Label webkul
 *  Description: To add custom label on shop page and single product page.
 *  Author: Webkul
 *  Author URI: https://webkul.com
 *  Plugin URI: https://webkul.com
 */

Activate the plugin from the admin dashboard under Plugins->Installed Plugins.

First, we’ll add labels to simple products on the shop page and then we’ll move to the product single page. For the shop page, we’ll use the hook ‘woocommerce_before_shop_loop_item_title’ provided by WooCommerce.

add_action( 'plugins_loaded', 'wk_product_label_loaded' );

function wk_product_label_loaded() {
  new WK_Product_Label();
}

if ( ! class_exists( 'WK_Product_Label' ) ) {
  /**
   *
   */
  class WK_Product_Label {

    function __construct() {
      add_action( 'woocommerce_before_shop_loop_item_title', array( $this, 'wk_shop_product_label' ) );
    }

    function wk_shop_product_label() {
      global $product;

      if ( 'simple' === $product->get_type() ) {
        echo '<span class="wk-shop-label"><img src="https://cdnblog.webkul.com/blog/wp-content/uploads/2018/08/wc-custom-label-2.jpg" /></span>';
      }
    }
  }

}

In the above code snippet, we initialize the WooCommerce Product Label plugin’s main class on the ‘plugins_loaded’ hook. And then we added an action to the hook we mentioned earlier to add a label on the shop page.

In the callback function, we have applied a conditional check that if the product is of simple type then only the label should apply. So, this code will add the image before the product title as the hook says.

Now, with the help of CSS, we’ll place this image on the product corner so that it looks like a label. CSS can be added to this by enqueuing an external file. But here as the task is not so big, so we’ll write CSS on the same file by using the ‘wp_head’ hook.

function __construct() {
   add_action( 'wp_head', array( $this, 'wk_label_style' ) );
}

function wk_label_style() {
  ?>
  <style>
  .wk-shop-label img{
     max-width: 60px;
     max-height: 60px;
     position: absolute;
     top: 0;
     left: 0;
  }
  </style>
  <?php
}

The above CSS code will place the label in the top left corner of the product. Please check below –

Now, this is all for adding custom labels for products on the shop page. Let’s start to add the same label on a product single page if the product is simple.

Here, we’ll use hook ‘woocommerce_single_product_image_thumbnail_html’ which is a filter hook so we need to add a filter on the same. This filter provides $output as an argument so as the filter works we can add a custom label with default output.

Let’s check the code –

function __construct() {
   add_filter( 'woocommerce_single_product_image_thumbnail_html', array( $this, 'wk_single_product_label' ) );
}

function wk_single_product_label( $output ) {
    global $product;
    if ( 'simple' === $product->get_type() ) {
       $output .= '<span class="wk-shop-label"><img src="https://cdnblog.webkul.com/blog/wp-content/uploads/2018/08/wc-custom-label-2.jpg"></span>';
    }
    return $output;
}