How to Override WooCommerce Category Page in WordPress: A Beginner’s Guide

So, you’ve built an awesome WooCommerce store, and you’re pretty happy with it. But that category page… It’s just not *quite* right, is it? Maybe you want to display products in a different order, add some extra content, or completely revamp the layout to match your brand. Fear not! Overriding the WooCommerce category page in WordPress is definitely achievable, even if you’re relatively new to WordPress development. This guide will walk you through the process, step-by-step, making it easy to understand and implement.

Why Override the WooCommerce Category Page?

Before we dive in, let’s quickly understand why you might want to do this in the first place. Here are some common reasons:

• Branding: The default WooCommerce category page might not perfectly align with your brand’s visual identity. Overriding it allows you to create a truly unique and engaging experience.
• Improved User Experience: You might want to change the layout to make it easier for customers to find what they’re looking for. Perhaps a different product grid, added filtering options, or better visual hierarchy.
• Enhanced Functionality: Adding custom features like related articles, size charts, or even interactive product selectors can greatly enhance the functionality of your category pages.
• SEO Optimization: Adding custom content, like a well-written introduction to the category, or optimized title tags, can dramatically improve your page’s search engine ranking.

Think of it like this: you’re running a high-end clothing store. The default category page is like a basic rack of clothes. Overriding it allows you to create a curated, visually appealing display that entices customers to browse and buy.

Method 1: Using the `archive-product.php` Template

The easiest and most common way to override the WooCommerce category page is by creating a custom template file in your theme. This is the recommended approach because it keeps your customizations contained and relatively easy to manage.

1. Access Your Theme’s Directory: Use an FTP client (like FileZilla) or your hosting provider’s file manager to access your WordPress installation. Navigate to the `wp-content/themes/your-theme-name/` directory. Replace `your-theme-name` with the name of the theme you’re currently using (ideally, a child theme – see note below!).

2. Create a `woocommerce` Directory (if it doesn’t exist): Inside your theme directory, create a new folder named `woocommerce`. This is where WooCommerce looks for overridden templates.

3. Copy `archive-product.php`: Navigate to the `wp-content/plugins/woocommerce/templates/` directory (this is the WooCommerce plugin directory). Locate the `archive-product.php` file and copy it to the `wp-content/themes/your-theme-name/woocommerce/` directory that you created earlier.

4. Edit `archive-product.php`: Now, open the `archive-product.php` file in your theme’s `woocommerce` directory. This is the file you’ll be modifying.

<?php
/**
Template for displaying the product archive page
* This can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
* HOWEVER, on occasion WooCommerce will need to update template files and you
(the theme developer) will need to copy the new files to your theme to
maintain compatibility. If you copy this file to your theme, WooCommerce
will notice and display a message that the template is out of date.
* @see https://docs.woocommerce.com/document/template-structure/
@package WooCommerceTemplates
@version 3.4.0
*/

defined( ‘ABSPATH’ ) || exit;

get_header( ‘shop’ );

/

* Hook: woocommerce_before_main_content.

*

* @hooked woocommerce_output_content_wrapper – 10 (outputs opening tags for the content)

* @hooked woocommerce_breadcrumb – 20

* @hooked WC_Structured_Data::generate_product_data() – 30

*/

do_action( ‘woocommerce_before_main_content’ );

?>

<?php

/

* Hook: woocommerce_archive_description.

*

* @hooked woocommerce_taxonomy_archive_description – 10

* @hooked woocommerce_product_archive_description – 10

*/

do_action( ‘woocommerce_archive_description’ );

?>

<?php

if ( woocommerce_product_loop() ) {

/

* Hook: woocommerce_before_shop_loop.

*

* @hooked woocommerce_output_all_notices – 10

* @hooked woocommerce_result_count – 20

* @hooked woocommerce_catalog_ordering – 30

*/

do_action( ‘woocommerce_before_shop_loop’ );

woocommerce_product_loop_start();

if ( wc_get_loop_prop( ‘total’ ) ) {

while ( have_posts() ) {

the_post();

/

* Hook: woocommerce_shop_loop.

*/

do_action( ‘woocommerce_shop_loop’ );

wc_get_template_part( ‘content’, ‘product’ );

}

}

woocommerce_product_loop_end();

/

* Hook: woocommerce_after_shop_loop.

*

* @hooked woocommerce_pagination – 10

*/

do_action( ‘woocommerce_after_shop_loop’ );

} else {

/

* Hook: woocommerce_no_products_found.

*

* @hooked wc_no_products_found – 10

*/

do_action( ‘woocommerce_no_products_found’ );

}

/

* Hook: woocommerce_after_main_content.

*

* @hooked woocommerce_output_content_wrapper_end – 10 (outputs closing tags for the content)

*/

do_action( ‘woocommerce_after_main_content’ );

get_sidebar( ‘shop’ );

get_footer( ‘shop’ );

5. Make Your Changes: This is where the magic happens! You can now modify the `archive-product.php` file to achieve your desired changes. Important: Familiarize yourself with PHP and WordPress templating before making extensive changes.

• Example: Adding custom content before the product loop:

<?php
// Add this right after the opening header tag: 

echo ‘

‘;

echo ‘

Welcome to our amazing category! Find the perfect items for you here.

‘;

echo ‘

‘;

if ( woocommerce_product_loop() ) { // The rest of the original code continues here…

• Example: Changing the number of products per row (requires CSS changes as well):

You’d need to modify the WooCommerce loop start, potentially combined with CSS rules to alter the grid layout. This is a more complex change. You might achieve this with a combination of PHP and CSS. For a basic approach, you’d need to dive into the `woocommerce_before_shop_loop` action and potentially alter the loop’s parameters. This often involves filtering the `woocommerce_product_columns` option.

// In functions.php of your child theme:
add_filter( 'loop_shop_columns', 'override_woocommerce_columns' );
function override_woocommerce_columns( $columns ) {
return 3; // Display 3 products per row
}

Important: This will change the number of columns, but you may need to adjust the CSS to ensure the products display correctly.

6. Save and Upload: Save your changes to the `archive-product.php` file and upload it back to your theme’s `woocommerce` directory.

7. Test Your Changes: Visit your WooCommerce category page in your browser. You should see the changes you made reflected on the page. If something breaks, carefully review your code for errors.

Method 2: Using Category-Specific Templates (Advanced)

For even more granular control, you can create specific templates for individual product categories. This allows you to customize the layout and content based on the category being displayed.

1. Create a Category-Specific Template: Create a file named `taxonomy-product_cat-slug.php` in your theme’s `woocommerce` directory, where `slug` is the *slug* of your product category. For example, if you have a category with the slug “shoes”, the file name would be `taxonomy-product_cat-shoes.php`.

2. Copy and Modify: Copy the contents of `archive-product.php` into your new `taxonomy-product_cat-slug.php` file. Then, make the specific changes you want for *that particular* category.

3. Test: Visit the category page for “shoes” (or whichever category you used). You should now see the specific layout defined in your `taxonomy-product_cat-shoes.php` file.

Reasoning: This method allows you to have totally different layouts for different categories. Imagine a “Shoes” category with a large product display versus a “Accessories” category which is a list view.

Important Considerations:

• Child Themes are Crucial: Always, always, always make changes within a child theme. If you modify the parent theme directly, your changes will be overwritten when the theme is updated. A child theme inherits the styling and functionality of the parent theme, but allows you to make modifications without affecting the original files. Creating a child theme is outside the scope of this article, but there are many readily available tutorials.
• WooCommerce Updates: WooCommerce updates can sometimes affect template files. Regularly check for updates and be prepared to review and update your custom templates to ensure compatibility. WooCommerce will usually display a warning message in your dashboard if your overridden templates are outdated.
• Hooks and Filters: WooCommerce uses a system of “hooks” and “filters” that allow you to modify its behavior without directly editing template files. Learning about hooks and filters is a more advanced topic, but it’s a powerful way to customize WooCommerce. Often, less invasive changes are best made with hooks.
• Debugging: If something goes wrong, turn on WordPress debugging mode. This will display PHP errors, making it easier to identify and fix problems. You can enable debugging by adding these lines to your `wp-config.php` file:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_DISPLAY', true ); // Display errors on the page

• CSS: Remember that sometimes changes to the PHP structure require corresponding CSS changes. Be prepared to write or modify CSS to achieve your desired look and feel.