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        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @source        https://businessbloomer.com/?p=73566
 * @author        Rodolfo Melogli
 * @testedwith    Woo 3.5.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
// -----------------------------------------
// 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        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @source        https://businessbloomer.com/?p=73566
 * @author        Rodolfo Melogli
 * @compatible    Woo 3.5.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
// -----------------------------------------
// 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 this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a 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.

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

  1. 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

  2. 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

  3. 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 πŸ™‚

  4. 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

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

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

    Grazie 1000

    1. Almost πŸ™‚

       echo __( 'CUSTOM BADGE!', 'bloomer' ); 
  6. 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

  7. 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?

  8. 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

  9. 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

  10. 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!

  11. 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!

  12. 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

  13. 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]

  14. 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.

  15. 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!

  16. 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 πŸ™‚

  17. 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 πŸ™‚

  18. 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? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.