Add a WYSIWYG Field to WooCommerce Product Category Page

UPDATE 13th Nov. 2015

WordPress 4.4 introduced custom term meta, which radically improves upon the method previously described by this post. Everything you see below uses the new custom term meta features in WordPress 4.4.

UPDATE 14th Dec. 2015

And in even bigger news – I’ve turned this implementation into a fully-fledged plugin for those of you who aren’t interested in coding.

It’s available now for the princely sum of $20… get it here.

(If you just want the code see here or here for the archived old code.)

If you’re selling a range of products online it’s likely those products appear in a number of categories.

Let’s assume I’m selling swords.

I might have some swords in a cutlasses category and I might have some swords in a rapiers category (every worthy musketeer’s sword of choice would be the rapier).

The opportunity

You’ve no doubt keyword optimised your 16th Century Ornate Rapier product and your 15th Century Crude Pirate’s Cutlass. Probably with the help of the WordPress SEO plugin. If you’re using WooCommerce (you should be) those products will sit at URLs that look similar to the following:

• www.yourdomain.com/shop/16th-century-ornate-rapier
• www.yourdomain.com/shop/15th-century-crude-pirates-cutlass

However, there are a couple of other URLs that you might not have considered for SEO purposes. These would be:

• www.yourdomain.com/shop/product-category/rapiers
• www.yourdomain.com/shop/product-category/cutlasses

These are the “archive” pages for the WooCommerce “product category” taxonomy.

As you can surmise from the URLs, these pages are great as search engine landing pages (pages optimised to rank well for specific search terms).

To continue our example, we could easily create an informative and authoritative page on rapiers at www.yourdomain.com/shop/product-category/rapiers. It could talk about the history of the rapier, the different styles that have appeared over the years and the principal sword smiths who made them.

All good content that Google loves. And tied to a URL that is highly relevant.

The problem

You can enter this content into the “description” field of the product category by going to your WordPress admin and navigating to Products > Categories > Your-Product-Category. Or if you’re logged in and you navigate to the category archive page in your online store, you should see “Edit Product Category” in the admin menu. Clicking that will take you to the same place.

But all this content might not even be displayed. And if it is, it probably appears above your list of products, pushing them way down the page (or below the fold to use the old print terminology).

This is because many themes don’t display taxonomy descriptions at all. You can update the description all you like and it will be nicely stored in the database, but it will never be rendered to your site’s visitors.

If you’re following WP Musketeer recommendations then you’re using a WooThemes or Genesis child theme. In which case the product category description will be displayed. However, it’s displayed above your list of products or sub-categories (you can display either on a WooCommerce category archive page). Even a small amount of content will push your products down the page where they can’t be seen.

The solution

We could unhook the description and move it below the products. Doing this would make no difference to Google and its brethren. However, doing this might sell your customers short.

We’re all here for our customers at the end of the day. Google is just a means to an end. All that authoritative content is great for Google but it’s also great for your customers. If you bury the content below a long list of products, your customers might not ever see it. They might not clock that you’re an informative expert in your industry and they might be tempted to check out one of your competitors instead.

Let’s get them to the content, make them feel comfortable with you as a trusted source and keep them on the page with your products, not your competitors.

To do this, we will:

• Leave the description field where it is
• Enter a short intro in the description field that points to more detailed info below the products
• Add a new WYSIWYG field to the product category
• Display this field on the product category archive page below the products

Get your hands dirty

We’re going to have to dip into the code to get this done, but we only have to edit one file – functions.php. All the code below can be added to the end of functions.php in your child theme.

Remember to ignore the opening <?php tag in the examples below. This will already be in your functions.php.

First things first

We need to let WordPress know that we’d like to store an extra bit of info along with our product category term data. These extra bits of info are known as meta data, and since we’re adding it to a taxonomy term, WordPress calls this “custom term meta”. It’s very easy to register our new meta field, let’s call it “details”:

We’re also adding a helper function to sanitize the content added to this new meta field before it is stored in the database.

Add a “details” field to the Add New Product Category page

Next, let’s add a text area to the product categories page that will let us enter extra juicy detail about a product category term as we create it. Because this form is quite narrow we won’t make it a full-on WYSIWYG visual editor. We’ll save that for in a moment.

This should mostly be self-explanatory if you’re up-to-speed with WordPress hooks. I’ll point out some of the more esoteric points though.

1. We are outputting a typical WordPress textarea admin metabox in our function, but the hook we are using is somewhat interesting. $taxonomy_add_form_fields is a magic function that hooks into the “add taxonomy” page for the taxonomy passed via $taxonomy. Here we’re targetting WooCommerce’s “product_cat” taxonomy.
2. The esc_html_e( 'Details', 'wpm' ); code is a way of internationalising a string. It allows you to provide a translation file for alternative languages. ‘Details’ could then be translated into the chosen language based on your visitor’s settings. You could just use echo 'Details'; instead.
3. The Nonce field is a piece of unique, hidden data that is passed to our save function (see below) that lets WordPress know the data being passed is genuinely from our app and not being injected remotely by sneaky hacking types.

Add a WYSIWYG “details” field to the Edit Product Category page

Next we’ll add the details field to the edit product category page. This time, because we’ve got more space, we’ll use a proper WordPress visual editor. That way you can use headings, blockquotes and include images and other media as if you were editing a page or post.

Again, I’ll just call out the less obvious parts:

1. wpm_sanitize_details( $product_cat_details ) calls our sanitize function from earlier. This in turn uses wp_kses_post(). We want to preserve HTML tags and other styling that might be applied in the visual editor, but we want to sanitise the really dodgy stuff. WordPress provides the wp_kses_post() function for just this eventuality.
2. wp_editor();. WordPress provides this function for rendering a textarea with the TinyMCE visual editor.

Save the details field content to the database

We need to save the details field when a product category is first added and after it has been edited.

Here we use two more magic hooks, create_$taxonomy and edit_$taxonomy. In either of these scenarios we call the same function to save the details meta field to the database.

Notice we are checking for the nonce fields we created in the previous two functions. Again, this is so WordPress knows our data is coming from a legitimate source.

Also notice the functions get_term_meta(), delete_term_meta() and update_term_meta(). These are inbuilt functions (new in WordPress 4.4) that handle meta information for terms in the same way get_post_meta() etc. have traditionally handled meta information for posts and pages.

Display the details field on the category archive page

The important bit is echo apply_filters( 'the_content', wp_kses_post( $details ) ); which outputs the contents of the WYSIWYG field after escaping things like html entities and removing slashes.

Here’s how it looks on www.print-2-media.com…

Credit where credit’s due

The original version of this article owed a huge debt to Pippin Williamson. The code was based on an article at Pippin’s Plugins. I modified it to use text areas and the WordPress visual editor and applied it specifically to WooCommerce product categories. Check out Pippin. He’s a WordPress plugin building beast!

This latest version of the article, altered to work with the new custom term meta capabilities of WordPress 4.4, was compiled with information gleaned from this article by Justin Tadlock. Thanks Justin!

That’s a wrap

So there we are. We’ve achieved the best of both worlds. We’ve kept our product category description intact at the top of the page (just a short paragraph) but we’ve also enabled authoritative, rich content below our products that Google and customers will love.

Let me know how you get on with this on your own WooCommerce sites. Leave a link in the comments or hit me up on Google+ or Twitter.