Contrado Digital

How to a Add Custom Field to WooCommerce Product Category Pages to Display Content Below Products

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.

The following two tabs change content below.

Michael Cropper

Founder & Managing Director at Contrado Digital Ltd
Michael has been running Contrado Digital for over 10 years and has over 15 years experience working across the full range of disciplines including IT, Tech, Software Development, Digital Marketing, Analytics, SaaS, Startups, Organisational and Systems Thinking, DevOps, Project Management, Multi-Cloud, Digital and Technology Innovation and always with a business and commercial focus. He has a wealth of experience working with national and multi-national brands in a wide range of industries, across a wide range of specialisms, helping them achieve awesome results. Digital transformation, performance and collaboration are at the heart of everything Michael does.
Exit mobile version