How to Customize Woocommerce Category Page | 17+ Useful Hacks

Поделиться
HTML-код
  • Опубликовано: 14 дек 2024

Комментарии • 168

  • @wpsimplehacks
    @wpsimplehacks  3 года назад +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
      @kashfulbangladesh 3 года назад +1

      everything.....

    • @CheckTesting1
      @CheckTesting1 3 года назад

      …absolutely brilliant, keep up the good work 👍🏾

    • @mazenquddusi8479
      @mazenquddusi8479 2 года назад

      Hi, how to copy all the codes from?

    • @bobruis4073
      @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 :(

  • @JuampiSoraireDI
    @JuampiSoraireDI 7 месяцев назад

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

  • @TamilThagaval
    @TamilThagaval 2 года назад

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

  • @NigerianBlue
    @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
      @wpsimplehacks  Год назад

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

  • @gagyemang3660
    @gagyemang3660 6 месяцев назад

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

  • @A.H315
    @A.H315 3 месяца назад

    Thanks for the great video. Is there any possibility to have different hero sections for different category pages?

    • @wpsimplehacks
      @wpsimplehacks  2 месяца назад

      If you’re using php functions, then use conditional logic www.businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/

  • @mikeschneider1624
    @mikeschneider1624 3 года назад +1

    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
      @wpsimplehacks  3 года назад

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

    • @mikeschneider1624
      @mikeschneider1624 3 года назад +1

      @@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
      @wpsimplehacks  3 года назад

      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
      @mikeschneider1624 3 года назад

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

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

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

  • @hosseinkhanmohammadi4770
    @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
      @wpsimplehacks  Год назад +1

      Look for a Delivery and pickup time plugin

  • @UDiAudio
    @UDiAudio 2 года назад

    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
      @wpsimplehacks  2 года назад +1

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

    • @UDiAudio
      @UDiAudio 2 года назад

      @@wpsimplehacks Thanks for the tip on Woof!

  • @Whyayk
    @Whyayk 2 года назад

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

    • @wpsimplehacks
      @wpsimplehacks  2 года назад

      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/

  • @mohamedkhalid763
    @mohamedkhalid763 3 года назад

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

    • @wpsimplehacks
      @wpsimplehacks  3 года назад

      Use front page conditions in the snippet

  • @asfandyar_ali
    @asfandyar_ali 3 года назад

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

  • @davutyankar
    @davutyankar 3 года назад

    Every video is a big effort thank you

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

  • @martinuteng
    @martinuteng Год назад

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

    • @wpsimplehacks
      @wpsimplehacks  Год назад

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

  • @HieuLe-we5ns
    @HieuLe-we5ns 3 года назад

    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
      @wpsimplehacks  3 года назад

      You need to use "Filter products by attribute" widget

  • @farazahmad4269
    @farazahmad4269 2 года назад

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

    • @wpsimplehacks
      @wpsimplehacks  2 года назад

      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.

  • @AmandaLucaseu
    @AmandaLucaseu 3 года назад

    Really useful - thank you

  • @webdevelopment801
    @webdevelopment801 2 года назад

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

  • @dsuinfotech
    @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
      @wpsimplehacks  Год назад

      What is it you're trying to achieve?

    • @dsuinfotech
      @dsuinfotech Год назад

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

  • @liaqatnasim708
    @liaqatnasim708 Год назад

    I learn alot from ur Hacks👍

  • @karenmices
    @karenmices 9 месяцев назад

    Thank you!

  • @sophiemulders
    @sophiemulders 3 года назад

    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
      @wpsimplehacks  3 года назад

      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.

  • @PinkCulture-l7z
    @PinkCulture-l7z Год назад

    Great videos to improve knowledge

  • @MisterX-77
    @MisterX-77 2 года назад

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

  • @notuzzi
    @notuzzi 2 года назад

    keep it up sir you're the best

  • @allanknudsen2616
    @allanknudsen2616 3 года назад

    Absolutely love these hacks👍

  • @donchodonchev1100
    @donchodonchev1100 7 месяцев назад

    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
      @wpsimplehacks  7 месяцев назад

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

  • @bobruis4073
    @bobruis4073 2 года назад

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

  • @ionutsabo
    @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
      @wpsimplehacks  3 года назад +1

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

    • @ionutsabo
      @ionutsabo 3 года назад

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

  • @محمدخالد-خ3ض9ل
    @محمدخالد-خ3ض9ل 3 года назад

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

    • @wpsimplehacks
      @wpsimplehacks  3 года назад

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

  • @4ido561
    @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
      @wpsimplehacks  3 года назад

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

    • @4ido561
      @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 😁

  • @fabrictexture4767
    @fabrictexture4767 2 года назад

    You have my heart Sir

  • @rajsamarasuriya7992
    @rajsamarasuriya7992 2 года назад

    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
      @wpsimplehacks  2 года назад

      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
      @rajsamarasuriya7992 2 года назад

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

  • @mycollection192
    @mycollection192 3 года назад

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

    • @wpsimplehacks
      @wpsimplehacks  3 года назад

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

    • @mycollection192
      @mycollection192 3 года назад

      @@wpsimplehacks from where i can get it?

    • @wpsimplehacks
      @wpsimplehacks  3 года назад

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

  • @stefanpfadt4353
    @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
      @wpsimplehacks  2 года назад

      What background do you mean?

    • @stefanpfadt4353
      @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
      @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
      @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
      @wpsimplehacks  2 года назад +1

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

  • @jonasoberhack2978
    @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
      @wpsimplehacks  2 года назад +1

      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
      @jonasoberhack2978 2 года назад

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

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

  • @jennyonyinye1955
    @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
      @wpsimplehacks  2 года назад +1

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

    • @jennyonyinye1955
      @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
      @wpsimplehacks  2 года назад +1

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

    • @jennyonyinye1955
      @jennyonyinye1955 2 года назад

      @@wpsimplehacks sure. Thank you

  • @farhamusthafa2319
    @farhamusthafa2319 2 года назад

    Can I use these hacks on astra theme ?

  • @Properture
    @Properture 3 года назад

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

    • @wpsimplehacks
      @wpsimplehacks  3 года назад

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

    • @Properture
      @Properture 3 года назад

      @@wpsimplehacks Yes Wishlist. How to create that?

    • @wpsimplehacks
      @wpsimplehacks  3 года назад

      See this video here "Blocksy Theme Tutorial: How to Create Complex headers" ruclips.net/video/iR1-NDNCRDs/видео.html
      Somewher in the middle of this I'll show how to add a Wishlist.

  • @dingadanga8653
    @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
      @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
      @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
      @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
      @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
      @dingadanga8653 3 года назад

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

  • @TapTapUrDone
    @TapTapUrDone 3 года назад

    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
      @wpsimplehacks  3 года назад

      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
      @TapTapUrDone 3 года назад

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

  • @swordali
    @swordali 2 года назад

    Thanks again

  • @buzzer231
    @buzzer231 3 года назад

    amazing content ! keep it up

  • @asfandyar_ali
    @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
      @wpsimplehacks  3 года назад

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

  • @kashfulbangladesh
    @kashfulbangladesh 3 года назад

    thank you so much

  • @xalarisnikos4794
    @xalarisnikos4794 2 года назад

    You are the best.

  • @ysfbl2777
    @ysfbl2777 2 года назад

    great job

  • @alane16
    @alane16 3 года назад

    Great video.

  • @ionutsabo
    @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
      @wpsimplehacks  3 года назад +1

      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.

  • @Luigi-wp6rf
    @Luigi-wp6rf 3 года назад

    God bless you 💪💪💪

  • @himanshuharplani3113
    @himanshuharplani3113 2 года назад

    How can I remove the bell icon

    • @wpsimplehacks
      @wpsimplehacks  2 года назад

      Depends on your theme but probably with some CSS

  • @dsuinfotech
    @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
      @wpsimplehacks  3 года назад +1

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

  • @kantouzakaria
    @kantouzakaria 2 года назад

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

    • @wpsimplehacks
      @wpsimplehacks  2 года назад +1

      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
      @kantouzakaria 2 года назад

      @@wpsimplehacks thank you so muuuuch

  • @farhamusthafa2319
    @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
      @wpsimplehacks  2 года назад +1

      "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
      @farhamusthafa2319 2 года назад

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

  • @abhishekgarg1030
    @abhishekgarg1030 Год назад

    How to create archive page only for child categories

    • @wpsimplehacks
      @wpsimplehacks  Год назад

      Child categories already have archive pages by default

    • @abhishekgarg1030
      @abhishekgarg1030 Год назад

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

    • @wpsimplehacks
      @wpsimplehacks  Год назад

      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.

    • @abhishekgarg1030
      @abhishekgarg1030 Год назад

      @@wpsimplehacks oh thanks a lot is their any way i can do this with code as snippets?

  • @farhamusthafa2319
    @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
      @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
      @farhamusthafa2319 2 года назад

      @@wpsimplehacks got it
      Thanks alot

  • @girishyanamala9361
    @girishyanamala9361 3 года назад

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

  • @MisterX-77
    @MisterX-77 2 года назад

    My question is how does snippets effects the website speed?

  • @farhamusthafa2319
    @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
      @wpsimplehacks  2 года назад +1

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

  • @jimjuris
    @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
      @wpsimplehacks  2 года назад

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

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

  • @محمدخالد-خ3ض9ل
    @محمدخالد-خ3ض9ل 3 года назад

    :)how to remove product automatically after certain time

  • @lihuaizhi
    @lihuaizhi 3 года назад

    haha,,,,,First