Add custom page header in WooCommerce

Adding a custom page header in WooCommerce archive views allows to promote your most important content or guide your visitors to key content in a shop.

By default, WooCommerce products archive page displays a list of products along with the page header section, shown above the list. Often, the page header section includes breadcrumbs, title, description and sorting options.

In this article, you will learn how to add a custom section to the page header in WooCommerce archive (products) views.

Custom page header in all WooCommerce products views

WooCommerce comes with some pre-defined hooks which allow to customize the plugin’s templates without a need to modify them. All you need to do is to add a custom code to a WordPress site.

To display a custom page header section in WooCommerce products views, you can use woocommerce_archive_description hook.

Hooks in WordPress provide an ability to change or add code without editing core files.

Here is an example of adding a custom page header section to all WooCommerce products pages:

/**
 * Display custom page header section on WooCommerce products page.
 */
function themesharbor_add_custom_banner_category_page() {
	?>
	<div class="shop-promo">
	Your banner HTML code goes here.
	</div>
	<?php
}
add_action('woocommerce_archive_description', 'themesharbor_add_custom_banner_category_page');

Also, you can use WooCommerce conditional tags to display your custom section on a specific page in archive views.

Here is an example of adding a custom page header section to WooCommerce products category pages only:

/**
 * Display custom page header section on WooCommerce products page.
 */
function themesharbor_add_custom_banner_category_page() {
	//display only on category pages
	if ( ! is_product_category() ) {
		return;
	}
	
	?>
	<div class="shop-promo">
	Your banner HTML code goes here.
	</div>
	<?php
}
add_action('woocommerce_archive_description', 'themesharbor_add_custom_banner_category_page');

Note, this hook runs after the page title. That is why your custom section is displayed below the page title in archive views.

Display custom section above page title

If you want to show a custom section above the page title in products views then you need to customize templates in your theme.

Note, it’s highly recommended to use a child theme when making custom change to templates.

Theme with woocommerce.php

Since I am using the Matthew theme to create a professional looking online store, I only need to modify woocommerce.php file, located in a root folder of the theme.

This file contains woocommerce_content() function. It is one of the solutions to display all WooCommerce taxonomies and post types in WordPress.

So, after copying woocommerce.php file to a child theme, I added a custom code above woocommerce_content() in order to display a custom section above the page title.

Here is an example of a custom code I used to display a custom banner section above the page title in category products views:

<?php if ( is_product_category() ) : ?>
<div class="shop-promo">
Your banner HTML code goes here
</div>
<?php endif; ?>

<?php woocommerce_content(); ?>

Theme without woocommerce.php

If your theme does not have woocommerce.php file along with woocommerce_content() function then you need to override the template templates/archive-product.php, located in the WooCommerce plugin.

But before making any changes to the template, you may try first to use woocommerce_before_main_content hook to display a custom content above the page header.

Simply add this custom code to your WordPress site:

/**
 * Display custom section above page title on WooCommerce products page.
 */
function themesharbor_add_custom_banner_category_page() {
	?>
	<div class="shop-promo">
	Your banner HTML code goes here.
	</div>
	<?php
}
add_action('woocommerce_before_main_content', 'themesharbor_add_custom_banner_category_page', 30);

If this solution does not work then you need to override the template.

So, copy archive-product.php template to your child theme and add it to woocommerce folder.

Create this folder in a child theme if it does not exist. Also, make sure to keep the same file structure but removing the templates sub-directory.

In other words, your woocommerce folder, in a child theme, should contain archive-product.php file. Refer to official documentation to learn how to edit WooCommerce templates.