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.5.7
 * @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.

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

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

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