WooCommerce Visual Hook Guide: Archive / Shop / Cat Pages

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]

woocommerce_before_main_content

 

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

    Add to cart

  • 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

    Select options

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

Related content

  • WooCommerce: Disable Variable Product Price Range $$$-$$$
    You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce: Hide Prices on the Shop & Category Pages
    Interesting WooCommerce customization here. A client of mine asked me to hide/remove prices from the shop page and category pages as she wanted to drive more customers to the single product pages (i.e. increasing the click-through rate). As usual, a simple PHP snippet does the trick. I never recommend to use CSS to “hide” prices, […]
  • WooCommerce: How to Remove the “Default Sorting” Dropdown
    If the WooCommerce product sorting functionality (“Default Sorting” dropdown) is a waste of space or you don’t need that select box at all, you may want to remove it. No matter if you prefer custom code or a simple plugin – hiding the product sorting dropdown is a piece of cake. Enjoy!
  • WooCommerce: How to Shorten Product Titles
    A very common WooCommerce shop page issue: sometimes (and especially with affiliate stores), WooCommerce product titles are way too long and go over several lines, messing with the overall vertical alignment. On top of this, you may also want to keep the shop experience consistent, and make all the WooCommerce product titles of the same […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

269 thoughts on “WooCommerce Visual Hook Guide: Archive / Shop / Cat Pages

  1. Hi, I want to put my content between “Showing all 4 results” and loop items. Is it possible or not? Thank you

    1. Yes, you can use ‘woocommerce_before_shop_loop’ with priority 31

  2. Hi Rodolfo,
    I want to add my template [elementor-template id=”12310″] after woocommerce_after_main_content
    Can you please help?

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

  4. 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?

    1. 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/

  5. Hello, I’m using jetwoobuilder and I added this code to code snippets:

    function add_text_to_grid_item() {
        echo '<p>text</p>';
    }
    add_action('woocommerce_after_shop_loop_item_title','add_text_to_grid_item');

    But it’s not working, this hook ‘woocommerce_after_shop_loop_item_title’ doesn’t work.
    Could you help me please?

    1. That’s probably because of JetWooBuilder – please read their docs to see if it’s possible to add custom content

  6. 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!

    1. Blocks are – currently – not flexible at all from a developer point of view. Unfortunately most of these hooks won’t work.

  7. Hi,
    on pages with pagination – how to run a hook (I use field from ACF) only on the first page of the archive?
    Regards

    1. 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!

  8. 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?

    1. 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!

  9. Hi! sry for the question. But what is the function of the number in the code? 10 in this case

     'woocommerce_output_content_wrapper', 10 ); 
  10. 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.

     
    add_action ( 'woocommerce_after_shop_loop_item_title', 'custom_after_title' );
    function custom_after_title() {
    global $product;
    if ( $product->get_sku() ) {
    echo $product->get_sku();
    }
    }
    

    What am I doing wrong here?

    Thanks in advance

    1. Hi Pleun, just try replace woocommerce_after_shop_loop_item_title with a different (later) hook

      1. 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!

        1. Great, thanks for the feedback!

  11. Excellent work Rodolfo.

  12. 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) ?

    1. Hi Criss, screenshot please?

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

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

    1. Thank you Richard! You will need custom CSS for that, as it depends on your theme and setup

  15. Very helpful for me.
    Thanks

  16. 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:

    add_action('woocommerce_shop_description', 'custom_shop_description', 2 );
    function custom_shop_description(){
        if( is_shop () ) :
            remove_action('woocommerce_archive_description', 10 );
            add_action( 'woocommerce_after_main_content', 5 );
        endif;
    }
    
    1. Simply

      remove_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );
      

      and then readd woocommerce_product_archive_description() later on with a different hook

  17. 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?)

  18. 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:

    add_filter('wc_add_to_cart_message', 'custom_add_to_cart_message');
    function custom_add_to_cart_message()
    {
        global $woocommerce;
    
        $return_to  = get_permalink(wc_get_page_id('shop'));
        $message    = sprintf('<a href="%s" class="button wc-forwards">%s</a> %s', $return_to, __('Continue Shopping', 'woocommerce'), __('Product successfully added to your cart.', 'woocommerce'));
        return $message;
    }
    

    Version 2:

    add_filter('wc_add_to_cart_message_html', '__return_true');
    

    Version 3:

    add_filter('woocommerce_after_shop_loop_item', 'custom_added_to_cart_message');
    
    function custom_added_to_cart_message()
    {
    
        $message = 'You product is in the cart!';
    
        return $message;
    }
    

    Have you any idea?

    Thanks a lot
    Denise

    1. 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!

  19. 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:

     
    add_action( 'woocommerce_after_shop_loop_item_title', 'add_my_attribute', 7 );  
    
    function add_my_attribute() {
    	global $product;
    	$myAttr = $product->get_attribute( 'example-attr' );
    	echo '<span class="my-attr">' . $myAttr . '</span>' ;
    } 
    

    Can you tell me the right hook, please?
    Thank you.

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

  20. Thanks Rodolfo,
    Is there a hook guide for using woocommerce with blocks?

    Thanks!
    Dan

    1. Not yet, but it’s on the to-do list!

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

    1. 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!

  22. Great article that still works. However, do you have a fix for showing the stock label ofr variations. Currently only showing for single products?

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

    1. 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!

  24. 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 πŸ˜€

    1. Hi Khan, I’d recommend to search for “conditional logic” on this same website. Hope this helps

  25. 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:

    remove_action('woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open');
    add_action('woocommerce_before_shop_loop_item', 'woocommerce_add_aff_link_open', 10);
    
    
    function woocommerce_add_aff_link_open(){
      $product = wc_get_product(get_the_ID());
      if ($product->is_type('external'))
        echo '<a href="' .
             $product->get_product_url() .
             '" class="woocommerce-LoopProductImage-link">';
    }
    
    function woocommerce_add_aff_link_close(){
      $product = wc_get_product(get_the_ID());
      if ($product->is_type('external'))
        echo '</a>';
    }
    

    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

    1. 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!

  26. 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?

    1. Of course. You’ll also need custom CSS in that case

  27. Hey, first thank you for this article.
    But there is a way to adding something near the add to cart button?

    1. Hi Tom! Do you mean “beside”?

  28. Hello,

    I transfer descriptions for tags and variants / attributes for products to “woocommerce_after_main_content”. Uses:

    remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
    remove_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );
    
    add_action( 'woocommerce_after_main_content', 'woocommerce_taxonomy_archive_description', 40 );
    add_action( 'woocommerce_after_main_content', 'woocommerce_product_archive_description', 40 );
    
    

    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.

    1. Hello Tymo, I suggest you take a look at “conditional logic”: https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/. Enjoy πŸ™‚

  29. Hey there,

    I was looking to get the notices after the result ordering and result count

    add_action( 'woocommerce_before_shop_loop', 'wc_print_notices', 10 );
    add_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
    add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

    I first tried it with:

    remove_action( 'woocommerce_before_shop_loop', 'wc_print_notices', 10);
    add_action( 'woocommerce_before_shop_loop', 'wc_print_notices', 40);
    

    But it turned out to be incorrect. It was supposed to be woocommerce_output_all_notices

    remove_action( 'woocommerce_before_shop_loop', 'woocommerce_output_all_notices', 10);
    add_action( 'woocommerce_before_shop_loop', 'woocommerce_output_all_notices', 40);
    

    It would be awesome if you could update it. It took quite some time to figure out.

    Cheers!

    1. Wow thank you

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

    1. 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!

  31. 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!

    1. Ask the Wishlist plugin devs please

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

    1. Cheers!

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

    1. Cool!

  34. 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!!!

    1. Awesome

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

    1. 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!

  36. Hi Rodolfo, I wanted to remove the “short product description” from the woocommerce shop (archive) pages.
    This did not work. Which hook would work

    1. 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!

  37. great article sir, can you tell me how to move product badge above add to cart, i am a newbie πŸ™

    1. 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!

  38. 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)

    1. They are already above

  39. 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?

    1. Possibly. If you don’t use Elementor, does the code work?

  40. 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?

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

    add_action( 'woocommerce_after_shop_loop_item_title', 'mysite_woocommerce_product_custom', 35 );  
    
    function mysite_woocommerce_product_custom() {
    global $post;
    if ( is_home() || is_shop() || is_product_category() || is_product_tag() || is_page() ) {
       echo get_post_meta( $post->ID, 'company', true );
    }
    }
    
    1. I fear blocks may use different hooks

  42. hi , i need add SKU and Brand , any idea?

  43. 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?

    1. 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!

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

    1. Hi Jami, you’ll need CSS for that

  45. 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?

    1. That overlay is probably generated by your theme, so you’ll need to unhook their function. You won’t find it inside WooCommerce πŸ™‚

      1. 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!

        1. Welcome!

          1. Hi Rodolfo and Catarina, Thanks! It worked well and I’ve learned the difference in hooks and theme CSS!

            1. Nice!

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

    1. If you use 2020 theme, that does not override WooCommerce hooks, so it must work. Disable all plugins but Woo and try again

  47. Hello, could you put a personalized message by product or category using woocommerce_after_shop_loop_item?

    1. Of course!

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

    1. Sorry, can’t help here

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

    1. Hello again.

      I found it..

      woocommerce_shop_loop_subcategory_title

      and

      woocommerce_after_subcategory_title

      Thanks again. This time last week I wouldn’t even have known where to start to look !

      1. Nice!

        1. Hey Gary, thanks for sharing this hook

           woocommerce_after_subcategory_title 

          . Is there any visual guide with all hooks for subcategories?

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

     <div class="woocommerce columns-4 "></div> 

    and tried below

     function addSectionInCategoryArchive() {
        echo  'customization here';
    }
    add_action( 'woocommerce_before_main_content', 'addSectionInCategoryArchive', 10); 

    But it always appear inside of that div. I also tried to hook for

     woocommerce_archive_description 

    but did not work.
    How can I solve this ?
    Thanks in advance.
    Tatuya

    1. Hi Tatsuya! Tried with a different theme too?

  51. 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?

    1. 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!

  52. Best hook hierarchy of woocommerce shop page. Thank you so much!

    1. Thank you!

  53. Wow!! So helpful !!
    Many thanks for those WP maps πŸ˜‰

    1. Cool

  54. This really helped me out today! thank you for making it.

    1. Cool!

  55. Just wanted to say thank you!!

    1. Awesome!

  56. Amazing Way of displaying hooks. Impressed!

    1. Thank you!

  57. Excellent Article! If I just have to hide the sale price on shop page how do I do it?

    1. Instead of add_action use remove_action for the specific hook. Hope this helps

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

    1. 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!

  59. Thank you very much for your usefull post. I was very helpfull for me.

    1. Cool!

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

    add_action( 'woocommerce_after_shop_loop_item_title', 'after_shop_loop_item_title', 1 );
    function after_shop_loop_item_title() {
    	global $post;
    	$terms = get_the_terms( $post->ID, 'product_cat' ); 
      $text = "<p> (";
    	foreach ($terms as $term) {
    		$text .= $term->name;
    	}
    	$text .= ") </p>";
    	echo $text;
    	
    }
    1. Hi Constantin! Try with:

      get_the_title();
      
  61. wow, Amazing!!!

    1. Thank you!

  62. I have used the tutorials from this site and its very useful. Thanks for the good share.

    1. Great!

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

    1. 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!

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

    1. 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!

  65. Hi!, nice tutorial! i try to show some content after “taxonomy” loop but doesnt work. Any ideas why?

    1. 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! ~

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

    1. Hey Shafqat, sorry but I can’t help with custom work. Thanks for your understanding

  67. Holy frick, this is awesome. Thanks so much for creating this.

    1. Excellent πŸ™‚

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

    1. 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 πŸ™‚

  69. Thank you so much for creating such a complete guide. Easily the most complete Woocommerce knowledge out there.

    1. Excellent πŸ™‚

  70. Rodolfo.
    I just want to say thank you very much for creating these guides. They are great.

    1. Thank you πŸ™‚

  71. 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?

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

  72. 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:

    is_in_stock() ) {
    $availability[β€˜availability’] = __(β€˜Need it Quick? Call for Availability (1-800-277-4466)’, β€˜woocommerce’);
    }
    if ( $_product->is_in_stock() && $product->get_stock_quantity() == 1 ) {
    $availability[β€˜availability’] = sprintf( __(β€˜Availability: %s in stock’, β€˜woocommerce’), $product->get_stock_quantity());
    }
    if ( $_product->is_in_stock() && $product->get_stock_quantity() > 1 ) {
    $availability[β€˜availability’] = sprintf( __(β€˜Availability: %s in stock’, β€˜woocommerce’), $product->get_stock_quantity());
    }
    
    return $availability;
    }
    
    function ahe_stock_catalog() {
    global $product;
    if ( $product->is_in_stock() ) {
    echo ” . $product->get_stock_quantity() . __( β€˜ Need it Quick? Call for Availability’, β€˜ahe’ ) . ”;
    } else {
    echo ” . __( β€˜out of stock’, β€˜ahe’ ) . ”;
    }
    }
    add_action( β€˜woocommerce_after_shop_loop_item_title’, β€˜ahe_stock_catalog’ ); 
    1. 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

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

     remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10); 

    Any idea what I am doing wrong?

    Thanks a million in advance!

    1. 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?

  74. 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?

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

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

    1. It could be your theme… can you switch to another for a second and see if the hook works?

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

      1. Hey Ritch, thanks for your comment! It could be your theme has “unhooked” it πŸ™‚

  76. nice

  77. 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!

    1. Hola Nicolas, thanks for your comment πŸ™‚ Sorry but this is custom troubleshooting and cannot help here via the blog comments. Thank you!

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

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

    2. 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?

  79. hi, please do reply soon as soon as possible

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

  80. 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?

  81. Thank you so much nice explanation…
    I have one question
    How can i add Add to wishlist button on shop page?

  82. Great support! Thank you for sharing this with us! Really helpful!

  83. 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?

    1. Hey Atanas, thanks so much for your comment! I think this should help: https://businessbloomer.com/woocommerce-remove-showing-single-result/

  84. 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 ?

  85. Thanks for the help with removing the “best sellers” on my woocommerce storefront.
    Best, Linda

    1. Thanks for your feedback Linda!

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

    add_action( 'woocommerce_before_main_content','show_title_intro_TEST');
        
    function show_title_intro_TEST() {
       echo '<h1 class="archivepagehs">';
    			woocommerce_page_title();
    			echo '</h1>';
    		}
    
    add_action( 'woocommerce_after_shop_loop','show_category_intro_TEST');
        
    function show_category_intro_TEST() {
      echo '<h3 class="archivepagehs">';
    			woocommerce_page_title();
    			echo '</h3>';
    		}
    
    1. Nice, thanks for that πŸ™‚

  87. What is the difference between Taxonomy description and product achieve description?

    1. Hey there, thanks for your comment! Taxonomy is strictly related to a specific category, while “product archive” applies to all categories/tags/loops πŸ™‚

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

    remove_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );

    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 πŸ™‚

    1. 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 πŸ™‚

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

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

    1. Hey Matt, thanks for your comment! Check the WooCommerce settings, you can define this there πŸ™‚

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

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

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

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

  93. 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:

    add_action( 'woocommerce_after_shop_loop','show_below_shop');
        
    function show_below_shop() {
    	if(is_shop()){
       		echo 'Other products and services';
    		echo '';
    		echo do_shortcode('[products ids="1674, 3348" columns="3"]'); 
       		echo '';
    		echo '';
    		echo 'At this time we welcome customers from Europe and the US and Canada. ';
    		echo '&nbsp;';
    	}
    }
    
    1. Thank you Hakan πŸ™‚

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

        add_action( 'woocommerce_after_shop_loop','show_below_shop');   
        function show_below_shop() {
           if(is_shop()){
              echo 'If you need help or have any questions or suggestions for us, please reach out to <a href="mailto:xyz@xyz.org" rel="nofollow ugc">xyz@xyz.org</a>';
              }
        }
        
        1. Nice

  94. I love your guide. But one problem I have. I can’t use the get field of acf in the shoppage above.

    1. Thanks Melanie! Why can’t you use it?

  95. SO helpful! thank you

  96. Hello Rodolfo Melogli,
    I want to add No of Quantity and other some details in Thumbnail product page . please help me .

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

  97. 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?

    1. 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/

  98. how to add description in single product-category

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

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

  100. 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).

    add_action('woocommerce_shop_loop_item_title', 'custom_pre_title');
    function custom_pre_title(){
    	if(is_product_category()){
    		echo '<h3 class="product-title">I am a cat</h3>';	
    	}else{
    		echo '<h3 class="product-title">I am a prod</h3>';
    	}
    }

    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.

    1. Hello again,
      I found myself a solution.
      While messing with categories you need to use different hooks like

      add_action('woocommerce_shop_loop_subcategory_title', 'custom_pre_cat_title');

      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.

      1. This is awesome Andrea, thank you very much!

  101. 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!

    1. Thanks for your comment Diego! What have you tried so far?

  102. Thank you so much! This post is definitely very useful. Cheers!

    1. Awesome, thank you so much David!

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

    1. 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!

  104. 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 –

     add_action(β€˜woocommerce_before_shop_loop’,’woocommerce_get_sidebar’,10); 

    pls help.

    1. 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!

  105. 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:

    add_action( 'woocommerce_before_main_content', 'my_function_name' ); 
    function my_function_name() { 
    if(is_shop() || is_single()){ 
    echo do_shortcode('[fl_builder_insert_layout slug="product-display"]'); 
    } 
    } 
    

    Do you have any ideas on how to get a beaver builder on the shop page?

    Jean

    1. Hey Jean, thanks for your comment! What error do you get on the white screen?

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

    1. 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 πŸ™‚

      1. Problem solved!
        ‘Infinite scrolling’ in the Jetpack plugin was active.

  107. 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!

    1. 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 πŸ™‚

  108. 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 ?

    1. Hey Tushar, thanks for your comment! I’m afraid I can’t help you for custom work – hope you find a fix soon πŸ™‚

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

    remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
    add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
    

    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:

    if ( is_shop() ) {
        remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
        add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
    }
    

    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.

    1. 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:

      
      add_action( 'init', 'bbloomer_move_cat_titles');
      
      function bbloomer_move_cat_titles() {
      if ( is_shop() ) {
          remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
          add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
      }
      }
      
      

      Let me know πŸ™‚

      1. 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 :

        echo woocommerce_get_product_thumbnail();

        So the other thought I had was to maybe override that woo function:

        add_action( 'woocommerce_after_shop_loop_item_title', 'adz_template_loop_product_thumbnail', 10 );
        
        function adz_template_loop_product_thumbnail() {
        	if ( is_shop() ) {
        		remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
        		echo woocommerce_get_product_thumbnail();
        	}
        }
        

        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.

        πŸ™

        1. 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 πŸ™‚

          1. Hi Rodolfo

            Well, in case I had a typo I tried the init approach again..

            /* Woo - Move category titles to above thumbnail */
            add_action( 'init', 'adz_move_cat_titles');
            
            function adz_move_cat_titles() {
            	if ( is_shop() ) {
            		remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
            		add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
            	}
            }
            

            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?

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

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

                πŸ™

                1. 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!

                  1. Hi Rodolfo

                    Think I had tried wp_head before too – but tried it again:

                    add_action( 'wp_head', 'adz_move_cat_titles');
                    function adz_move_cat_titles() {
                    	if ( is_shop() ) {
                    		remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
                    		add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
                    	}
                    }
                    

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

                    1. 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 πŸ™‚

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

    1. 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:

      
      <?php do_action( 'woocommerce_after_shop_loop' ); ?>
      
      

      Then, go to your functions.php and do what I said in the last comment.

      Let me know πŸ™‚

      1. Still no luck Rodulfo πŸ™

        I added the archive-products.php file into my child theme and added the

        <?php do_action( 'woocommerce_after_shop_loop' ); ?>

        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

        add_action( 'woocommerce_before_shop_loop','show_category_intro_TEST');

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

        1. Have you tried calling it differently e.g.

          
          <?php do_action( 'woocommerce_after_shop_loop_CUSTOM' ); ?>
          
          

          Then of course, you will need to use that hook in your add_action.

          1. Renaming it doesnt seem to work either. I added

            <?php do_action( 'woocommerce_after_shop_loop_CUSTOM' ); ?>

            to the very end of the archive-products.php file. is that the correct place for it? or should it be somewhere else?

            1. 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?

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

    1. 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?

      1. 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:

         
        <?php
        /**
         * The Template for displaying product archives, including the main shop page which is a post type archive.
         *
         * Override this template by copying it to yourtheme/woocommerce/archive-product.php
         *
         * @author 		WooThemes
         * @package 	WooCommerce/Templates
         * @version     2.0.0
         */
         
        global $theretailer_theme_options;
        
        global $wp_query;
        
        //woocommerce_before_main_content
        remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
        remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
        
        add_action( 'woocommerce_before_main_content_breadcrumb', 'woocommerce_breadcrumb', 20 );
        
        //woocommerce_before_shop_loop
        remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
        remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
        
        add_action( 'woocommerce_before_shop_loop_result_count', 'woocommerce_result_count', 20 );
        add_action( 'woocommerce_before_shop_loop_catalog_ordering', 'woocommerce_catalog_ordering', 30 );
        
        
        //woocommerce_after_shop_loop
        add_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );
        add_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
        
        
        
        ....
        
        ....
        
        

        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?

        1. 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 πŸ™‚

          1. Apologies, I added those lines, because they were not in there:

             
            //woocommerce_after_shop_loop
            add_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );
            add_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
            

            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:

             
            <?php
            add_action( 'woocommerce_after_shop_loop','show_category_intro');
               function show_category_intro() {
            	if ( is_product_category('silk-fabrics') ) {
            		echo 'This should only appear on the silk fabric category  pages';
            		}
               }
            

            I really appreciate you taking the time to reply to my question πŸ™‚

            1. 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:

              
              add_action( 'woocommerce_after_shop_loop','show_category_intro_TEST');
                 
              function show_category_intro_TEST() {
                 echo 'This is a test. This should show under ALL loop pages such as shop, cats and tags';
              }
              
              

              Let me know if this first test works!

              1. Hi Rodolfo
                This does not work for a category page…..works for shop
                Not sure what tags are

                1. These are for category pages as well, unless you’re using a custom template

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

    1. Kyle, thank you SO MUCH! You made my day & weekend already πŸ™‚

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

    1. 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!

      1. Here is the design link please check it and help me .

        https://prntscr.com/bayk2h

        Thank you

        1. 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 πŸ™‚

  114. 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? πŸ˜€

    1. 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!

      1. 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? πŸ™‚

        1. 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!

  115. hello Rodolfo. You know what!!?? Thank you very much!! i like it!!

    1. Thank you Olivier πŸ™‚ Much appreciated!

  116. Excellent resource! Thank you so much!!!

    1. Thank you Patty! Any particular request for the next Visual Guide?

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *