By default, WooCommerce displays Product Category content above the products which are listed. Which is fine in many cases, although when you want to add in more than a couple of hundred words here, the Product Category page on WooCommerce soon pushes all of the actual products below the fold which isn’t that useful for a user. As such, you may want to add more content beneath the product listings to allow you to add more content to the page for users.
Firstly, whenever you are editing WooCommerce template files, make sure you are doing this correctly via your Child Theme to override WooCommerce template files. The file you need to edit (at the time of writing, this may change…) is archive-product.php. Copy this file from your /Plugins/WooCommece/Templates/ folder into your /Theme-Child/woocommerce/ folder.
Add Custom Field
To start with, the first thing to do is to use the Advanced Custom Fields plugin to add a custom field which is triggered only when: Taxonomy Term, is equal to, Product Categories. See the ‘Location’ heading when adding the custom fields. Let’s assume you’ve added a WYSYWIG editor for the purposes of this guide. You can add any type of field you like here which is handy.
Once set this Custom Field up correctly, you will now see this field display in the Product Category admin screen where you can add additional content to this section. Once you have added content here, the next step is to display this content to the user on the front end of the website.
Display Custom Field Content – archive-product.php
Back to the archive-product.php file. Add the following piece of code beneath where you see the code;
<?php /*** woocommerce_after_shop_loop hook. ** @hooked woocommerce_pagination - 10 */ do_action( 'woocommerce_after_shop_loop' ); ?>
Add this code to display the custom field;
<?php
$term_id = get_queried_object()->term_id;
$post_id = 'product_cat_'.$term_id;
$custom_field = get_field('woocommerce_product_category_page_bottom_description', $post_id); // My Advanced Custom Field Variable
?>
<br>
<div><?php echo $custom_field; ?> </div> <?php // Get Advanced Custom Field Value ?>
The ‘woocommerce_product_category_page_bottom_description’ text above is what your Custom Field is named as that you created previously. If you have used a different name, replace this here.
Display Custom Field Content – functions.php
Alternatively if you would prefer not to edit child-WooCommerce files, then you can add the following code to your function.php in your Child Theme which will add the following action onto the ‘woocommerce_after_shop_loop’ hook;
function action_woocommerce_after_shop_loop() {
$term_id = get_queried_object()->term_id;
$post_id = 'product_cat_'.$term_id;
$custom_field = get_field('woocommerce_product_category_page_bottom_description', $post_id); // My Advanced Custom Field Variable
echo $custom_field;
};
add_action( 'woocommerce_after_shop_loop', 'action_woocommerce_after_shop_loop', 10, 2 );
Display
View the Product Category page and you’ll soon have added this extra piece of information to your Product Category page which you can use as you like. This will display the content beneath the paginated links. Place the above content elsewhere to suit your needs if you want something different.
Michael Cropper
Hello Michael.
I’m trying to follow your guide but I can’t get the Advanced Custom Field to display the field on the product category page. Can you specify a little more about what you actually did in “Add Custom Field” section.
Hi Rasmus,
Have you successfully added the Custom Field? And added the code sample to your functions.php or the archive-product.php file? If so, make sure the names you have given the Custom Fields match.
Regards,
Michael
it is not working
What problem are you having? Provide a few more details and I’ll see if I can point you in the right direction. The code works out of the box, so I’d have to guess that the reason it’s not working for you is because either you’ve not implemented it correctly or because of a conflict somewhere else. Take a look through this handy guide, https://www.contradodigital.com/2016/08/12/how-to-debug-wordpress-problems/
Thank you!
I was loosing hope to find an answer to excatly same situation you did.
This still works flawlessly. Just make sure you’re altering a child theme!
Glad to hear 🙂 And yes, always editing things like this in child themes! People only make this mistake once 🙂
Working fine Thanks…
Hi,
I was able to insert your code into my functions.php….text is shown in my product catergory…that´s cool so far but the is in between the “product-wrap” and the “view-switcher (toogleGrid…toggleList)”. I want the text after the “view-switcher” and not before. This might confuse the customer.
You can see it on my test-shop:
http://testshop.golfball-uhu.de/produkt-kategorie/golfballfinder/
Best Regards
René
Glad you got this working. The behaviour you’re seeing is due to how your Theme is built. The default WooCommerce page template that controls the Product Category is called, taxonomy-product_cat.php. See here for details and how to customise these files in the correct way, https://docs.woocommerce.com/document/template-structure/. Make sure you do not edit the WooCommerce plugin template files directly or you will lose your changes when you update WooCommerce. Follow the guidelines by placing any WooCommerce template files that you want to overwrite into your Child Theme in the correct way.
Hope that helps.
Regards,
Michael
Hi Michael,
I figured it out…it´s now where I want to have it. Any idea how I could the same thing to work for product attributes like “brand”!? Because my order by product filter is “product-category” like golf ball…an then “product-attribute” like “brand”!?
Best Regards
René
Hi! This works great (thanks!) except on my “Shop” page that displays the two category types I have set up, I am getting the following error message:
Notice: Undefined property: WP_Post_Type::$term_id in /Users/bbelindi/Sites/wpWIR/wp-content/themes/storefront-child/woocommerce/archive-product.php on line 73
The individual category pages display the CPT correctly and do not give me any error messages.
Any ideas?
Thanks!!
Melinda
That sounds like a coding bug somewhere on that page. What this error message is telling you is that the $term_id property of the WP_Post_Types object is not defined when you are trying to access it on line 73. You’ll need to trace this back through the code to see why this isn’t being set correctly. With this being on a WooCommerce “child-plugin” setup, I’d first check that the file you started working on in there is still compatible with the latest version of WooCommerce. I’ve seen these get out of sync in the past when code in the child-plugin was relying on a property being set from an older version of WooCommerce. The easiest way to debug this is to replace the archive-product.php file with the latest version, then start to migrate code over chunk by chunk.
Hope that helps
Regards,
Michael
Thanks for getting back to me! I get what the error message is telling me (or at least it means that property is not defined). I am just unclear as to why the error message only appear on the “Shop” page (which is the archive page for the two categories I have set up) and doesn’t appear on the individual category pages. The CFs show up fine.
To solve my problem, I copied the archive-product.php file with your code over the taxonomy-product_cat.php file (the template file for the individual category pages) since that file was just using the archive-product page as its template anyway. Then, I deleted your code from the archive-product page file (and left it in taxonomy-product_cat.php).
That seemed to do the trick without causing any other issues.
Do you know of any issues caused by my fix?
Thanks again!!!
Melinda
Thanks for providing this – I followed the steps as outlined and do have one question. In your example, you mentioned inserting the new code snippet right after, ”
/*** woocommerce_after_shop_loop hook.
** @hooked woocommerce_pagination – 10
*/
do_action( ‘woocommerce_after_shop_loop’ );
?>”
For the site I am using this on, the woo_after_shop_loop hook reads,
“/**
* Hook: woocommerce_after_shop_loop.
*
* @hooked woocommerce_pagination – 10
*/
do_action( ‘woocommerce_after_shop_loop’ );
} else {
/**
* Hook: woocommerce_no_products_found.
*
* @hooked wc_no_products_found – 10
*/
do_action( ‘woocommerce_no_products_found’ );
}”
In this particular case, where do you suggest placing the code snippet? I tried several variations without success.
Thanks
Tim
Hi Tim,
You’d have to have a test of various options with the theme you are using. Every theme is completely different so it’s difficult to provide useful advice for this specific question.
Regards
Michael
Hi Michael big thanks because finaly i have found an good website and answer on internet for this solution.
Can you also tell me why the extra text is not compatible for Yoast seo or does not count voor extra words and seo?
Big thanks!
Hi Ron,
Glad this guide helped you get this working. With regards to it not being compatible with Yoast SEO in relation to the Word Count and SEO Traffic Light System that is in Yoast – that’s correct, it won’t be. Since you have essentially added a custom field to your site, this will not be automatically detected and picked up by Yoast. The only way to make this happen is to ignore the information within this guide about adding a custom field and instead add a custom field using the Advanced Custom Fields plugin which has only recently become compatible with Yoast, see here: https://kb.yoast.com/kb/advanced-custom-fields-plugin-compatibility/. Personally though, I wouldn’t bother. The Yoast SEO Word Count and SEO Traffic Light System are purely visual aids to prompt people to do better. If you have great content anyway, then you’re going in the right direction – regardless of what the Yoast SEO plugin says. I always say to people to use the information within Yoast SEO as a guide not as a hard rule, i.e. just because everything isn’t green and everything isn’t about x00 words doesn’t mean that your SEO is bad – SEO is part of a wider strategy, so use the information within Yoast as a guide.
Hope that helps 🙂
Regards,
Michael
Hi Michael, I use your code in my functions.php file and works perfectly, but I need to remove the default content from product category pages. Do you know any code to do it?
Many thanks!
Hi Godei,
You’d need to look at the relevant PHP file that is controlling the content on the default product category pages and remove the specific section of code that you want to stop displaying on the front end. Hope that helps.
Regards,
Michael
Can the extra field be applied to the canonical page or page 1 only (if there are paginations we’ll have duplicate content issues.
Hi Daz,
Yes, it can be. I can’t recall off the top of my head exactly how you do this though. On a quick search it looks like something like this should do the job (note, I’ve not tested this code…);
// get current page we are on. If not set we can assume we are on page 1. $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; // are we on page one? if(1 == $paged) { //true }I could not get the code to work in archive-product.php, however, adding the code to the top of the functions.php worked.
Many thanks for your advice and tutorial 🙂
Hi Michael,
thanks for the tutorial, however it’s not working for me 🙁
I installed the plugin, created a custom field (can see it in the admin area) and put some text inside. As I can’t find the code in my archive-product.php, I decided to try with functions.php. I copied the snippet but nothing shows up on the front end.
I’m using the Newspaper theme by tagDiv with Woocommerce installed.
Any ideas?
Thanks!
Hi Stephan,
Sounds like something weird is going on with your theme. Common problems when themes aren’t built that well. I’d recommend contacting the theme developer to see if they can point you in the right direction as this works out of the box. Hope that helps to gets you going in the right direction.
Regards,
Michael
Thank you
Hey,
Nice tutorial, Work and I like it!
But If I want to add the custom field after the pages numbers of category, what I need to change in the code?
I mean if I have 60 products, and every page I have 12 products, so I have 5 pages of the category, and in the bottom I have transfer to page (2.3.4.5).
but in your tutorial the field show before the transfer to next pages.
How I can set the field after the next pages?
Thank you!
Hi Elad,
Glad you found the post helpful. Take a look through the code within your theme, you should see a line of code that outlines how the pagination works. Just place the code beneath there. Sorry I can’t be more specific, every theme is different. Have a good look around, it should hopefully become clear with a bit more looking 🙂
Regards,
Michael
Thanks. This post was a great help to me. One question though: it worked perfectly with an ACF text field, but when I tried with an image field, and changed the last line of the code to display the custom field to this:
<img src="”>
the page served out:
I tried with the image field set as Image Array, Image URL and Image ID but no luck. Any suggestions on how to get around this? Thanks again.
Hi Luke,
Glad you found the post helpful. On the face of things, I’m not too sure why the image URL didn’t work as that should just work in the exact same way. Without seeing the code you’re using it’s difficult to say for sure, so I’d recommend the usual debugging steps to simply output the image URL to the screen in a standard paragraph text. My gut feeling is that you’ve probably coded it wrong and it isn’t generating the correct URL for the image and hence why it isn’t displaying. Double check the image URL in your media library.
Hope that helps to get you going in the right direction.
Regards,
Michael
It’s working fine. It saves me time. Thank you for the tutorials.
The functions.php method worked a treat! Thank you!