Read More
Menu Close

    WooCommerce Custom Product Label

    WooCommerce Custom Product Label – In this post we’ll see how we can add custom label to products in shop page and single page.

    We can add labels to either all products or based on any condition like product is simple to highlight from others like WooCommerce does when product is in 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
     */

    WooCommerce Custom Product Label

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

    Searching for an experienced
    Woocommerce Company ?
    Read More

    First, we’ll add label to simple products on shop page and then we’ll move to product single page. For shop page, we’ll use 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://s.w.org/images/core/emoji/11/svg/1f642.svg" /></span>';
          }
        }
      }
    
    }

    In above code snippet, we initialise plugin’s main class on ‘plugins_loaded’ hook. And then we have added action to hook we mentioned earlier to add label on shop page.

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

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

    function __construct() {
       add_action( 'wp_head', array( $this, 'wk_label_style' ) );
    }
    
    function wk_label_style() {
      ?>
      <style>
      .wk-shop-label {
         max-width: 60px; */
         max-height: 60px;
         position: absolute;
         top: 0;
         left: 0;
         margin: 0;
      }
      </style>
      <?php
    }

    Above css code will place the label in top left corner of product. Please check below –

    WooCommerce Custom Product Label

    Now, this is all for adding custom label for product on shop page. Let’s start to add same label on product single page if the product is simple. Here, we’ll use hook ‘woocommerce_single_product_image_thumbnail_html’ which is filter hook so we need to add filter on same. This filter provides $output as argument so as filter works we can add 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;
    }

    WooCommerce Custom Product Label

    That’s all for custom label for product on shop and single page. Thanks for your time 🙂

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top