WooCommerce: Add a Second Content Box @ Product Category Pages

In terms of SEO, if you’re trying to rank your product category pages, you really need to make the most of the default WooCommerce product category “description” and “thumbnail”. Most themes, if compatible with WooCommerce, will show this content right below the product category name and above products.

Nothing new so far. But what if you want to add another piece of content below the category products while also keeping the default description? Well, we’d need to customize the edit category page and display a new text editor field, save it, and finally display it where we want. So, here’s how they do it!

Add a second description / content area to the WooCommerce product category pages

PHP snippet: Show Additional Content @ Product Category Pages

/**
 * @snippet       Add new textarea to Product Category Pages - WooCommerce
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.6.3
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */	

// ---------------
// 1. Display field on "Add new product category" admin page

add_action( 'product_cat_add_form_fields', 'bbloomer_wp_editor_add', 10, 2 );

function bbloomer_wp_editor_add() {
    ?>
    <div class="form-field">
        <label for="seconddesc"><?php echo __( 'Second Description', 'woocommerce' ); ?></label>
		
		<?php
		$settings = array(
			'textarea_name' => 'seconddesc',
			'quicktags' => array( 'buttons' => 'em,strong,link' ),
			'tinymce' => array(
				'theme_advanced_buttons1' => 'bold,italic,strikethrough,separator,bullist,numlist,separator,blockquote,separator,justifyleft,justifycenter,justifyright,separator,link,unlink,separator,undo,redo,separator',
				'theme_advanced_buttons2' => '',
			),
			'editor_css' => '<style>#wp-excerpt-editor-container .wp-editor-area{height:175px; width:100%;}</style>',
		);

		wp_editor( '', 'seconddesc', $settings );
		?>
		
        <p class="description"><?php echo __( 'This is the description that goes BELOW products on the category page', 'woocommerce' ); ?></p>
    </div>
    <?php
}

// ---------------
// 2. Display field on "Edit product category" admin page

add_action( 'product_cat_edit_form_fields', 'bbloomer_wp_editor_edit', 10, 2 );

function bbloomer_wp_editor_edit( $term ) {
    $second_desc = htmlspecialchars_decode( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) );
    ?>
    <tr class="form-field">
        <th scope="row" valign="top"><label for="second-desc"><?php echo __( 'Second Description', 'woocommerce' ); ?></label></th>
        <td>
            <?php
			
			$settings = array(
				'textarea_name' => 'seconddesc',
				'quicktags' => array( 'buttons' => 'em,strong,link' ),
				'tinymce' => array(
					'theme_advanced_buttons1' => 'bold,italic,strikethrough,separator,bullist,numlist,separator,blockquote,separator,justifyleft,justifycenter,justifyright,separator,link,unlink,separator,undo,redo,separator',
					'theme_advanced_buttons2' => '',
				),
				'editor_css' => '<style>#wp-excerpt-editor-container .wp-editor-area{height:175px; width:100%;}</style>',
			);

			wp_editor( $second_desc, 'seconddesc', $settings );
			?>
		
            <p class="description"><?php echo __( 'This is the description that goes BELOW products on the category page', 'woocommerce' ); ?></p>
        </td>
    </tr>
    <?php
}

// ---------------
// 3. Save field @ admin page

add_action( 'edit_term', 'bbloomer_save_wp_editor', 10, 3 );
add_action( 'created_term', 'bbloomer_save_wp_editor', 10, 3 );

function bbloomer_save_wp_editor( $term_id, $tt_id = '', $taxonomy = '' ) {
	if ( isset( $_POST['seconddesc'] ) && 'product_cat' === $taxonomy ) {
		update_woocommerce_term_meta( $term_id, 'seconddesc', esc_attr( $_POST['seconddesc'] ) );
	}
}

// ---------------
// 4. Display field under products @ Product Category pages 

add_action( 'woocommerce_after_shop_loop', 'bbloomer_display_wp_editor_content', 5 );

function bbloomer_display_wp_editor_content() {
	if ( is_product_taxonomy() ) {
		$term = get_queried_object();
		if ( $term && ! empty( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) ) ) {
			echo '<p class="term-description">' . wc_format_content( htmlspecialchars_decode( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) ) ) . '</p>';
		}
	}
}

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a 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.

18 thoughts on “WooCommerce: Add a Second Content Box @ Product Category Pages

  1. Thanks for this but for some reason it’s not showing up on my category page.

  2. Hi Rudolfo.

    The second discription editor appear in the category-editing site, but text is not visible on the category-site ?

    /Henning

    1. Hi Henning, thanks for your comment! I just tested this again with Storefront theme and it works perfectly. Maybe your theme (or another plugin) is messing/conflicting with my snippet?

      To troubleshoot, disable all plugins but WooCommerce and also switch temporarily to “Twentyseventeen” theme (load the snippet there in functions.php) – does it work? If yes, you have a problem with your current theme or one of the plugins.

  3. The content in the second description appears on pages 2,3,4, etc for the category. How do i just set it to show on the first page of the category?

    1. Hello Rich, 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!

  4. Have been trying to add an additional text area using ACF and Elementor but unfortunately, Elementor does not support ACF in Woocommerce yet!

    Would be good if it had a [shortcode] and it could then be added in Elementor or another page builder anywhere on the page or indeed any page, rather than be fixed below the product listings. Will is still appear if no product display? Give it a try is the answer 🙂

    A [shortcode] is a wishlist item as it works a treat and solved a major headache had for last few weeks! Thanks.

    1. Hey Rob, 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!

  5. Great, I have applied it to my website. Thanks.

    1. You’re welcome!

  6. Hi. First of all thank you for your great work! Your site is my favorite for WP.

    Could you please tell me how to do the same second content box for tags?

    1. Hi Max, 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!

  7. Hi Rodolfo

    First I love receiving your newsletter including ideas to finetune my webshop. And it’s interesting to read the new part what you’re working on at the moment…

    Back to my comment.

    I tried this snippet, and find it very nice to put in a SEO description text, but there’s a small issue – for now I’m trying to adapt it with the WPAstra theme and here I find that pagination is placed after the second desription, which is a problem because “nobody” scroll down after the bottom text.

    Could you suggest a solution for this?

    Thanks

    //Best regards
    Jan

    1. Hey Jan, try playing with the “priority” on “woocommerce_after_shop_loop”. Change 5 into something different

    2. Hey again

      Well I solved this issue by increasing the number of products pr. page to 200. I’m not sure if pageload time then will be longer, even though I use “lazy load” and “infinite scroll”.

      Best regards
      Jan

    3. Cool!

  8. Great! Amazing solution! However… I was wondering, is it possible to replace the default text editor for first original Description field with TinyMCE editor (Yes – I know, there is plugin(s) for that, but… 😉 )? This is always something more than raw text for SEO and clients.

    1. Hey there, thanks so much for your comment! Yes, this is possible – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.