WooCommerce: Display Custom Product Badge (Conditionally)

There are many plugins out there to show custom badges, notices, messages… but as usual a few lines of PHP can help you achieve the same result!

Today we take a look at how to add a checkbox to the product edit page, so that you can display a conditional badge based on whether the checkbox is checked or not.

Have fun ๐Ÿ™‚

Display a custom Product badge on the WooCommerce Single Product Page

Part 1 – PHP Snippet: Display Checkbox @ Product Edit Page

First we need to create a new checkbox which will give us control over showing the badge or not. This is pretty simple to do. The only difficult thing is to make sure we “save” the checkbox value in the post meta, so that in Part 2 we can check if the checkbox is checked or not.


/**
 * @snippet       Checkbox to display Custom Product Badge Part 1 - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @source        https://businessbloomer.com/?p=73566
 * @author        Rodolfo Melogli
 * @testedwith    Woo 3.5.1
 * @community     https://businessbloomer.com/club/
 */
 
// -----------------------------------------
// 1. Add new checkbox to product edit page (General tab)
 
add_action( 'woocommerce_product_options_general_product_data', 'bbloomer_add_badge_checkbox_to_products' );        
 
function bbloomer_add_badge_checkbox_to_products() {           
woocommerce_wp_checkbox( array( 
'id' => 'custom_badge', 
'class' => '', 
'label' => 'Show Custom Badge'
) 
);      
}
 
// -----------------------------------------
// 2. Save checkbox via custom field
 
add_action( 'save_post', 'bbloomer_save_badge_checkbox_to_post_meta' );
 
function bbloomer_save_badge_checkbox_to_post_meta( $product_id ) {
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
        return;
    if ( isset( $_POST['custom_badge'] ) ) {
            update_post_meta( $product_id, 'custom_badge', $_POST['custom_badge'] );
    } else delete_post_meta( $product_id, 'custom_badge' );
}

Final result:

Display a checkbox to enable/disable the WooCommerce Product badge

Part 2 – PHP Snippet: Display Badge @ Single Product Page


/**
 * @snippet       Checkbox to display Custom Product Badge Part 2 - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @source        https://businessbloomer.com/?p=73566
 * @author        Rodolfo Melogli
 * @compatible    Woo 3.5.1
 * @community     https://businessbloomer.com/club/
 */
 
// -----------------------------------------
// 3. Display badge @ single product page if checkbox checked
 
add_action( 'woocommerce_single_product_summary', 'bbloomer_display_badge_if_checkbox', 6 );
 
function bbloomer_display_badge_if_checkbox() {
    global $product;     
    if ( get_post_meta( $product->get_id(), 'custom_badge', true ) ) {
        echo '
<div class="woocommerce-message">CUSTOM BADGE!</div>

';
    }
}

Final result:

Display a custom Product badge on the WooCommerce Single Product Page

“I don’t code – is there a reliable plugin for that?”

As many readers would love to code but don’t feel 100% confident with it, I decided to look for a reliable plugin that achieves the same (or even better) result.

In this case, I recommend the YITH WooCommerce Badge Managementย plugin. On top of displaying custom text badges (free version), you can also create CSS, image and advanced badges, assign product badges to specific products and/or categories, pick the badge position and much more.

But in case you wish to code, keep reading ๐Ÿ™‚

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce Visual Hook Guide: Single Product Page
    Here’s a visual hook guide for the WooCommerce Single Product Page. This is part of my “Visual Hook Guide Series“, through which you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can copy/paste). If you like this guide and it’s helpful to you, let me know in the comments! […]
  • WooCommerce: Disable Variable Product Price Range $$$-$$$
    You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce: Add Custom Field to Product Variations
    Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page. Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable […]
  • WooCommerce: Show Number Of Products Sold @ Product Page
    WooCommerce database already stores the number of products sold for you. Therefore, you may want to show such number on the product page, close to the Add To Cart button. As we’ve seen in my book Ecommerce and Beyond, showing the number of sales for each product can increase your sales conversion rate. All you […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

57 thoughts on “WooCommerce: Display Custom Product Badge (Conditionally)

  1. Is it possible to get the checkbox to show when using Quick edit?

    1. Hello eJey, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  2. Before I ask i would like to say thanks to you for this snippets, it was really helpful and worked perfectly,
    I want to ask if it’s possible to display image/icon instead of texts/message

    1. You’re welcome! Of course, simply echo an HTML image instead of HTML text

  3. Hello Rodolfo, is there a way to put badges on the single product page depending on the tags assigned to a product? In other words, depending on the label, it uses a logo type badge assigned to that tag.

    Thx

    1. Hi Nelson, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  4. Now got it working, alougth still not sure how it chooses where to appear?

    Next step would be to get it on the product list image?

    1. You’ll need CSS for that

      1. Thank you, looking good now.

        How would I get the badges to appear next/below to the grid or list image?
        I obviously need a different add action line in the display code? But will the checkbox functions still work? or does a new custom field need creating?

      2. By using the action woocommerce_before_shop_loop_item_title, I can insert the badge, but there seems to be a conflict, as all I get is the first product and a critical error message.

        1. Depends on the code you wrote- If you want to share it I can take a quick look

  5. Is it possible to get the checkbox to show when using bulk edit?

      1. add_action( 'woocommerce_product_bulk_edit_save', 'bbloomer_save_badge_checkbox_to_post_meta_bulk' );
          
        //bulk
        function bbloomer_save_badge_checkbox_to_post_meta_bulk( $product ) {
            $post_id = $product-&gt;get_id();    
           if ( isset( $_POST['custom_badge'] ) ) {
                    update_post_meta( $post_id, 'custom_badge', $_POST['custom_badge'] );
            }
        }
        // 3. Display badge @ single product page if checkbox checked
          
        add_action( 'woocommerce_single_product_summary', 'bbloomer_display_badge_if_checkbox', 6 );
          
        function bbloomer_display_badge_if_checkbox() {
            global $product;     
            if ( get_post_meta( $product-&gt;get_id(), 'custom_badge', true ) ) {
                echo '
        
         
        ';
            }
        }
        

        I did it and it doesn’t work, can you please correct me? Will this be applicable to variable products as well? Thanks!

        1. Sorry can’t help you with custom troubleshooting

  6. Hello,

    I have managed to get the custom code working on my products and I have added several custom badges along with images for each one of them.

    I have a small problem. When I select several of the custom badges of the product and save the changes, the custom badges do appear on the front end. When some custom time passes, the badges would disappear.

    I guess an update of woocommerce or something is reverting the records saved in the database. Do you have any idea what might be causing the problem?

    1. Hello Kiril. I think that “delete_post_meta” is actually triggering even when you don’t save a product e.g. when you place an order. Snippet needs to be improved and fixed there in your case

  7. Hi! Great snippet, I love it! Was wondering though, can the custom message box be replaced by an image instead? Like if I wanted to show an “icon” or “Image” for items with fast shipping and show this icon on the shop loop instead of just the single product page. FOR EXAMPLE, if users were browsing my shop page, my “fast shipping” icon/image (an image of a delivery truck with wings) would display after the product title or near the product price, letting customers know that that item has fast shipping? Hope that makes sense.

    1. Hey Matt, thanks so much for your comment! Yes, this is possible – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  8. hello
    thanks for the easy way you share,
    looks like it dos not work with variation product, only with simple product.
    any way we to fix it ?

    thanks

    1. Hello Lior, yes, it does not show the field in variable products as there is no “General” tab there (hook: “woocommerce_product_options_general_product_data”). You’ll need to find a different hook and the system would work for both, for example you could place this checkbox in another tab. Hope this helps

      1. The

        woocommerce_product_options_general_product_data

        is not the best hook for this solution, because, as You mentioned above, it will not display for variable products. More logical (and working ๐Ÿ™‚ ) hook is

        woocommerce_product_options_advanced

        โ€“ย it will show in advanced tab ๐Ÿ™‚

        Greetz!

        1. Excellent!

  9. Hello again, I would like to do something like this, however, instead of showing a badge inside each product, I would like a custom image to appear in the preview of the product in the store, but when the customer enters the product, the image disappears and only the product image remains. The image I made, is a style of footnote, rectangular, in PNG, that is, I want to leave it in the image of the product. Similar to the discount badges that woocommerce has by default.

    1. Hey Wallace, thanks so much for your comment! Unfortunately my answer is the same ๐Ÿ™‚

  10. Hello everyone, First of all I wanted to congratulate for the content, great quality, it helps me a lot. Now let’s ask the question, I have already seen that it is possible to add a check box in the Product Edit Page, I would like to know if I would like to do something like this, but linking with a certain user, since, field called “My Products” where the user will see the products that he sent me, and which were sold on my site. Anyone know any way?

    1. Hey Wallace, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  11. Ciao,
    for the translation (i.e. with WPML multiligual) should I use:

    echo '__( 'CUSTOM BADGE!',  'bloomer')';

    Grazie 1000

    1. Almost ๐Ÿ™‚

       echo __( 'CUSTOM BADGE!', 'bloomer' ); 
  12. hi,
    I am truly thankful for the knowledge i am getting from this blog and the way it has helped me redesign my clients work. I have couple of question,
    1. i am unable to change the css for the custom badge.
    2. is it possible to have 2 seperate badges on the same product. (for instance, one has free 2 day fedex express shipping and the second one would have 2 day fedex ground shipping. depending on the product i can select either 2 day fedex express or 2 day fedex ground. please let me know if we can get it done on the site.

    1. Hello there – thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  13. I applied this code and it was great until I realized that it does not consistently save changes on my e-commerce website. Some of my products have accepted the change but others have not.

    What has been done:
    1. Cleared/Purged Cache
    2. Tested on different browsers (firefox, ie, edge, safari)
    3. Cleared all browser history and such
    4. Removed the code and re-added it

    Still don’t know what the issue is. Any help/thoughts/comments/ideas would be greatly appreciated.

    1. Hey there, thanks for your comment! Are those product types both simple & variable?

  14. This is a great tutorial, thank you so much for sharing.

    Is it also possible to use something like this to display a notification (like a badge) on the products in the loop?

    I used the above to display that a product is a part of a Summer Special, just I have no idea how to get a notification onto the products on the shop pages if we use the same check box.

    Hope there is a way.

    thanks again

    1. Ollie, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

    2. Yes, it is quite simple ๐Ÿ™‚

      /**
       * @snippet       Checkbox to display Custom Product Badge Part 2 in Product loop
       * @how-to        Get CustomizeWoo.com FREE
       * @source        https://businessbloomer.com/?p=330
       * @author        Rodolfo Melogli, BlackSun
       * @compatible    Woo 3.5.1
       * @community     https://businessbloomer.com/club/
       */
       
      add_action( 'woocommerce_after_shop_loop_item_title', 'bbloomer_show_custom_badge_shipping_loop', 5 );
       
      function bbloomer_show_custom_badge_shipping_loop() {
         global $product;     
          if ( get_post_meta( $product->get_id(), 'custom_badge', true ) ) {
              echo '<span class="custom-badge">Custom badge, yay!</span>';
          }
      }
      
  15. How do they show under the product outside the home page, thanks

    1. Hello there, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  16. Hi Rodolfo…is it possible to use this code in a way that allows me to customize the badge message everytime? For example, in the product edit page I could click the box to enable, then type the custom message I want for that specific product. I don’t want to use the same badge for “out-of-stock” and “coming soon.” If you’re not able to answer that question becuase it is custom coding….would it work if it just duplicated this php a few times to give me 2 or 3 checkboxes/badges and I would enable the one I want to use?

    Thanks!

    1. Hey Albert, thanks so much for your comment! Yes, that’s definitely possible but as you said it’s custom coding so I can’t help here with coding I’m afraid.

      You could code a “custom field” that then gets picked up by the snippet to echo a product-specific badge (similar to this: https://businessbloomer.com/woocommerce-display-rrp-msrp-manufacturer-price/)

      Hope this helps!

  17. Hi , Rodolfo
    Thank you very much for this great post. I have been using Rental and booking with WooCommerce By RedQ Team . This plugin added new type of product as ” Rental Product “.

    I tried your code , it works fluently for other type of products(single/group ..etc).

    but doesn’t show in rentable product type. is i saw its shown in general section of other type of product, but in rentable product , its hide general section ..so its hided over there.

    Dear Rodolfo , is there any way to place this badge over rental product ?

    Hope your response.

    1. Hello Bhuone, thanks for your comment! I changed the PHP slightly, now it should work on any product type ๐Ÿ™‚ Let me know!

  18. Hey Rodolfo,

    Is it possible to use this snippet in combination with variable products?

    With kind regards,

    Jeffrey

    1. Hello Jeffrey, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  19. Hello,

    Awesome snippet. Try it and it works perfect!
    After that…
    Playing around with this snippet for enable/disable loading scripts for a single product:

    add_action( 'wp_enqueue_scripts' , 'gfp_scripts' );
    
    function gfp_scripts() {
    global $product;
      if ( get_post_meta( $product->get_id(), 'load_scripts_checkbox', true ) ) { // If checkbox is enabled load scripts
        wp_enqueue_script( 'jquery' );
        ...
      }
    } 
    

    But gives an error:
    Fatal error: Uncaught Error: Call to a member function get_id() on string …

    Any idea where it go wrong?

    1. Found a solution:

      Replace the if-condition and ‘global $product’ with this code:

      [/php]

      global $post;
      if ( get_post_meta( $post->ID, ‘load_scripts_checkbox’, true ) ) {

      [/php]

  20. Hello Rodolfo Melogli, how are you?

    Very good post.

    In fact, your posts are helping me a lot.

    Congratulations!

    Ah, sorry for English, I’m Brazilian.

  21. Does it works for “custom product” type or variation ? or just for “simple product” ?

    1. Hey Phil, thanks for your comment! The action “woocommerce_product_options_pricing” belongs to the Product Data > General tab of the Product Edit page. By changing that hook, you cna add that to any of those tabs, or even to each variation. Hope this helps!

  22. Hi!

    Thanks for this good tip, but althought I’m not coder I guess will be better to add that no ?

    echo '__( '<div class="woocommerce-message">CUSTOM BADGE!</div>',  'bloomer')';

    Like that it would be possible to translate the string no ?

    P.S : I do not like Valentine’s Day either … or Haloween … or any other “obligatory” celebration ๐Ÿ˜‰
    Cheers
    Regards
    Phil

    1. Excellent Phil, thanks for that ๐Ÿ™‚

  23. Great as always!

    My question is, in place of “custom badge” can one replace it with “free delivery” in order to notify a buyer that the item is available for a free delivery?

    1. Of course Ahmed! Just change the message inside the snippet ๐Ÿ™‚

  24. If I wanted to have a text box instead of a checkbox and wanted the contents to be displayed on the product page, how would I go about it. I see how to create the text box and it appears to save the information that I entered there but I am having trouble retrieving it and getting it to display on the product page.

    1. Hey David, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

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