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 🙂
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 businessbloomer.com/woocommerce-customization
* @source https://businessbloomer.com/?p=73566
* @author Rodolfo Melogli, Business Bloomer
* @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:
Part 2 – PHP Snippet: Display Badge @ Single Product Page
/**
* @snippet Checkbox to display Custom Product Badge Part 2 - WooCommerce
* @how-to businessbloomer.com/woocommerce-customization
* @source https://businessbloomer.com/?p=73566
* @author Rodolfo Melogli, Business Bloomer
* @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:
“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 🙂
Is it possible to get the checkbox to show when using Quick edit?
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!
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
You’re welcome! Of course, simply echo an HTML image instead of HTML text
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
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!
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?
You’ll need CSS for that
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?
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.
Depends on the code you wrote- If you want to share it I can take a quick look
Is it possible to get the checkbox to show when using bulk edit?
https://businessbloomer.com/woocommerce-add-custom-field-to-bulk-actions-edit/
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->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->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!
Sorry can’t help you with custom troubleshooting
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?
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
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.
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
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
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
The
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
– it will show in advanced tab 🙂
Greetz!
Excellent!
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.
Hey Wallace, thanks so much for your comment! Unfortunately my answer is the same 🙂
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?
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
Ciao,
for the translation (i.e. with WPML multiligual) should I use:
Grazie 1000
Almost 🙂
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.
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
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.
Hey there, thanks for your comment! Are those product types both simple & variable?
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
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
Yes, it is quite simple 🙂
/** * @snippet Checkbox to display Custom Product Badge Part 2 in Product loop * @how-to businessbloomer.com/woocommerce-customization * @source https://businessbloomer.com/?p=330 * @author Rodolfo Melogli, Business Bloomer, 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>'; } }How do they show under the product outside the home page, thanks
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
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!
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!
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.
Hello Bhuone, thanks for your comment! I changed the PHP slightly, now it should work on any product type 🙂 Let me know!
Hey Rodolfo,
Is it possible to use this snippet in combination with variable products?
With kind regards,
Jeffrey
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
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?
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]
🙂
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.
Obregado my friend!
Does it works for “custom product” type or variation ? or just for “simple product” ?
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!
Hi!
Thanks for this good tip, but althought I’m not coder I guess will be better to add that no ?
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
Excellent Phil, thanks for that 🙂
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?
Of course Ahmed! Just change the message inside the snippet 🙂
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.
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