How to Customize Woocommerce Category Page

No video

How to Customize Woocommerce Category Page | 17+ Useful Hacks

Рет қаралды 20,276

WP Simple Hacks - Wordpress tips and tricks

Күн бұрын

Пікірлер: 166

@wpsimplehacks 3 жыл бұрын

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.

@kashfulbangladesh 3 жыл бұрын

everything.....

@CheckTesting1 2 жыл бұрын

…absolutely brilliant, keep up the good work 👍🏾

@mazenquddusi8479 2 жыл бұрын

Hi, how to copy all the codes from?

@bobruis4073 2 жыл бұрын

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 :(

@gagyemang3660 3 ай бұрын

You are a life saver! thank you so much for this video!!

@wpsimplehacks 3 ай бұрын

Happy to help!

@JuampiSoraireDI 3 ай бұрын

OMGGGGGGGGG! You deserve heaven! Now I can customize my shop. Thank you very much. Greetings from Argentina

@wpsimplehacks 3 ай бұрын

Awesome :)

@NigerianBlue Жыл бұрын

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?

@wpsimplehacks Жыл бұрын

Just use a sidebar (widget area) your theme has without the need to create addional one.

@frederickterblanch1631 2 жыл бұрын

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.

@wpsimplehacks 2 жыл бұрын

Great to hear! :)

@TamilThagaval Жыл бұрын

Very useful videos from you, others are just explaining how to use plugin, but you are the only one person who use code

@wpsimplehacks Жыл бұрын

Thank you for watching 🙂

@karenmices 6 ай бұрын

Thank you!

@wpsimplehacks 5 ай бұрын

You’re welcome 🙂

@liaqatnasim708 Жыл бұрын

I learn alot from ur Hacks👍

@wpsimplehacks Жыл бұрын

Glad they help ☺️

@hosseinkhanmohammadi4770 Жыл бұрын

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

@wpsimplehacks Жыл бұрын

Look for a Delivery and pickup time plugin

@user-jt9rc6ev2y Жыл бұрын

Great videos to improve knowledge

@wpsimplehacks Жыл бұрын

Glad you like them :)

@mohamedkhalid763 3 жыл бұрын

thank you:)for vides ,how add this filter in home page

@wpsimplehacks 3 жыл бұрын

Use front page conditions in the snippet

@notuzzi 2 жыл бұрын

keep it up sir you're the best

@wpsimplehacks 2 жыл бұрын

🙂

@jianzhangchen1063 Жыл бұрын

Great tutorial. Quick question: In Hack#1, why does an additional message not show in my shop page even I activate the code

@wpsimplehacks Жыл бұрын

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.

@asfandyar_ali 3 жыл бұрын

Absolutely stunning and amazing. worth of my time. you are a superstar dear. Loving it already.

@wpsimplehacks 3 жыл бұрын

Thanks 😊

@fabrictexture4767 Жыл бұрын

You have my heart Sir

@wpsimplehacks Жыл бұрын

🙂

@webdevelopment801 2 жыл бұрын

Unbelievable 100 on 10 video that is. Keep us the good work

@wpsimplehacks 2 жыл бұрын

Will do

@davutyankar 3 жыл бұрын

Every video is a big effort thank you

@wpsimplehacks 3 жыл бұрын

Glad you think so!

@swordali 2 жыл бұрын

Thanks again

@wpsimplehacks 2 жыл бұрын

Always welcome

@antonisfio Жыл бұрын

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 ?

@wpsimplehacks Жыл бұрын

Sorry, can't help with that

@Whyayk Жыл бұрын

is there any snippet to show product Unit/weight under the product in loop page like you did with the SKU?

@wpsimplehacks Жыл бұрын

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/

@bobruis4073 2 жыл бұрын

Well amazing! Learned a lot from this video! You got yourself a sub!

@wpsimplehacks 2 жыл бұрын

Awesome, thank you!

@allanknudsen2616 3 жыл бұрын

Absolutely love these hacks👍

@wpsimplehacks 3 жыл бұрын

Thanks ☺️

@mikeschneider1624 2 жыл бұрын

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?

@wpsimplehacks 2 жыл бұрын

Sorry, I did not understand the question. Please clarify :)

@mikeschneider1624 2 жыл бұрын

@@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 :--\

@wpsimplehacks 2 жыл бұрын

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.

@mikeschneider1624 2 жыл бұрын

@@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!

@ysfbl2777 2 жыл бұрын

great job

@wpsimplehacks 2 жыл бұрын

Thanks 🙂

@AmandaLucaseu 3 жыл бұрын

Really useful - thank you

@wpsimplehacks 3 жыл бұрын

Thanks ☺️

@MisterX-77 2 жыл бұрын

Great content..we want more hacks keep em coming sir.

@wpsimplehacks 2 жыл бұрын

🙂

@xalarisnikos4794 2 жыл бұрын

You are the best.

@wpsimplehacks 2 жыл бұрын

Thanks :)

@jennyonyinye1955 2 жыл бұрын

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

@wpsimplehacks 2 жыл бұрын

It probably depends on your theme settings. Just add a class (woocommerce-message for example) and add your own CSS.

@jennyonyinye1955 2 жыл бұрын

@@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

@wpsimplehacks 2 жыл бұрын

Unfortunately, I’m not familiar with the Flatsome theme. It would be wise to ask from the theme support about these customizations.

@jennyonyinye1955 2 жыл бұрын

@@wpsimplehacks sure. Thank you

@farazahmad4269 Жыл бұрын

adding text in category page ....is this valid for SEO? Will google determine it?

@wpsimplehacks Жыл бұрын

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.

@sophiemulders 2 жыл бұрын

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?

@wpsimplehacks 2 жыл бұрын

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.

@Properture 3 жыл бұрын

You are amazing! How about the adding to Favourites? Maybe in your next tutorial..

@wpsimplehacks 3 жыл бұрын

Please clarify what do you mean by adding to favourites? Do you mean Wishlist?

@Properture 3 жыл бұрын

@@wpsimplehacks Yes Wishlist. How to create that?

@wpsimplehacks 3 жыл бұрын

See this video here "Blocksy Theme Tutorial: How to Create Complex headers" kzfaq.info/get/bejne/n7hhYLF1s6m2dKc.html Somewher in the middle of this I'll show how to add a Wishlist.

@girishyanamala9361 3 жыл бұрын

What a stunning Hacks, you are the awesome 😊woo^guard👍 to non techies

@wpsimplehacks 3 жыл бұрын

😊 thanks

@ionutsabo 3 жыл бұрын

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!

@wpsimplehacks 3 жыл бұрын

Blocksy Type 2 overrides Woocommerde default hooks and therefore try blocksy:woocommerce:product-card:title:after hook

@ionutsabo 3 жыл бұрын

@@wpsimplehacks Works like a charm. Thanks a lot!!!!

@Luigi-wp6rf 2 жыл бұрын

God bless you 💪💪💪

@wpsimplehacks 2 жыл бұрын

Thanks 😊

@HieuLe-we5ns 2 жыл бұрын

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!

@wpsimplehacks 2 жыл бұрын

You need to use "Filter products by attribute" widget

@UDiAudio Жыл бұрын

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?

@wpsimplehacks Жыл бұрын

Sorry, can’t help with that. Although, take a look whether Woof allows it wordpress.org/plugins/woocommerce-products-filter/

@UDiAudio Жыл бұрын

@@wpsimplehacks Thanks for the tip on Woof!

@stefanpfadt4353 2 жыл бұрын

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?

@wpsimplehacks 2 жыл бұрын

What background do you mean?

@stefanpfadt4353 2 жыл бұрын

@@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 :)

@wpsimplehacks 2 жыл бұрын

Sitll it’s a bit unclear what is it you want to accomplish :) Do you have a URL I can take a closer look?

@stefanpfadt4353 2 жыл бұрын

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

@wpsimplehacks 2 жыл бұрын

Yes, but CSS you need to use depends on your theme settings and whether it overwrites Woocommerce default settings.

@kashfulbangladesh 3 жыл бұрын

thank you so much

@wpsimplehacks 3 жыл бұрын

You're welcome!

@asfandyar_ali 3 жыл бұрын

Hi there, just a thought.. how about if you could make videos to teach us about wordpress php coding by customizing custom woo pages? :)

@wpsimplehacks 3 жыл бұрын

Nope, not my niche :) There are already plenty of videos about these topics

@kantouzakaria 2 жыл бұрын

Thank you so much for this videos Please the hack number 3 didn't wanna work with me

@wpsimplehacks 2 жыл бұрын

Workaround: Go to Products → Categories Choose the category that you want to make it the default one Click Make default Locate Uncategorized Click Delete

@kantouzakaria 2 жыл бұрын

@@wpsimplehacks thank you so muuuuch

@donchodonchev1100 3 ай бұрын

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.

@wpsimplehacks 3 ай бұрын

Most likely you are using two snippets with the same function name. Try to rename function names for each snippets.

@TapTapUrDone 2 жыл бұрын

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.

@wpsimplehacks 2 жыл бұрын

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 :)

@TapTapUrDone 2 жыл бұрын

@@wpsimplehacks No worries and thank you for the reply.

@user-wf7nc3ho5t 3 жыл бұрын

At Create a product category and attributes filter , only product category appear and another attributes filter does not appear

@wpsimplehacks 3 жыл бұрын

Do you have attributes assigned to the products? Filter works only if there are products with these attributes.

@martinuteng1403 Жыл бұрын

Does this also apply to variable products with default product chosen 12:38

@wpsimplehacks Жыл бұрын

I’m not sure. :) Most likely not but you can test it and let me know.

@farhamusthafa2319 2 жыл бұрын

Can I use these hacks on astra theme ?

@wpsimplehacks 2 жыл бұрын

Yes

@rajsamarasuriya7992 Жыл бұрын

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?

@wpsimplehacks Жыл бұрын

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/

@rajsamarasuriya7992 Жыл бұрын

@@wpsimplehacks I managed to get the site back because I never left the dashboard. I wanted to know what was causing it?

@buzzer231 3 жыл бұрын

amazing content ! keep it up

@wpsimplehacks 3 жыл бұрын

Thanks 😏

@dsuinfotech Жыл бұрын

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

@wpsimplehacks Жыл бұрын

What is it you're trying to achieve?

@dsuinfotech Жыл бұрын

@@wpsimplehacks I want to hide specific category from specific page or entire site. Ex. Want to hide accessories category on entire site

@MisterX-77 2 жыл бұрын

My question is how does snippets effects the website speed?

@wpsimplehacks 2 жыл бұрын

It shouldn't affect it at all

@mycollection192 3 жыл бұрын

i want to show specific one category name after product title..how can i do this?

@wpsimplehacks 3 жыл бұрын

It needs some custom coding but unroftunately I am unable to provide you this.

@mycollection192 3 жыл бұрын

@@wpsimplehacks from where i can get it?

@wpsimplehacks 3 жыл бұрын

You need to hire a coder who can do this for you.

@jonasoberhack2978 2 жыл бұрын

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!

@wpsimplehacks 2 жыл бұрын

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.

@jonasoberhack2978 2 жыл бұрын

@@wpsimplehacks Thank you very much for your answer! I will try it

@jonasoberhack2978 2 жыл бұрын

@@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!

@alane16 3 жыл бұрын

Great video.

@wpsimplehacks 3 жыл бұрын

Thanks ☺️

@farhamusthafa2319 2 жыл бұрын

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?

@wpsimplehacks 2 жыл бұрын

"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

@farhamusthafa2319 2 жыл бұрын

@@wpsimplehacks thank you for your reply Default sort by price works with regular price only Sale price is not sorting

@4ido561 3 жыл бұрын

Do you have a code to display the category description at the bottom of the page on the Blocksy theme (which is great)?

@wpsimplehacks 3 жыл бұрын

No. But you may ask this direcltu from the Blocksy support and maybe they can help.

@4ido561 3 жыл бұрын

@@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 😁

@ionutsabo 3 жыл бұрын

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!

@wpsimplehacks 3 жыл бұрын

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.

@dsuinfotech 3 жыл бұрын

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

@wpsimplehacks 3 жыл бұрын

I haven't see a sharing plugin that captures all this data for the sharing. Usually they embed a imaga, title and link.

@himanshuharplani3113 2 жыл бұрын

How can I remove the bell icon

@wpsimplehacks 2 жыл бұрын

Depends on your theme but probably with some CSS

@farhamusthafa2319 2 жыл бұрын

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 ?

@wpsimplehacks 2 жыл бұрын

I just tested add_filter( 'woocommerce_subcategory_count_html', '__return_false' ); on my site and it works as promised

@dingadanga8653 3 жыл бұрын

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?

@wpsimplehacks 3 жыл бұрын

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 );

@dingadanga8653 3 жыл бұрын

@@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

@wpsimplehacks 3 жыл бұрын

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.

@dingadanga8653 3 жыл бұрын

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 ?

@dingadanga8653 3 жыл бұрын

@@wpsimplehacks Its a theme built using the hello elementor theme

@farhamusthafa2319 2 жыл бұрын

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

@wpsimplehacks 2 жыл бұрын

You can set it up in category settings whether you'll display products or not. See Products >> Categories >> Open your category >> Display type

@farhamusthafa2319 2 жыл бұрын

@@wpsimplehacks got it Thanks alot

@user-wf7nc3ho5t 3 жыл бұрын

:)how to remove product automatically after certain time

@wpsimplehacks 3 жыл бұрын

Sorry, can't help with that

@jimjuris 2 жыл бұрын

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?

@wpsimplehacks 2 жыл бұрын

Whic Astra starter site? Can you give me a URL?

@jimjuris 2 жыл бұрын

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