WooCommerce: Override Product Category Page Title

This is an interesting WooCommerce customization – as you know WordPress menus and widgets read whatever product category name and display it in the frontend.

Let’s say your product category title is “Tables”. This will show up in the navigation menu if you have set it up that way, in te breadcrumbs if you have any, in the sidebar category widgets, and as a title on the single product category page.

This is great and all, but what if your product category name is “Red Round Tables By Whatever Brandname“? As you can imagine, displaying this in a sidebar or navigation menu may be a little too much, while it’s fine to use it as a H1 on the single product category page for SEO reasons and enhanced readability.

So, the question is – how do we define an “alternative” product category name, so that this can be used on the product category page as custom title, while using the default one for other smaller locations such as menus and widgets?

Well, this is how it’s done – enjoy!

As you can see from this screenshot, I’ve assigned an alternative product category name of “Bloomer Armada: A Private Community for WooCommerce Developers” to the “Bloomer Armada” category. Now, the custom name appears as H1 on the single product category page, while the original name is preserved in the breadcrumbs, navigation menu items, sidebar widgets and product loop items.

PHP Snippet: “Alternative” Product Category Name

/**
 * @snippet       Second Category Title @ WooCommerce Product Category
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'product_cat_add_form_fields', 'bbloomer_add_category_alt_name' );

add_action( 'product_cat_edit_form_fields', 'bbloomer_edit_category_alt_name' );
 
function bbloomer_add_category_alt_name() { 
	echo '<div class="form-field">';
	echo '<label for="ctitle">Alternative title</label>';
	echo '<input type="text" id="ctitle" name="ctitle">';
	echo '</div>';
}

function bbloomer_edit_category_alt_name( $term ) { 
	echo '<tr class="form-field">';
	echo '<th for="ctitle">Alternative title</th>';
	echo '<td><input type="text" id="ctitle" name="ctitle" value="' . get_term_meta( $term->term_id, 'ctitle', true ) . '"></td>';
	echo '</tr>';
}

add_action( 'edit_term', 'bbloomer_save_category_alt_title', 10, 3 );
add_action( 'created_term', 'bbloomer_save_category_alt_title', 10, 3 );
 
function bbloomer_save_category_alt_title( $term_id, $tt_id = '', $taxonomy = '' ) {
	if ( 'product_cat' !== $taxonomy ) return;
	if ( isset( $_POST['ctitle'] ) ) {
		update_term_meta( $term_id, 'ctitle', $_POST['ctitle'] );
	} else {
		update_term_meta( $term_id, 'ctitle', '' );
	}
}

add_filter( 'woocommerce_page_title', 'bbloomer_edit_cat_page_title' );
 
function bbloomer_edit_cat_page_title( $title ) {
   if ( is_product_category() ) {
	   $term = get_queried_object();
	   $title = get_term_meta( $term->term_id, 'ctitle', true ) ? get_term_meta( $term->term_id, 'ctitle', true ) : $title;
   }
   return $title;
}

Where to add this snippet?

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

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

If you think this code saved you time & money, feel free to join 14,000+ WooCommerce Weekly subscribers for blog post updates or 250+ Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!

Rodolfo Melogli

Business Bloomer Founder

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

4 thoughts on “WooCommerce: Override Product Category Page Title

  1. Can we do this for breadcrumbs?

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

  2. Thank you for this one, this really is a problem in some categories. Very helpful. Can’t wait to see more! ­čÖé

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

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

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