I’ve created a visual HTML hook guide for the WooCommerce Archive Page (which is the same page for the Shop, Category, Tag pages). This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can also copy/paste). If you like this guide and it is helpful to you, let me know in the comments!
Thanks to this WooCommerce Archive Visual Hooks Guide, you can now go to your template’s functions.php file and use “add_action(‘place-hook-here’,’your-PHP-function-here’);” – you can then place your custom functions exactly where you like them to be. Enjoy!
WooCommerce Archive Page [Visual Hook Guide]
Shop
woocommerce_archive_description
woocommerce_before_shop_loop
Showing all 4 results
- woocommerce_before_shop_loop_item
woocommerce_before_shop_loop_item_title
woocommerce_shop_loop_item_title
Product Title
woocommerce_after_shop_loop_item_title
โฌ5,00
woocommerce_after_shop_loop_item
- woocommerce_before_shop_loop_itemwoocommerce_before_shop_loop_item_titlewoocommerce_shop_loop_item_title
Test 6
woocommerce_after_shop_loop_item_title
โฌ5,00
woocommerce_after_shop_loop_item
woocommerce_after_shop_loop
woocommerce_after_main_content
WooCommerce Archive Page Default add_actions
// These are actions you can unhook/remove!
add_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
add_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
add_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_output_all_notices', 10 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );
add_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
Hi, I want to put my content between “Showing all 4 results” and loop items. Is it possible or not? Thank you
Yes, you can use ‘woocommerce_before_shop_loop’ with priority 31
Hi Rodolfo,
I want to add my template [elementor-template id=”12310″] after woocommerce_after_main_content
Can you please help?
Hi Husain, you can echo shortcodes via PHP with https://developer.wordpress.org/reference/functions/do_shortcode/
Hi Rodolfo,
I want to replace the product title on the category archive page with an ACF field.
I use the Shoptimizer theme, so I’ve looked at their ACF guide. It explains how to add an ACF field but not how to exchange a field.
Would you know any tutorial on exchanging fields?
I’d love to use code snippets plugin if possible as this would be the only customisation to the parent theme. A child theme seems overkill for this one change.
Kind regards,
Edward
Hello Edward! Try with https://www.businessbloomer.com/woocommerce-custom-product-category-title/
Hi Rodolfo, Thanks so much doer this series it’s invaluable!
I have an issue with moving the category description. I am using the following hooks and I now have two descriptions ๐
Are you able to tell me please why the remove_action would not be working?
Hi Steve, thanks for your comment! It could be that your theme is overwriting that action already, so you need to remove the *new* theme action – or that you’re trying to remove too late (for example by using Code Snippets instead of a child theme) and therefore it doesn’t work. More at https://www.businessbloomer.com/lesson/cuwm5l01/
Hello, I’m using jetwoobuilder and I added this code to code snippets:
But it’s not working, this hook ‘woocommerce_after_shop_loop_item_title’ doesn’t work.
Could you help me please?
That’s probably because of JetWooBuilder – please read their docs to see if it’s possible to add custom content
Hello! I am using some of the item hooks for some html and css additions to the products on my sites but realized that this does not work for the storefront product block products. Do you know if there are hooks for these? Thanks very much these guides are great!
Blocks are – currently – not flexible at all from a developer point of view. Unfortunately most of these hooks won’t work.
Hi,
on pages with pagination – how to run a hook (I use field from ACF) only on the first page of the archive?
Regards
Hello Piotr, 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!
One question, I am trying to add an Advanced Custom Field with this hook ‘woocommerce_shop_loop_item_title ‘ so that it can be seen in the card and every time I add it it modifies the entire home page, it changes the diameter it looks like a tablet.
Do you know if there is another way to add that hook so that this does not happen?
Hi Edgar you probably have a custom product grid template, so you also need to play with CSS and possibly hook priority. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi! sry for the question. But what is the function of the number in the code? 10 in this case
It’s the hook “priority” – https://www.businessbloomer.com/lesson/cuwm2l05/
Hello Rodolfo
I just wrote the following code to add to my functions.php file in my Ocean WP child theme to add the SKU of my products to my products archive page. I was hoping this would return the SKU below the product title, but instead the SKU appears above every single product picture.
What am I doing wrong here?
Thanks in advance
Hi Pleun, just try replace woocommerce_after_shop_loop_item_title with a different (later) hook
Hello Rodolfo
I had to change the hook to a specific Ocean WP theme hook, that did the trick, apparently the Ocean WP theme hooks override the WooCommerce hooks.
Thanks you for the fast reply!
Great, thanks for the feedback!
Excellent work Rodolfo.
Thanks!
hi there, I have the text woocommerce_archive_description repeated on every category. How can I show the text only on the shop page, but exclude it from the categories (which have their own text) ?
Hi Criss, screenshot please?
Hello Man.
I just want to say loudly thank you for your very clear explanation .
I am Salahuddin , Libyan lives in Istanbul just started my development way in woo, I learned a lot from your resources .
Awesome!
Hell Rudolfo,
I discovered this page today and I really appreciate your work! I’m struggling with the stock status setting .. finally it seems to me that I am close to the result with your snippet but it needs to move the status more to the right and unify the color and font for woo-slider, product archive, single product page.
I appreciate any advice.
thank you in advance
Richard K.
Thank you Richard! You will need custom CSS for that, as it depends on your theme and setup
Very helpful for me.
Thanks
Cool
How would this work on the WooCommerce shop page if someone would need to move the description to below the main content showing the categories? Tried this but doesn’t work:
Simply
and then readd woocommerce_product_archive_description() later on with a different hook
Is there a way to just “gut” the loop area all together and show just what I design on the page? (without cloning the template to my theme?)
Mean this? https://www.businessbloomer.com/woocommerce-remove-loop-shop-page/
Hello Rodolfo,
I would like to display a woocommerce message notice after clicking “add to cart” on the archive products page.
All code snippets I found only show the message at the single product page.
Version 1:
Version 2:
Version 3:
Have you any idea?
Thanks a lot
Denise
Hi Denise 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!
Hi Rodolfo, thank you so much for your guide! I want to add a custom attribute in the “woocommerce_after_shop_loop_item_title” hook. Everything works fine on the shop page, but the hook doesn’t work in the Products by Category block (I also tried with “woocommerce_shop_loop_subcategory_title” hook).
The code:
Can you tell me the right hook, please?
Thank you.
Hey Lello, I think blocks behave differently than standard Woo pages. I will study that and if necessary post a visual hook guide for Woo blocks
Thanks Rodolfo,
Is there a hook guide for using woocommerce with blocks?
Thanks!
Dan
Not yet, but it’s on the to-do list!
Hi Rodolpho,
I will want to calculate the price per liter and per kilo of all my products for that I carried out a conditional field with ACF to know if the product was a drink or a cheese.
I do add_action (‘woocommerce_after_shop_loop_item’, to retrieve the volume or weight do you know how to retrieve the price of products learning at the products page to perform my calculation for each product.
Kind regards
Hi Feau, 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!
Great article that still works. However, do you have a fix for showing the stock label ofr variations. Currently only showing for single products?
https://www.businessbloomer.com/woocommerce-display-variations-name-stock-shop-page/
Hi
I am trying to remove title page from woo archive attributes templates
I could not find a snippet for it.
My goal is to SEO those pages with a better title
Hi Fred, 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!
Thabks a ton Rodolfo for this guide. Its a treasure!
However, I am looking to add a different banner image for different categories right at the top before the category loop begins. How to?
Assume I have categories: Tshirts, Jeans, Shirts
Could you please help me figure out how to add diferent top banner images for these separate category pages?
Thank again ๐
Hi Khan, I’d recommend to search for “conditional logic” on this same website. Hope this helps
Hello Rodolfo, thanks a lot for the overview, its great. I’m currently creating a site with external product, where I directly want to link the product to my product grid. therefor I use this snippet:
This works fine for the product image, but the title still links into the product page. Does someone has any idea how to fix this?
Thanks a lot, regards, Johannes
Hello Johannes, 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!
Hi
Is it possible to place the Title, description, price and add to cart to the side of the image rather than below or above?
Of course. You’ll also need custom CSS in that case
Hey, first thank you for this article.
But there is a way to adding something near the add to cart button?
Hi Tom! Do you mean “beside”?
Hello,
I transfer descriptions for tags and variants / attributes for products to “woocommerce_after_main_content”. Uses:
The problem is that the description on the category page is also transferred. Is it possible to transfer descriptions only on the subpage of the tag and the variant / attribute without moving the descriptions on the category pages?
This is due to the fact that I have my own descriptive fields above the products and under the products on the category page.
Hello Tymo, I suggest you take a look at “conditional logic”: https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/. Enjoy ๐
Hey there,
I was looking to get the notices after the result ordering and result count
I first tried it with:
But it turned out to be incorrect. It was supposed to be woocommerce_output_all_notices
It would be awesome if you could update it. It took quite some time to figure out.
Cheers!
Wow thank you
Hi Rodolfo,
After several hours of useless search, I am now turning to you, in the hope you have the fitting answer:
How do I add a space between the “incl. VAT” and “plus Shipping”, in both English and German, as used on our website on each category page? Could you please help?
Thank you very much ๐
Ralf
Hi Ralf, 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!
Thank you very much for your useful guidelines! I’m trying to remove Wishlist icon on the Archive Page? Do you know what php code I have to use?
Thank you very much in advance for you support!
Ask the Wishlist plugin devs please
Wow, what a wonderful guide! I just came across it and was able to fix an issue I had in about 1 minute.
This simple visual guide can easily replace a big chunk of WooCommerce documentation. I bookmarked it right away and looking forward to reading other guides.
Cheers!
Wow. I can’t believe this article existed. I lost maybe a week without good result. And after reading this, I integrated it for 5 min on mysite. Thank you Rodolfo
Cool!
Thanks Rodolfo for taking the time to explain; it made me able to change several things on the Category page of WooCommerce which I could not have done without your article! Very useful!!!
Awesome
This resource taught me how to add action to a hook! Thank you!
I tested on all products page and it works!
One question though… if i use the action that i created on a product list that is showing a list of products in a custom category, my action does not work. Any thoughts? I am using Divi theme > Shop module with one product category ticked.
Eumir, 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!
Hi Rodolfo, I wanted to remove the “short product description” from the woocommerce shop (archive) pages.
This did not work. Which hook would work
Hi Peter, there is no short description on default WooCommerce. So, 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!
great article sir, can you tell me how to move product badge above add to cart, i am a newbie ๐
Hi Habib, 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!
Hello everyone! I am trying to bring the product categories above the products on mobile, they sit on bottom of the page and the customer cannot see them. Any ideea how to do that? Thank you! (I am using woocommerce shop page shortcode)
They are already above
Hi, I am using elementor with my theme and I am trying to implement the loop>rating for the shop page and it is not working, is there something I need to change for elementor?
Possibly. If you don’t use Elementor, does the code work?
im looking for help.
I have a shop page with items with variation prices, and i want to show each price of the variation on the shop page.
how can i do that?
This should help you with the direction to take: https://www.businessbloomer.com/woocommerce-display-variations-name-stock-shop-page/
Hi Rodolfo,
Thank you for this. Works great.
How do I display the custom_field if I’m displaying “All Products” in a grid in a WP block on a custom page called “Deals”? It works on the shop page, as defined in those parameters, I’ve added is_page to those parameters, but does not display.
I fear blocks may use different hooks
hi , i need add SKU and Brand , any idea?
https://www.businessbloomer.com/woocommerce-brands-display-brands-loop-shop-category-pages/
I’m using the Divi theme and on the shop page the Add to Cart button was gone so I used this code.
// This code adds “Add to Cart” buttons to a page displaying shop loop
add_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 20 );
This works great but I have a question. I also have woocommerce wishlists plugin. How would I put Add to Wishlist under the Add to Cart button like it is on single product pages?
Hi John, 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!
Ok I have managed to get the search filte rto show, but its too far on the right:
https://ibb.co/kB0RMrd
code used:
[[product_category columns="4" category="Starters" paginate="true" cat_operator="AND"]]
Any ideas?
Thanks in advance,
KInd Regards
Hi Jami, you’ll need CSS for that
Hi, This guide is incredibly helpful to understand the hooks used for the product category page!
I’ve been trying to remove overlays on product images (e.g. span class=”et_overlay”) but have not been successful at doing that, by removing actions, using filters and/or adding CSS. Do you have any advice to use the hooks to get rid of and code from the category page?
That overlay is probably generated by your theme, so you’ll need to unhook their function. You won’t find it inside WooCommerce ๐
Toshi, you are using Divi or some sort of Elegant Themes, just add the below CSS to your stylesheet
.et_shop_image .et_overlay {display: none;}
Rodolfo, thanks for such helpful visual guide!
Welcome!
Hi Rodolfo and Catarina, Thanks! It worked well and I’ve learned the difference in hooks and theme CSS!
Nice!
Very interesting, and informative thank you.
Using an add_action() in my Child Theme’s function.php file, and using your ‘Visual Hook Guides’, works fine on the single product page.
But on the ‘shop’ or ‘categories’ pages the action override seems to have no affect.
Is this anything to do with the following statement on one of the WooCommerce pages?
https://docs.woocommerce.com/document/template-structure/#
” If your theme has a woocommerce.php file, you will be unable to override the woocommerce/archive-product.php custom template in your theme, as woocommerce.php has priority over other template files. This is intended to prevent display issues.”
– No explanation of what to do if this IS the case! So, what on earth do you do then? :-O
Using:
WP 5.4.2
WooCommerece 4.2.0
Theme TwentyTwenty
If you use 2020 theme, that does not override WooCommerce hooks, so it must work. Disable all plugins but Woo and try again
Hello, could you put a personalized message by product or category using woocommerce_after_shop_loop_item?
Of course!
Hi, sorry for my bad english and thank your for your video. It helped me a lot! but I have a problem, in the mobile version the category filter is shown below the products and I cannot place it above them, im trying to woocommerce_before_shop_loop . can you help me ? I have no experience and am learning for my own page.
Sorry, can’t help here
Hello
I found this article a few days ago and it was like switching a light on in my brain. I couldn’t understand hooks before and I was frustrated as to why. Your description and the visual guide made it really simple.
So firstly, I want to say Thank you very much.
I have only one question, I have a shop set up to show the categories with an image and the category title underneath. Coud you tell me the hook I need to find so I can set up a style before and after the category title (basically div tags). Is it on your sheet already and I am missing it or should I be looking elswehere.
Thanks again.
Hello again.
I found it..
and
Thanks again. This time last week I wouldn’t even have known where to start to look !
Nice!
Hey Gary, thanks for sharing this hook
. Is there any visual guide with all hooks for subcategories?
Hi, Rodolfo. first of all, thank your for your great resource. It helped me a lot!
here is my question.
I want to show my customization before
and tried below
But it always appear inside of that div. I also tried to hook for
but did not work.
How can I solve this ?
Thanks in advance.
Tatuya
Hi Tatsuya! Tried with a different theme too?
Hello, I need to change the product title from to , but I cant find where is the woocommerce_shop_loop_item_title code that generates the html. Anyone knows where to find it?
Hi Seb, 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!
Best hook hierarchy of woocommerce shop page. Thank you so much!
Thank you!
Wow!! So helpful !!
Many thanks for those WP maps ๐
Cool
This really helped me out today! thank you for making it.
Cool!
Just wanted to say thank you!!
Awesome!
Amazing Way of displaying hooks. Impressed!
Thank you!
Excellent Article! If I just have to hide the sale price on shop page how do I do it?
Instead of add_action use remove_action for the specific hook. Hope this helps
Is it possible to have the first image from the product gallery appear as the thumbnail on the shop/archive pages?
My theme uses the product image in a similar way to how many themes use the featured image – it becomes the background image in the header. However, this image is not suitable for the archive page, where the first image in the gallery is.
Hey Andrew, 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!
Thank you very much for your usefull post. I was very helpfull for me.
Cool!
Hello! Could you please tell me how to add product title here instead of category name? I need to duplicate product title below the thumbnail. In my theme product title above the thumbnail by default. Sorry for may bad English
Hi Constantin! Try with:
wow, Amazing!!!
Thank you!
I have used the tutorials from this site and its very useful. Thanks for the good share.
Great!
I found this code on the site which should be used to remove the link from the title of woocommerce products on the pages of the catalog, I don’t know why but on my site with the flatsome theme it doesn’t work … can any of you help me?
remove_action( ‘woocommerce_before_shop_loop_item’, ‘woocommerce_template_loop_product_link_open’, 10 );
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_product_link_close’, 5 );
Hi Federica, Flatsome probably overrides WooCommerce templates so 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!
I want to add a custom text field before ‘Add to cart button’. If you know how to do that then plz let me know. Thanks
Hello Adnan, 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!
Hi!, nice tutorial! i try to show some content after “taxonomy” loop but doesnt work. Any ideas why?
Hello Gaston, thanks so much for your comment! Unfortunately this looks like custom troubleshooting work and I cannot help here via the blog comments. Thanks a lot for your understanding! ~
Hello,
I am shafqat actually i was looking for to put brand banner image before product loop and description below the product loop but unfortunately i didn’t got any succeed, any body will help me to sort out my problem
Thanks in advance.
Hey Shafqat, sorry but I can’t help with custom work. Thanks for your understanding
Holy frick, this is awesome. Thanks so much for creating this.
Excellent ๐
Hi Rodolfo,
I have tried to use the after shop content, but this way the content appears on everywhere.
It is possible to just show on the shop page but except the archive pages?
Is there any hook for this?
Thanks a lot in advance,
Laszlo
Hey Laszlo, thanks for your comment! I suggest you take a look at “conditional logic”: https://businessbloomer.com/conditional-logic-woocommerce-tutorial/ and https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/. Let me know ๐
Thank you so much for creating such a complete guide. Easily the most complete Woocommerce knowledge out there.
Excellent ๐
Rodolfo.
I just want to say thank you very much for creating these guides. They are great.
Thank you ๐
I have some attributions called od, ln, r and I want to sort it in asc, but it brings me in order of text and not numeric. 1,11,13,2,3,4 instead of 1,2,3,4,11,13. what I do?
Hey Antonio, 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 Rodolfo,
Thank you for the resource and tutorials! They have been very helpful in the ever continuing expansion of our Woocommerce store. I do have an issue I cannot find a solution for, however.
We have multiple products, some of which we have in stock at our warehouse, others we have factory availability. What I have now is displaying a generic message โCall for Availabilityโ although I do not want this displayed on items I actually have in stock. The in-stock items I have set to manage stock, with quantities. The items that we have factory availability for are simply set to in-stock. Is there a way I can differentiate between the two so that on my category pages in-stock items will display โCall for Availabilityโ while any items I have managed will display # in stock.
This is what I have loaded currently:
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
Hi Rodolfo,
thanks for this resource – it’s so helpful. I am trying to remove the buy product button for my external products (i’m an affiliate store) from my shop pages (category, brand etc.) . Unfortunately this code is not working & I cannot find the alternative for external products.
Any idea what I am doing wrong?
Thanks a million in advance!
Hello Assunta – thanks so much for your comment! Not sure, it could be theme/plugin overrides… if you use the code on 2017 theme, does it work?
Hi Rodolfo, I am a novice web app programmer. I just chanced upon your site today, and I amazed at the quality and detail you have made available to everyone. I learned a lot just by spending a few hours trying out the functions and hooks you have listed. Many thanks for the efforts you have put into this! ๐
I am using WooCommerce + Storefront, and want to customize the Shop page by adding some interactive content. I did this by creating a page template containing my HTML and JavaScript, and it works just like it does in the non-WordPress version. Now I want to add the Shop page (as it is, without the header and footer) as a section to this template. What is the function or hook that I should call to do that?
Hey Shrik, 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
Can anyone confirm that hook: woocommerce_before_main_content is still working?
Appearantly, no matter what i do, i can’t seem to hook into it. When ever i change the hook name, my function seems to work. This hook doesn’t work for me. I see alot of people had issues with it on the internet, but no one really found a useful solution.
What’s wiered too, is that the title markup in “archive-product.php” isnt the one getting rendered on front end either. And no matter how many changes i made to archive-product.php (for testing purposes) no change really appears on the frontend.
This hook is driving me nuts..
It could be your theme… can you switch to another for a second and see if the hook works?
I’m having the exact same problem with a client website. Googled, googled and googled with no luck.
This visual guide blog is fantastic though! Wish I could get woocommerce_after_main_content to work though.
Hey Ritch, thanks for your comment! It could be your theme has “unhooked” it ๐
nice
๐
Rodolfo, thanks for your blog posts. One question, I tried editing Infinte Child Theme usuing your instructions but it doesnt work. Any reference onto why is not working?
Thank you in advance!
Hola Nicolas, thanks for your comment ๐ Sorry but this is custom troubleshooting and cannot help here via the blog comments. Thank you!
Hi,
great materials!
I have one question for which I’ve been looking for answer for 3-4 days in the net.
How can I add the following info under my products on shop page:
โข Name of the product
(done by default)
โข SKU
(managed to do it with woocommerce Booster in the Product Info tab with the following shortcodes: [wcj_product_sku] and Item No: [wcj_product_sku])
โข Price
(done by default)
โข Subcategory name
!This one is the main problem!
The Booster managed to show me all the categories and subcategories with these shortcodes: [wcj_product_categories] and [wcj_product_categories before=”Category: “]. But I want to show only one particular subcategory which is the name of the brand of a particular product. I tried your php solution for this but it didn’t work.
Please help!
Thank you.
Hey Ivo, 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, i have the same “issues”. It works fine to remove and add, but when i want to remove meta and only add SKU, it doesn’t seems like there an easy way to only add the SKU from the meta?
hi, please do reply soon as soon as possible
Frank, thanks so much for your comment! Unfortunately this looks like custom troubleshooting work and I cannot help here via the blog comments. Thanks a lot for your understanding! ~R
hi, I want to override archieve.php file. and i followed all the steps that are mentioned to override like make a folder named woocomerce in theme directory and in this directory copy the archieve.php file. but nothing works. please guide me what to do to resolve that issue?
Thank you so much nice explanation…
I have one question
How can i add Add to wishlist button on shop page?
Hey Atib, you can use this: https://businessbloomer.com/woocommerce-display-yith-wishlist-buttons-shop-page/
Great support! Thank you for sharing this with us! Really helpful!
๐
Hey! This is a great visual helper. One question, though – in which hook is the “Showing all 4 results”.
Also, how can I remove the result_count from there?
Hey Atanas, thanks so much for your comment! I think this should help: https://businessbloomer.com/woocommerce-remove-showing-single-result/
Thanks a lot Rodolfo for this amazing tutorial, really impressive
I have question for you.
I “sell” articles on my website. So, the basic template of the shop page is not relevante for me.
What I would like to do is, more or less, the same presentation of a Search Engine (Google, Bing, …) with
– the product name for the link
– the short description product just under the title
– the price on the same row of the title
– the add to cart on same row of the title.
How do you change the template of the loop ?
Hey Frederic, thanks for your comment! This should help: https://businessbloomer.com/woocommerce-display-products-table/
Thanks for the help with removing the “best sellers” on my woocommerce storefront.
Best, Linda
Thanks for your feedback Linda!
Thanks Rodolfo and the rest of the commenters.
This thread quickly refreshed my memory a lot and helped me solve a nice little SEO boost on the archive pages. Adding an h1 of the current product category or tag archive term title to the top of the archive pages and an h3 of it at the bottom of the page.
Here it is chopped up from the comments
Nice, thanks for that ๐
What is the difference between Taxonomy description and product achieve description?
Hey there, thanks for your comment! Taxonomy is strictly related to a specific category, while “product archive” applies to all categories/tags/loops ๐
You are amazing !! It’s great feeling to control your own website. So I understand everything you are teaching. But what if my theme has already overridden all these hooks?
Such as I add the line
in my functions.php of the child theme, but description stays at it is. I suspect it because my theme shopkeeper has altered the hook or function names.
What do you think in these kinds of cases? Should I make my own hook guide for my theme or just ditch the theme?
Thanks ๐
Hey Kiran, thanks for your comment! Yes, you will need to see what your theme is doing with the default WooCommerce calls, and in case remove the functions that your theme adds ๐
Hey Rodolfo,
thanks for great articles!
I’m struggling with simple thing. On my shop page which displays categories, there is category image, and category name below following by number of items inside the category.
How can I remove the category name/number of items? I just want to have category image, nothing else.
Thanks in advance
https://businessbloomer.com/woocommerce-remove-product-category-counters/ ๐
Hey Rodolfo
Thanks for these!
Is there a way to use the remove codes to stop all of the shop loop items appearing on woo category pages please?
So for e.g., if i just wanted to have images that link to sub categories and NO products appearing in category pages can i use one of these codes to achieve that please?
Thanks
Matt
Hey Matt, thanks for your comment! Check the WooCommerce settings, you can define this there ๐
I have a strange issue and wondering if you could give me some advice. The 1st post on the shop page is displaying the long product description at the bottom of the page. The individual product posts are fine. It does not matter the filter I select it always displays the associated posts text at the bottom of the page. I hope I am explaining this in a way that it is understood. I am just baffled by this issue.
The site was already built when I was hired so I am having to try to salvage this disaster.
Heather, thanks so much for your comment! Yes, there seems to be some problem with your website there – but unfortunately this is custom troubleshooting work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R
Hi Gregory
I wonder how do I reposition the archive description? (it has a banner shortcode so I’d want it to be full with i.e. before main content)
I tried this:
remove_action( ‘woocommerce_archive_description’, ‘woocommerce_taxonomy_archive_description’, 10 );
add_action( ‘woocommerce_before_main_content’, ‘woocommerce_taxonomy_archive_description’, 5 );
Daniel
Hi Daniel, Did you figure this out? I tried exactly the same. In the end I had to use a display:none styling (which is a rubbish solution) to hide the existing, because nothing I do seems to be able to remove existing Woo actions. I’m suspicious this is because the theme I’m using (Avada) is at fault thinking that it controls everything.
Thanks,
Gerald
Here is what worked for me when I wanted to separate out a couple of product with their own header on the site. Some of the divs might be a bit overkill but wanted to leave room for styling those parts separately later:
Thank you Hakan ๐
This site is SO helpfulโ I find many solutions here, and other good ideas I wasn’t even thinking of. This is a slight modification to the snippet Hรฅkan posted above to just give people a customer service contact.
Nice
I love your guide. But one problem I have. I can’t use the get field of acf in the shoppage above.
Thanks Melanie! Why can’t you use it?
SO helpful! thank you
๐
Hello Rodolfo Melogli,
I want to add No of Quantity and other some details in Thumbnail product page . please help me .
Pintu, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R
Hi, thanks for your amazing videos and website. You explain things in a way that is so easy to understand!
My question, do you know where I should look if I want to customize the small “archive loops” that Woocommerce puts out when you use a shortcode like [related_products] or [sale_products]? Where do the functions for these short codes live? Can you customize them in a similar way as you do in this article?
Thanks for your comment Benjamin! Those shortcodes still generate loops, so all you need is to “target” the name of the loop e.g. “related”. At some stage on this page there is an example for that: https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/
how to add description in single product-category
Hey Harsh, thanks for your comment!Try with: https://businessbloomer.com/woocommerce-show-product-short-description-homepage/
Hello Sir,
Your tutorials are really helpful, Thanks.
My questions is how should I remove Sidebars of Shop page and show products in full width on screen. I tried from basic page settings but it didn’t worked for me.
Please help.
Paras, thanks for your comment! Yes, this is possible – but unfortunately this is custom to your specific theme and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R
Hi Rodolfo,
first I like to thank you for the tutorial, and I also have a question for you.
I am tring to use the following code to print some content right before the title of products (an categories).
It works like charm for products, but it does not show nothing on the categories.
Just to be clear my website have to show both categories and products in the shop.
Any suggestion in welcome.
Thank you in advance.
Hello again,
I found myself a solution.
While messing with categories you need to use different hooks like
I found the needed hook while looking at the file:
content-product_cat.php
I did not check all your website, but if you missed it I think it will be nice to add also the hooks for the category.
Thank you again for your really useful tips, and have a nice day.
This is awesome Andrea, thank you very much!
Hello Rodolfo,
Thanks for sharing your knowledge!
I juts get in touch to see if there is any way to can hook the shop page thumbnail. I am trying to greyed-out out of stock products but with no results…
Any suggestions?
Have a nice day!
Thanks for your comment Diego! What have you tried so far?
Thank you so much! This post is definitely very useful. Cheers!
Awesome, thank you so much David!
Hello Rodolfo
wooCommerse catalog 4 column per row page product element adds a horizontal scroll bar for about 9 pixels of oversize that looks horible. Is there a Snippet to just remove the scroll bar.
Thank You
Jeff
Hey Jeff, thanks for your comment! I’m afraid this is not a PHP thing, there is some customization required on the CSS end, as this is probably something that your theme is causing ๐ Hope this helps!
hi,
i m new to woocommerce.
i want to show the product list in the right side of the sidebar but its showing below
and i added the below code in the themeโs functions.php โ
pls help.
Hey Manjil, thanks for your comment! I guess you also need some CSS work to reduce the width of the products, so you can make room for a sidebar on its left ๐ Hope this helps!
Hi Rudolfo,
I love your articles and videos. It is all not so scary anymore!!
I am trying to add a row of content on the shop page – before the main content.
Using the Beaver Builder theme.
I tried this code, and it gave me the blank screen:
Do you have any ideas on how to get a beaver builder on the shop page?
Jean
Hey Jean, thanks for your comment! What error do you get on the white screen?
Rodolfo, first of all: GREAT tutorials! Indeed, I was also working a lot with plugins to get things done. Now, after watching several video’s you published, I removed a few plugins already.
Okay, down to business ๐ I have this strange thing going on, on my category pages. As expected, the thumbnails of products and other things like price, etc. are displayed correctly. But, down the category page, these products are once again displayed, but now with the full description. Any idea, what this might be?
Thanks in advance.
Gregory
Hey Gregory, thanks for your comment and nice words ๐
I actually have no idea about your issue, it could be absolutely anything… did you add another [products] shortcode to your shop page? Not sure ๐
Problem solved!
‘Infinite scrolling’ in the Jetpack plugin was active.
๐
Thanks for sharing this! It’s very helpful. I was recommended this site to help me skip the product page on my Woocommerce shop. But unfortunately I can’t figure it out.
Do you know how I can make the shop page thumbnails link directly to the external product? Instead of the users having to go to the product page first, and then click the external link?
I can’t find anything about it anywhere.
Current:
Archive page > product page > external page.
What I’m trying to do:
Archive page > external page (in a new tab)
I would really appreciate any help!
Hey Nikolaj, thanks very much for your comment and feedback, much appreciated ๐ I don’t offer free support/dev here on the blog, however I recommend you take a look at 2 things:
1) This is how you can disable the link to the product page: https://businessbloomer.com/woocommerce-disable-link-to-product-loop/#woocommerce-snippet-2-hack-free-even-better-disable-link-to-products-loop
2) Then, you can replace that link you removed above with the link to the external product, which you can get from a PHP function called get_product_url()
Hope this helps ๐
I made a ajax product filter widget for best selling product . And its working fine but its changing shop page products layout means its displays 6 products per row . Before filter it was 3 products per row . Can you help me ?
Hey Tushar, thanks for your comment! I’m afraid I can’t help you for custom work – hope you find a fix soon ๐
Very helpful video indeed Rodolfo – thank you.
Following the video I wanted to try and move the titles of the 2 categories (displayed on the shop page) from below the thumbnail to above it. On doing a bit of googling I found the following snippet – which made sense, and worked after a fashion.
The problem was that this applied not only to categories, but also products too, which I didn’t want. So following your suggestions about conditional logic I tried changing it to:
But that didn’t work either. On further googling I then found out that the conditional “is” checks do not work in the body of functions.php. They only work if they are within a function tied to an action. So, I was wondering if you know how I can run the remove_action and add_action conditionally?
In advance, many thanks.
Excellent ๐
You should put all your snippet in a function, and then call the function from somewhere else. I haven’t tested it, but the following should work:
Let me know ๐
Thanks Rodolfo.
I had actually tried that. I was looking for a hook I could use that might allow me to do that and init was one I tried. And no change I’m afraid.
I looked up what “woocommerce_template_loop_product_thumbnail” does, and it basically just issues :
So the other thought I had was to maybe override that woo function:
Still no good – it’s almost like the category thumbnail and titile are not treated the same as products?
You can see at the URL appended to this comment.
๐
Andy, the remove_action cannot be called by the “woocommerce_after_shop_loop_item_title” hook as long as I know. It should either be on it’s own line, outside the function, or be called by the “init” hook (default WordPress). Other than that, the rest should work. Keep testing and let me know ๐
Hi Rodolfo
Well, in case I had a typo I tried the init approach again..
Still no joy I am afraid – no difference at all. Maybe the remove and add actions generally cannot be called within a function? Or maybe those 2 specific ones are called too late to have an effect. Perhaps the answer is to change the template?
Hey Adam, I just tested this on 2016 theme and if you remove the is_shop() check it works. Give it a go and let me know. R
Hi Rodolfo
Thanks for helping again!
Sorry – the same as before – removing the is_shop check means it works on on the products page. So the list of products (e.g range of business cards) have the title’s above the thumbnails (which I don’t want – for the listed products I want the title underneath), but the parent page that just lists the 2 categories of “Business Cards” and “Stationery” have the titles stuck under the thumbnails.
See the site URL for the catalogue for this post – you’ll see categories have the titles underneath, but if you click on a category, the resultant products listed have their titles above. I’m trying to get it the other way around
๐
I found the solution ๐ Instead of using “init” please use “wp_head” (and keep the is_shop() check as you said). Init is too soon for conditional logic!
Hi Rodolfo
Think I had tried wp_head before too – but tried it again:
Sorry – no change. Catalogue page listing the categories; title is still below thumbnail, but products page titles are now back to under thumbnail as required. In my opinion there’s definitely something different about listing the categories as opposed to listing normal products (i.e. Categories are not treated like products)?
Hey Adam ๐ Well, there must be something in your theme and/or plugins that is already overriding/removing WooCommerce default hooks. I placed this snippet in the functions.php file of 2016 theme and it worked, so maybe disable everything temporarily and see if anything happens ๐
Hi Rodolfo, there wasn’t a reply button on your last comment so I had to create a new comment – sorry.
Anyway, I’ve restored the archive-products.php to it’s oroiginal state as you advised, and I also added the code you sent to my functions.php (the one in the child theme). but nothing is showing at the bottom of my shop page or category page. It’s as you said, I think the theme author has removed it. Is there anyway to restore it into the archive-products.php file?
Also does it matter that the archive-products.php file is not in a fiolder called templates. It is in wp-content>themes>themefolder>woocommerce>archive-products.php
No problem – thanks for spotting the “max 5 comments bug” ๐ So, yes, you’re right, they removed that part. No idea why!
Anyway, copy that file into your child theme’s /woocommerce folder (if it’s not there already, and yes – you don’t need to create a /templates folder), and just before the last closing add:
Then, go to your functions.php and do what I said in the last comment.
Let me know ๐
Still no luck Rodulfo ๐
I added the archive-products.php file into my child theme and added the
at the end, but still no joy. Just in case I put it in the wrong place, i also tried placing it near the top and towards the middle. but still nothing.
Its strange because when I change the functions.php file to
, it works just fine, the text appears at the top – just like in your tutorial video.
At this point I’m really baffled.
Since I have the archive-products.php in my child theme now, I guess I could just go ahead and make changes to it directly without worrying about an update that might break things, right? Although, it would be really good to get this working the correct way.
Have you tried calling it differently e.g.
Then of course, you will need to use that hook in your add_action.
Renaming it doesnt seem to work either. I added
to the very end of the archive-products.php file. is that the correct place for it? or should it be somewhere else?
Lol, I should have said this 6 comments ago… can you email me your WP & FTP details and I’ll take a quick look for a minute?
Excellent video Rodolpho. just one question. The ‘woocommerce_after_shop_loop’ and the ‘woocommerce_after_main_content’ dont do anything to add content to the bottom of my theme’s shop page. I’ve checked the archive-products.php in my theme and there is no mention of either ‘woocommerce_after_shop_loop’ or ‘woocommerce_after_main_content’. COuld it be that I need to add them manually? If so, could you kindly explain how please.
Thanks Ewan! It seems your theme is overriding the WooCommerce template, which is actually not recommended. Not sure if they are overriding an old version which did not contain those actions (weird), or they removed them (even more strange). Is your theme up to date i.e. they released an update in the last 3-4 weeks and you’re running that version?
Yes, its a very up to date version a theme called The Retailer. I’m tempted to email in to their support desk to ask for help, but from past experience I know they will just tell me it’s beyond the scope of their support ๐
This is what the archive-products.php looks like:
Near the bottom you can see some echo lines where I’ve attempted to add the content manually. That seems the only way to do it for now.
This works fine, but I’m worried about when the theme gets updated. Do you have any suggestions?
See at the top where they use remove_action? There they’re removing some WooCommerce default actions and substituting them with their own ones.
However, “woocommerce_after_shop_loop” is still there, so it must work.
Can you post the snippet you’re using, as there must be an error there ๐
Apologies, I added those lines, because they were not in there:
I should have made that clear, sorry. (I just copied them from your visual guide page thinking that i could manually add them)
The lines above + the echo bits are my own additions.
Either way, this is the snippet I’m using:
I really appreciate you taking the time to reply to my question ๐
Alright Ewan, a bit of a mess here – let’s see if I can help a little more:
1) Please restore the original archive-products.php. From that moment on, all your PHP customization will exclusively be placed in functions.php instead
2) Try this in your functions.php:
Let me know if this first test works!
Hi Rodolfo
This does not work for a category page…..works for shop
Not sure what tags are
These are for category pages as well, unless you’re using a custom template
Just wanted to thank you for taking the time to make these visual guides, they are extremely helpful and come in handy all the time. Actually saved me from purchasing some plugin that builds Woo templates, No need when Rodolfo taught me how to do it myself! ha!
Thanks again Rodolfo you are awesome.
Kyle, thank you SO MUCH! You made my day & weekend already ๐
Hi,
I have a design for my shop page. how can I customize shop page to look like my design ? can you please give suggestion ?
Thank in advance
Hey Ferdaus, thanks for your comment! I’m afraid without looking at your design I find it difficult to give you suggestions ๐ Upload them to Google Docs or DropBox and I’ll take a look!
Here is the design link please check it and help me .
https://prntscr.com/bayk2h
Thank you
Ferdaus, thanks for the link. I’m afraid that’s way too custom and I can’t help you in this occasion ๐ Hope you can find a skilled freelancer that can help you with that complicated layout! Thanks ๐
Hey! Loving your guides! Thank you! One thing I have trouble with is product attribute archives. They look like category pages but are not as I realize when trying to modify them. Iยดd like to put the attribute archive description below the products but cannot find how to do it! do you have a solution for that perhaps? ๐
Thank you Asa! Much appreciated ๐ In relation to the product attribute archives, they use the same template file of Product Tags: taxonomy-product_tag.php, and have the same exact hooks of the Archive/Shop/Cat/Tag pages. What are you trying to display? Thank you!
hmm, well then it is something else I donยดt understand ๐ Thought Woo changed the attribute set up to not act as a taxonomy anymore! I am trying to make the attribute archive page to look like a tag or a category page. I am using the genesis framework. This is a category on my site: https://asamaria.se/produkt-kategori/orhangen/ I have descriptions above and below the products. the genesis category description above and then I have moved the “usual” description to display below. Now look at an attribute page https://asamaria.se/pa_adelsten/ametist/ that description you see is the description output by genesis. There is no display of the “ususal” description. The field is present in the editor so I have text there but it is not visible.
This is what I used to move the usual description to below the products
remove_action( ‘woocommerce_archive_description’, ‘woocommerce_taxonomy_archive_description’, 10 );
add_action( ‘woocommerce_after_shop_loop’, ‘woocommerce_taxonomy_archive_description’, 100 );
works perfectly on categories and tags. Ideally I would like to show the attributes on the single products page and have that link to the attribute. Now I have blocked the attribute form search engines and added them as tags as well. I guess it works but I would love to have the attributes there. You know like: Metal: Silver, Gemstone: Amethyst, Model: Effie
What am I missing? ๐
Hey Asa ๐ The woocommerce_taxonomy_archive_description() only works for tags and categories. This is why it does not show for attributes.
You will need to code this from scratch and do something along the line of “if is product attribute page, show attribute description”.
Hope this helps!
hello Rodolfo. You know what!!?? Thank you very much!! i like it!!
Thank you Olivier ๐ Much appreciated!
Excellent resource! Thank you so much!!!
Thank you Patty! Any particular request for the next Visual Guide?