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