How to Customize Woocommerce Category Page | 17+ Useful Hacks
ฝัง
- เผยแพร่เมื่อ 12 ก.ค. 2024
- In this video I’m going to show you a bunch of useful Woocommerce category page hacks you can use on every shop.
All the code snippets shown in the video are here: wpsimplehacks.com/woocommerce...
RELATED VIDEOS:
14 Useful Woocommerce Single Product page Hacks • How to Customize Wooco...
12 Useful Woocommerce Tricks & Hacks • 12 Useful Woocommerce ...
7 Useful Wordpress Hacks to Use on Every Site • 7 Useful Wordpress Hac...
DISCOUNT COUPON FOR BLOCKSY AND KADENCE:
Grab your discount by clicking on the links below
🅱️ Blocksy theme wpsimplehacks.com/blocksy (SAVE 10% Coupon WPSH10)
🔵 Kadence theme here: wpsimplehacks.com/kadence (SAVE 10% Coupon SIMPLEHACKS)
Best forms plugin - Fluent Forms: wpsimplehacks.com/fluentforms (SAVE 20% Coupon: WPSH20)
Best for email marketing - Fluent CRM: wpsimplehacks.com/fluentcrm (SAVE 20% Coupon: WPSH20)
✅ 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)
✅ MY FAVOURITE WEBHOSTING PROVIDERS:
Verpex Hosting wpsimplehacks.com/verpex
A2 hosting wpsimplehacks.com/a2-hosting
Cloudways wpsimplehacks.com/cloudways
✅ 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)
Best events calendar and ticket selling plugin - WP Eventin wpsimplehacks.com/wp-eventin (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
✅ AWESOME WOOOCOMMERCE EXTENSIONS:
Best Woocommerce Swiss Knife tool - Kadence WooExtras wpsimplehacks.com/wooextras (SAVE 10% Coupon SIMPLEHACKS)
Best Woocommerce sidecart plugin - Woocommerce Cart in One wpsimplehacks.com/cartinone
TIMECODES:
00:00 Overview
01:09 Install Code Snippets plugin
01:43 Hack #1: Add conditional product category page messages
03:36 Hack #2: Create a product category and attributes filter
06:29 Hack #3: Hide Uncategorized category
07:19 Hack #4: Remove product count from categories
07:49 Hack #5: Add sale percentages badge
08:45 Hack #6: Add NEW badge for the new products
11:12 Hack #7: Add category name above the product title
12:14 Hack #8: Show SKU below title and price
13:06 Hack #9: Show saved amount
14:14 Hack #10: Show custom text for every product / Add custom text field
15:10 Side note: How to find correct Woocommerce hooks?
17:01 Back to Hack #10
18:59 Hack #11: Show variable product attributes under the product title and price
20:43 Hack #12: Show stock and stock status
21:56 Hack #13: Change add to cart button text for backorder products
22:55 Hack #14: Disable all prices
23:26 Hack #15: Activate catalogue mode
24:08 Hack #16: Open category in external URL
25:52 Hack #17: Disable all loop product links
27:41 Bonus hack: add zoom effect to your catalog images - แนวปฏิบัติและการใช้ชีวิต
Which hack did you like the most? Are there any other good category page hacks you would like to share? Let me know in the comments.
everything.....
…absolutely brilliant, keep up the good work 👍🏾
Hi, how to copy all the codes from?
I would like to know how I can print primary category on product page using a shortcode.
And I wonder if there is a similar way to use a shortcode for the product and the available variations. Based on a design I need to somehow change the order of elements. Using the Flatsome theme. I do have CSS knowlegde but PHP :(
Thank you very much, this is the best ever video I watch since I on youtube for website bulding for 15 years, was waiting for this for a long time.
Great to hear! :)
Very useful videos from you, others are just explaining how to use plugin, but you are the only one person who use code
Thank you for watching 🙂
OMGGGGGGGGG! You deserve heaven! Now I can customize my shop. Thank you very much. Greetings from Argentina
Awesome :)
Absolutely stunning and amazing. worth of my time. you are a superstar dear. Loving it already.
Thanks 😊
Every video is a big effort thank you
Glad you think so!
Unbelievable 100 on 10 video that is. Keep us the good work
Will do
You are a life saver! thank you so much for this video!!
Happy to help!
Absolutely love these hacks👍
Thanks ☺️
Thank you!
You’re welcome 🙂
Well amazing! Learned a lot from this video! You got yourself a sub!
Awesome, thank you!
Really useful - thank you
Thanks ☺️
I learn alot from ur Hacks👍
Glad they help ☺️
Great content..we want more hacks keep em coming sir.
🙂
Great videos to improve knowledge
Glad you like them :)
keep it up sir you're the best
🙂
Thanks again
Always welcome
amazing content ! keep it up
Thanks 😏
You have my heart Sir
🙂
thank you so much
You're welcome!
Awesome Video with great hacks ! Keep up the great work!
Quick question:
On product page there is the option to select to display subcategories and products.
Is there a way to move subcategories before products (and before product view filter) and show them as small buttons or even customize display to small round thumnails pics ?
Sorry, can't help with that
You are the best.
Thanks :)
great job
Thanks 🙂
Great video.
Thanks ☺️
thank you for the great video. If i want to put the product filter beside the products instead of on top of it, how would i do that?
Just use a sidebar (widget area) your theme has without the need to create addional one.
What a stunning Hacks, you are the awesome 😊woo^guard👍 to non techies
😊 thanks
Hello, Thank you for tutorials.
Do you know the best way for managing category scheduling for restaurants, that we can manage in what days and times can customers make purchases or not ?
kind Regards
Look for a Delivery and pickup time plugin
You are amazing! How about the adding to Favourites? Maybe in your next tutorial..
Please clarify what do you mean by adding to favourites? Do you mean Wishlist?
@@wpsimplehacks Yes Wishlist. How to create that?
See this video here "Blocksy Theme Tutorial: How to Create Complex headers" th-cam.com/video/iR1-NDNCRDs/w-d-xo.html
Somewher in the middle of this I'll show how to add a Wishlist.
God bless you 💪💪💪
Thanks 😊
thanks you for the stunning tutorial . I had a question , in caregory and attribute filter i added it but sadly it only shown product categories but the color , size didn't work . Can i ask : is there's any problem could happens if that filter doesn't work?
Thank you very much!
You need to use "Filter products by attribute" widget
Awesome video. Great improvements :) With Hack #13, how do I also implement this on variable product pages, please? It currently does the change if all variations are "on backorder" but not when just one of the variations is in stock.
Unfortunately, it doesn’t work with variation in a way you describe it. It would need some custom coding but at the moment I have too much stuff on my plate to have time for this. I hope you understand :)
@@wpsimplehacks No worries and thank you for the reply.
thank you:)for vides ,how add this filter in home page
Use front page conditions in the snippet
Great tutorial.
Quick question:
In Hack#1, why does an additional message not show in my shop page even I activate the code
Most likely your theme is overriding default Woocommerce hooks. Another cause: if you’re using Elementor or any other page builder to creae archive pages then these also override default Woocommerce hooks.
Love it! for someone who does not know how to code this is a real gold mine. Thank you, mate :)
Is there a way/css code to change the greyish/white background to an image?
What background do you mean?
@@wpsimplehacks
I mean the greyish/white background behind the product images or for example on the checkout page behind the text fields/boxes. Is there a way to insert/put an inage as a background layer so the page looks more in style with a brand? I want to put an image with a nice pattern behind. Just wondering if that is even possible :)
Sitll it’s a bit unclear what is it you want to accomplish :) Do you have a URL I can take a closer look?
@@wpsimplehacks Sorry I dont really know how to explain, let me try again. You see the shop page and the text fields, fonts, product pictures. All this is on top of a white layer/background. Is there a way to change the white layer?
Yes, but CSS you need to use depends on your theme settings and whether it overwrites Woocommerce default settings.
Great tutorial, as usual.
Quick question:
For the Hack #11: Show variable product attributes under the product title and price.
I use the free version of Blocksy and the type 2 for product cards. For some reason the hooks don't work for me. The attributes are displayed under the price/add to card, no matter what hook I use in the function.
If I want to display the attributes right after the title of the product, what is the hook i need to use? The hooks you helped us identify don't work with the snippet.
Many thanks for your work on this channel!
Blocksy Type 2 overrides Woocommerde default hooks and therefore try blocksy:woocommerce:product-card:title:after hook
@@wpsimplehacks Works like a charm. Thanks a lot!!!!
is there any snippet to show product Unit/weight under the product in loop page like you did with the SKU?
Google is your friend, my friend :🙂
This is what comes up first with your question developer.woocommerce.com/2017/05/10/display-product-weight-archive-pages/
Hi there, just a thought.. how about if you could make videos to teach us about wordpress php coding by customizing custom woo pages? :)
Nope, not my niche :) There are already plenty of videos about these topics
Great tutorial. I'm looking for a way to have the product categories filter but to show only children of the current category. When I select in the widget "Only show children of the current category" it still shows in the dropdown all categories. Any advice how to do this?
Sorry, can’t help with that. Although, take a look whether Woof allows it wordpress.org/plugins/woocommerce-products-filter/
@@wpsimplehacks Thanks for the tip on Woof!
Thank you so much. When i add the drop down menu an arrow button shows next to the menu, it has to be clicked before the selected category is loading. How to make sure it will automatically load the category at selection?
Sorry, I did not understand the question. Please clarify :)
@@wpsimplehacks thank you so much! When i use the script/code i don't get a normal drop down menu where you select an option and it will automatically load the site at selection, i have to select an option first and then click an arrow button next to the drop down menu before a site is loading :--\
Which snippet is the one you’re talking about? Nevertheless, there is probably some kind of compatibility issue either with the theme or some plugin.
@@wpsimplehacks the one where you first create widget and then add product categories. You will get a nice drop down menu in the front end. I am using storefront, maybe it is the theme. Thank you for your time and great work!
What happens with all these hacks when theme or plugins update? Would they break? Of because you use the woocommerce hooks they will be allright?
If you’re using a child theme or Code Snippets plugin then nothing happens. Don’t add these hacks directly to your theme. Also, it work only if your theme doesn’t override Woocommerce hooks.
Do you have a code to display the category description at the bottom of the page on the Blocksy theme (which is great)?
No. But you may ask this direcltu from the Blocksy support and maybe they can help.
@@wpsimplehacks Ok, unfortunately I already asked them and they can't help me.
This feature will have to be integrated directly in the theme (class description or footer)
Thanks for the answer 1 thumb + 1 subscriber 😁
adding text in category page ....is this valid for SEO? Will google determine it?
If it’s a text, then Google indexes it. But, mostl likely these small text snippets won’t affect your SEO score here or there.
Thank you so much for your sharing these helpful hacks with us. Could you please share how to customize woocommerce message bar to look like yours? I added a custom message but it didn’t look like yours, It didn’t have a bar. Thank you
It probably depends on your theme settings. Just add a class (woocommerce-message for example) and add your own CSS.
@@wpsimplehacks okay thank you. I have no clue about these thing, I’ve just been following what you show. Would have love the bell icon too. I use flatsome
Unfortunately, I’m not familiar with the Flatsome theme. It would be wise to ask from the theme support about these customizations.
@@wpsimplehacks sure. Thank you
Does this also apply to variable products with default product chosen 12:38
I’m not sure. :) Most likely not but you can test it and let me know.
Thank you so much for this videos
Please the hack number 3 didn't wanna work with me
Workaround:
Go to Products → Categories
Choose the category that you want to make it the default one
Click Make default
Locate Uncategorized
Click Delete
@@wpsimplehacks thank you so muuuuch
For Hack #6 - NEW badge
When using Blocky free theme with type 2 cards, the snippet doesn't work.
Is there anything that needs to be changed in the code? I used the blocksy:woocommerce:product-card:title:before hook, but nothing appears.
Thanks a lot for your tutorials!
Blocksy Type 2 overrides Woo default hooks and this is the reason it is not working. It would be wise to send their support team your hook and ask whether they can help you with it.
Can I use these hacks on astra theme ?
Yes
Is it possible to use Hack#10 more than once? I want to show 3 Unique Selling Points below my Products, so i need two more lines like that. Unfortunately, I cannot use the snippet twice. Apparently there is an error in line 7/8... Thanks in advance!
Do you need three text fields instead of one? Use the thefirst text field code (lines 5-13 in the video) and re-use them below the forst field. Rename the ID etc accordingly and use correct field ID-s in the output area.
@@wpsimplehacks Thank you very much for your answer! I will try it
@@wpsimplehacks So I modified the Code as you advised and it works now! I have 3 Unique selling point fields in the backend. Unfortunately another problem emerged. I cannot save the changes I make to these fields. Do you have any clue why that is? I don't think it is my theme since the custom text in original form was working perfectly.... Help is much appreciated my friend!
My site crashed after snippet insertion & I am trying to figure out what's going on. I am using
Astra theme. Where can I find documentation for the methods you used?
Do you use Code Snippets plugin? Here’s the tutorial on how to deactivate it wordpress.org/support/topic/help-i-just-activated-a-snippet-and-my-site-broke/
@@wpsimplehacks I managed to get the site back because I never left the dashboard. I wanted to know what was causing it?
Hey, can i hide specific category from any page or mentioned page??
i tried by modifying code but not worked,
Request to help me.
Thank you
What is it you're trying to achieve?
@@wpsimplehacks I want to hide specific category from specific page or entire site.
Ex. Want to hide accessories category on entire site
How can I move the Add to cart button to show under the product image in archive category view (The reason is some products have more bulet points so the add to cart button does not line up neatly when view categories/shop page in grid view?
See whether this helps you out:
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart' );
add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 1 );
@@wpsimplehacks Hiya, thanks for that, you are awesome :) - , but I am using that for showing the Short description with bullet points, I wanted to have the order as Product Photo then All underneath in this order Add to cart, then product title, then bullet point Short description
It is hard for me to help you since I don’t know what theme you’re using and what hooks it uses. So, take a look at this visual hooks guide and use the ones your theme is using. www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/
If yhis doesn’t work out for you then it would be wise to ask support from your theme developer.
Also, forgot to mention my bad, I am using a plugin (WooCommerce Catalog Mode) so that people can enquire about products not buy them, so the plugin replaces the add to cart button with an enquire now button ....Its coming coming from the enquiry plugin so am stumped how to get the order sorted ass the Add to cart is a woocommerce hook ?
@@wpsimplehacks Its a theme built using the hello elementor theme
i want to show specific one category name after product title..how can i do this?
It needs some custom coding but unroftunately I am unable to provide you this.
@@wpsimplehacks from where i can get it?
You need to hire a coder who can do this for you.
At Create a product category and attributes filter , only product category appear and another attributes filter does not appear
Do you have attributes assigned to the products? Filter works only if there are products with these attributes.
Hello, every time when i try to add a Custom message on woocommerce shop page and all category pages its shows me this message: Snippet automatically deactivated due to an error on line 4:
Cannot redeclare function shop_message.
Most likely you are using two snippets with the same function name. Try to rename function names for each snippets.
How to add share button on product page so user can click on share button than it will automatically capture product details like product name, price, photo and description and can be shared on whatsapp, Facebook etc. Thanks in advance
I haven't see a sharing plugin that captures all this data for the sharing. Usually they embed a imaga, title and link.
When I use filter product by category, in appearance -> widgets ->
when I add product categories to the product filter widgets , I get product catogery as list type only , there is no option to select drop down menu
Is it because iam using astra theme ?
Filter by attributes works very well
How can I add filter by price range also?
"Filter by price" range slide widget comes with Woocommerce. Also, Woocommerce category filter has an option to "Show as dropdown". See the screenshot nimb.ws/TqC9cY
@@wpsimplehacks thank you for your reply
Default sort by price works with regular price only
Sale price is not sorting
My question is how does snippets effects the website speed?
It shouldn't affect it at all
Thank you for this great video, but when I tried your bonus hack to enlarge images it does not work using one of the free WooCommerce Astra starter templates. I checked the CSS coding I used and it validated. Any suggestions?
Whic Astra starter site? Can you give me a URL?
@@wpsimplehacks Thank you very much for your fast response, but I decided to remove that CSS from the website because I am not using a pro Astra theme and I don't have hooks.
How can I remove the bell icon
Depends on your theme but probably with some CSS
When I open “boys”category from the shop page , it shows all boys products along with the subcategories. Actually I need only subcategories inside “boys “ category
How can I hide all products showing in a category page
You can set it up in category settings whether you'll display products or not. See Products >> Categories >> Open your category >> Display type
@@wpsimplehacks got it
Thanks alot
In hack number 4 ,hide category product count in product archives,
add_filter( 'woocommerce_subcategory_count_html', '__return_false' );
This is the code in your website
But you are using another code and both are not working for me why so ?
I just tested add_filter( 'woocommerce_subcategory_count_html', '__return_false' ); on my site and it works as promised
:)how to remove product automatically after certain time
Sorry, can't help with that
How to create archive page only for child categories
Child categories already have archive pages by default
@@wpsimplehacks i want to make customised dynamic sub category page and i don't found option in elementor for that can u please help me out
Sorry, I don't use Elementor and can't help you with that. It would be wise to ask this question directly to the Elementor support team.
@@wpsimplehacks oh thanks a lot is their any way i can do this with code as snippets?
haha,,,,,First
Congrats