How to Create Custom Product Badges in Woocommerce for Free?
ฝัง
- เผยแพร่เมื่อ 5 ก.ค. 2024
- In this video I’m going to show you how to create custom product badges in Woocommerce for free. You’ll learn how to add "featured" badge, "New" badge, display discount as a percentage and how to add custom Woocommerce product badges.
All the code snippets shown in the video are here wpsimplehacks.com/custom-prod...
Blocksy and Kadence are currently two of the best WordPress themes. So, if you’re interested, then you can grab:
🅱️ Blocksy theme wpsimplehacks.com/blocksy (SAVE 10% Coupon WPSH10)
🔵 Kadence theme here: wpsimplehacks.com/kadence (SAVE 10% Coupon SIMPLEHACKS)
✅ If you want to be the first to be notified about the new tutorials then please subscribe to this channel. / @wpsimplehacks
✅ BEST WORDPRESS THEMES:
Blocksy theme: wpsimplehacks.com/blocksy (SAVE 10% Coupon WPSH10)
Kadence Theme: wpsimplehacks.com/kadence (SAVE 10% Coupon SIMPLEHACKS)
Astra Theme: wpsimplehacks.com/astra
GeneratePress: wpsimplehacks.com/generatepress
OceanWP: wpsimplehacks.com/oceanwp (SAVE 10% Coupon WPSH10)
✅ AWESOME WORDPRESS PLUGINS:
WPCodeBox wpsimplehacks.com/wpcodebox (SAVE 20% Coupon WPSH20)
WooLentor Elementor/Gutenberg add-on wpsimplehacks.com/woolentor (SAVE 20% Coupon WPSH20)
Best Wordpress Backup, Migration and Staging plugin - WpVivid Pro wpsimplehacks.com/wpvidid (SAVE 20% Coupon WPSH20)
Best Gutenberg Blocks addon - Kadence Blocks wpsimplehacks.com/kadenceblocks (SAVE 10% Coupon SIMPLEHACKS)
Best forms plugin - Fluent Forms: wpsimplehacks.com/fluentforms (SAVE 20% Coupon: WPSH20)
WP Social Ninja wpsimplehacks.com/socialninja (SAVE 20% Coupon: WPSH20)
Best for email marketing - Fluent CRM: wpsimplehacks.com/fluentcrm (SAVE 20% Coupon: WPSH20)
Best for creating tables - Ninja Tables wpsimplehacks.com/ninjatables (SAVE 20% Coupon: WPSH20)
Best Wordpress LMS - Tutor LMS wpsimplehacks.com/tutorlms (SAVE 20% Coupon thmwelcome20)
Best Wordpress SEO plugin - SEOPress wpsimplehacks.com/seopress
Image Map Pro - wpsimplehacks.com/imagemap
✅ AWESOME WOOOCOMMERCE EXTENSIONS:
Best Woocommerce Swiss Knife tool - Kadence WooExtras wpsimplehacks.com/wooextras (SAVE 10% Coupon SIMPLEHACKS)
Advanced Dynamic Pricing Pro wpsimplehacks.com/dynamic-pri... (SAVE 20% Coupon: WPSH20)
Phone orders For Woocommerce Pro wpsimplehacks.com/phone-order... (SAVE 20% coupon: WPSH20)
Advanced Orders Export Pro wpsimplehacks.com/export-orde... (SAVE 20% coupon: WPSH20)
Best Woocommerce sidecart plugin - Woocommerce Cart in One wpsimplehacks.com/cartinone
TIMESTAMPS
00:00 Woocommerce Custom Badges demo
01:03 Install Code Snippets plugin
01:32 Display the discount percentage on the sale badge
03:18 Display Woocommerce NEW product badge
04:31 Create Woocommerce featured product badge
05:47 Display Woocommerce custom badge with checkbox
09:15 Create Woocommerce custom text badge
10:47 Compatibility with different Wordpress themes - แนวปฏิบัติและการใช้ชีวิต
![[Watch Party] APL 2024 บุรีรัมย์ทั้งใจ Go Go](http://i.ytimg.com/vi/cKwcPFsawN4/mqdefault.jpg)
Did everything work out for you as shown in the video? Let me know in the comments.
Great Video, Thank you !!. However, there seems a slight Glitch in this. I encountered this while I tried impementing this on my site.
1). I found that, when we use an Input field option - "display Woocommerce product badge with custom text" (the last option in your Blog post), it works correctly. Everything seems working fine initially. But the moment we Add out custom Text and Save it at Backend (Product options), then I found that I CANNOT remove that custom text (if at all I want to, for some reason). That gets Saved permanently.
That is, when I tried to remove (empty that custom text field), and Save the product page, it still shows that Custom text afterwards (in the backend as well as frontend). Not sure, why ??
What actually works is, if we change or replace our Custom text, then it works perfectly again. Means, it is changing or updating the Custom text, but not completely removing (emptying) it. When we already saved it, once.
Can you please try to replicate at your end. Means by first adding custom text and saving it and seeing at frontend. Then, at backend, try to remove that custom text (making field empty), and Re-saving it. If that is working or not
Please suggest me how to resolve this issue.
Regards
nope. didnt work.
Thanks for this video
How can I put labels under the title and above the price in the product catalog?
Thank you
@@miguelappsaplicacionesyjue9224 Use a correct hook location. Default ones are these www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/
If your theme or page builder (like Elementor) overrides default Woocommerce hooks then use the ones your theme or page builder provides.
@@wpsimplehacks Thank you for your quick response and for such a detailed explanation. I am using a theme
I don't understand what I should do exactly, but don't worry.
I do not understand that. I'll keep looking on Google.
With your quick response, even if I can't do what I need, you have managed to get me to subscribe to your channel.
Thank you
You have not just helped me with this project but also with many other projects. Please keep up the good work. Your videos are detailed and easy to understand. Thank you. Much appreciated!
Thnak you for your kind words.
Wow, I just found your page ... fantastic work, thank you for these great tutorials!
Glad you like them!
Great work buddy, keep going! nice.
Thank you for your kind words 🙂
I 'm finding your videos SUPER USEFUL! I'm adding hacks you've shown to all my customers sites! EXCELLENT!
Thank you for watching 🙂
Works great. Thank you!
🙂
Very great content. I used all of it and i love it
Thanks :)
You deserve a lot subscriber. Try bring more videos on regular basis. Hopefully people will recognise your effort sooner or later. Good luck
Thanks 😏
Excellent work. Thanks so much. How would I best go about adding the version of the checkbox, instead of the existing "free shipping" location, putting it where the up to 20% bit is and also adding it on the archives? Thanks in advanced.
Please explain a bit: as I understand you want the checkbox version but what should it contain and where do you need it?
Great video!! Thanks for this one!!
Glad you liked it
@@wpsimplehacks hi. Is there a way for footer add to cart button for woocommerce, especially for variable products
Thanks for the video, will be checking out your other videos. With the free shipping will it show on the shop page also, as think it would be as useful there.
Also what plugin are you using to show hooks?
Thanks
The theme I am using (Blocksy Pro) has a built in feature that allows me to see the hooks. 10% discount coupon is in the video description.
You can also Google “Woocommerce visual hooks”
Shipping info ahould also work on category/shop pages - just use the correct hook to display it in the right position.
@@wpsimplehacks ok thanks, realized it was part of the theme after I sent the message, I'll take a look in the morning now. Just need to find the hooks for it then...
thank you so much sir!!
Most welcome!
You are a snippet master 😍😍👌👌
Thanks :)
Hi very thankful for your tutorial video! But I had some problem here..
I currently using Astra Theme and ori sales badge is circle shape, can I know how to change the shape to rectangle same as you?
Astra Pro version has some Sale badge modification options, but it would be wise to ask about it from the Astra support team.
Thanks for the detailed video and codes on your website. Would you be able to share a code for displaying a badge (png) based on attributes? For example, showing products brand (or made in EU badge etc.)? Cheers
Sorry, this is out of my scope right now. Maybe in the future I will have a bit more free time to modify the snippet. Can’t promise, though. I hope you understand.
Never mind found it thanks!
🙂
Working like a charm, would love to see a video where we can sort out the products by discount percentage.
When a discount/sale price is applied to WooCommerce products, it is saved as the sale price in the database and not stored as a percentage value. For this reason, it is not possible to sort by percentage values, as these are not stored values in the database
@@wpsimplehacks i have seen this product sorting option on a website, and really wanted to have it on mine. I wonder how they achieve that.
I need to apply a custom badge to a specific product id. Is there a way to filter through every product id loop item and apply the badge on the loop item with the specific id?
You would have to use conditionals. See here www.businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/#php-do-something-if-product-id-xyz
Hi, cheers for your help! What im not getting tho is _where_ do you actually activate your badge to show at all? (btw im also using Blocksy) ... Any hints? Thank you!
I add the snippet to the Code Snippets (it is a plugin) code box. You have to use the correct hook for it, otherwise the badge will not show up. Also, Blocksy has two layouts for archive pages. In my video I use Type 1, because Type 2 uses Blocksy own hooks.
@@wpsimplehacks Cheers got it, was missing the checkbox "backend" and found it on the products page! Great Help Thank You!
Hi! Great code! I have used your code on my site and it works when I do the product edit, however when I do "quick edit" of the product the badge disappears it doesn't keep it in memory. Has this ever happened to you? Can you give me some indication?
Never happened to me.
I am using the blocksy theme and I am unable to control the location of the new product badge. I can only display it in the center top. I had to remove the top and right from the css or it would not display at all. Any ideas? Thanks!
It would be wise to ask about it from the Blocksy support. They are pretty responsive
Can we use this code with other archive widgets or does it only work with elementor's archive widget? thank you
Sorry, but I don’t use Elementor :)
Also, since Elementor overrides Woocommerce default hooks then most likely it’s not working with the Elementor. You can test it out and let me know though.
Hi, is there any way to do the same thing with custom stock status? I would like to display a badge if the product has a certain stock status (seen this on the video you published about stock statuses thnx)
I haven't tried with custom statuses and therefore unfortunately I can't help you with that.
@@wpsimplehacks and where could I find how to do it? Any idea? Sorry for the insistence 😅
"If anything else fails, read the manual" Murphy's law
Where's the manual? Here woocommerce.com/document/variable-product/
🙂
Hello. dear sir Thanks for your great efforts. i have pasted the code in codesnippets, but it didnt worked for me. can you please help, why?
I don’t know because there may be a lot of reasons. For example, maybe your theme doesn’t support Woocommerce hooks. Or maybe it overrides it? Also, Elementor overrides Woo hooks.
When I add text to the Custom Badge form and save but I don't want the text there later if I delete the text it doesn't update. So for example: I enter "New Design" for a product badge. Then I want to change that to have no badge in a couple of weeks I can't just delete "New Design" and the badge disappears. Once the field has been used it retains that input until it's replaced with something else. I want the badge to disappear when I delete the text in that field.
Hi,
Take a look at this modified code here and this should do the trick wpsimplehacks.com/custom-product-badges-for-woocommerce/#how-to-display-woocommerce-product-badge-with-custom-text
Hello :) How can I add custom badge to product archive page like discount badge?
Yes, just use archive page hooks.
Thanks for this great video. I changed the Sale badge to % and it worked great. However, when I use the WooCommerce Best Seller Block or the New Products Block it doesn't work.
It’s because Woocommerce blocks are overriding default Woo hooks
@@wpsimplehacks Is there a workaround?
Use Woocommerce shortcodes (see their docs) to output best selling products. These should display products in a built in way.
@@wpsimplehacks It worked with the shortcuts. Thanks!
If I want to use with JetWooBuilder isn't works. :(
And I didn't found jetwoo hooks
It would be wise to ask about it from JetWooBuilder team.
Is there code to add the custom badge to the archive image?
Try to add a hook from the archive page. For example, add_action( 'woocommerce_before_shop_loop_item_title', 'new_badge', 3 );
Possible For You To Updatee Css For Kadence...
What is there to update?
Hi I have an ecommerce site and I built the template with elementor and I tried to do the procedure you showed but it doesn't work, how can I do?
Elwmentor overrides default Woocommerce hooks. So, you need to find out what hooks Elementor uses and use these.
@@wpsimplehacks Thanks a lot
@@wpsimplehacks Whats the hame of plugin taht you use in the video? For show the hooks
There's something wrong with Blocksy update, the new badge have not the position correct. Could you check your code with new updates? TY
I just tested with the latest Blocksy and it’s workind well.
Single product page cln.sh/EhHFtT
Archive page cln.sh/n7mEVi
@@wpsimplehacks Pro versione of blocky Is different? Ive try in two different sites and doesnt works well
Could be the card type of archive products?
Which cart type you’re using? Because Type two has some additional and different hooks. Try with Type one card - it uses default Woocommerce hooks.
is there a snippet to show badge if product is in stock and hide when out of stock?
Not that I know of. Although, out of curiosity, why would need on because all products are in stoxk by default? If they are out of stock, then "Out of stock" badge is displayed.
@@wpsimplehacks Thank you for reply! For example i am selling bicycles, and would be nice to have a badge "fast shipping " to show which bikes can be delivered fast from our store, and which bikes are out of stock ( are not in our store), to make backorders but needs to wait 2-3 weeks from manufacturer.
@@wpsimplehacks i know i can make from your tutorial with custom field and make as a check option on every product that is in stock manually. But automatically would be less headache :)
Maybe this helps you out a bit: th-cam.com/video/DzIX7RSY0v4/w-d-xo.html
You have to find the right Woocommerce hook and mess a bit with CSS to display it as a badge on product image.
How would I make this work if I wanted to use images as badges?
You would need to modify CSS for it.
@@wpsimplehacks Do you mean use a background-image? Also, do you have a video on creating a product filter for the shop page? I've been trying to figure out a way to seperate my product categories under different headings in a filter sidebar.
Great work, error code on line 8 for code snippet to create woocommerce custome text badge.
showing "Cannot redeclare function woo_add_custom_fields."
I just tested it on my site and it works wi5hout any issues. Just pasted the inside Code Snippets box, activated it and no problems whatsoever.
I would try it again
👍👍👍👍
😊
🌟🌟
🙏
valuable tips, thanks for what you do. Have you ever made a content about delivery time estimates ? I have found a code but I am having difficulty making it suitable for my needs. I can't apply the rule [> = day]. I would need it to report: * // monday> get it for wednesday * // tuesday> get it for thursday * // Wednesday> get it for Friday * // Thursday / Friday / Saturday / Sunday> get it on Tuesday the message text would be: order now to receive it {day label} the snippet I prepared works. but skip Thursdays 😅😅😅. Save Me 🙏🙏🙏
See whether this video helps you out th-cam.com/video/Ni8VezPG-cg/w-d-xo.html
Take a look at the 5:24 mark.
am using flatsome theme. this is your css code .ct-woo-card-extra.new-badge{ Please what should my css code of my theme (am trying to create new label for my products)
Sorry, unfortunately I'm not familiar with the Flatsome theme.