How to Override the WooCommerce Shop Page: A Beginner-Friendly Guide

The WooCommerce shop page is the heart of your online store, displaying your products in all their glory. But sometimes, the default layout just doesn’t cut it. You might want to tweak the design, change the product display, or add custom content to better reflect your brand and appeal to your customers. That’s where overriding the WooCommerce shop page comes in.

This guide will walk you through the process in a newbie-friendly, yet effective way. We’ll avoid technical jargon where possible and focus on practical examples.

Why Override the WooCommerce Shop Page?

Think of it like this: WooCommerce provides the foundation for your shop, but overriding allows you to put your personal stamp on it. Here are a few common reasons why you might want to override the shop page:

• Branding: Make the shop page consistent with your overall website design. Change colors, fonts, and layouts to match your brand identity.
• Improved User Experience: Optimize the product display for better browsing. Consider filtering, sorting, and product quick view options to improve customer satisfaction.
• Content Integration: Add introductory text, promotional banners, or calls-to-action to guide customers and boost sales. Imagine adding a banner showcasing a special offer at the top of your shop page.
• Custom Functionality: Integrate custom features like a product comparison tool or a wishlist.

Key Takeaway: Overriding allows you to tailor the shop page to achieve your specific business goals.

The Right Way: Using Theme Overrides

The safest and recommended method for customizing the WooCommerce shop page is by using theme overrides. This ensures that your changes won’t be lost when WooCommerce or your theme updates.

Here’s the breakdown:

1. Locate the Template Files: WooCommerce uses template files to structure its various pages. The shop page is often controlled by the `archive-product.php` template. This file might reside directly in the WooCommerce plugin directory, which we never want to edit directly!

2. Create a WooCommerce Folder in Your Theme: Inside your active WordPress theme directory, create a folder named `woocommerce`. If this folder already exists (common in WooCommerce-ready themes), you can skip this step.

3. Copy the Template to Your Theme: Copy the `archive-product.php` file (or related template Discover insights on How To Add A Brand H1 On Woocommerce like `content-product.php` which controls individual product display) from the WooCommerce plugin directory (`wp-content/plugins/woocommerce/templates/`) into the `woocommerce` folder you created in your theme.

4. Edit the Copied Template: Now you have a copy of the template file within your theme that you can safely edit. Open the file in your favorite code editor and start making your desired changes.

Example: Let’s say you want to add a simple welcome message at the top of your shop page. You would edit the `archive-product.php` file in your theme’s `woocommerce` folder.

 <?php /** 
The Template for displaying product archives, including the main shop page which is a post type archive
 
* This template 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 attempt to load the template file from your theme folder.
 
* See: https://docs.woocommerce.com/document/template-structure/
 
* @package WooCommerceTemplates
 
@version 3.4.0
 */ 

defined( ‘ABSPATH’ ) || exit;

get_header( ‘shop’ );

?>

Welcome to our Online Store!

<?php

/

* Hook: woocommerce_before_main_content.

*

* @hooked woocommerce_output_content_wrapper_start – 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

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’ );

Read more about How To Update Function-Child Woocommerce Single-Product Product-Image.Php

?>

<?php

get_footer( ‘shop’ );

In this example, we simply added a `

` tag with the text “Welcome to our Online Store!” within the main content area.

5. Check Your Shop Page: Visit your shop page to see your changes. You should now see the welcome message at the top.

Reasoning: By copying the template to your theme, you’re telling WooCommerce to prioritize the version in your theme folder. This ensures that your customisations are loaded instead of the default ones, and more importantly that your modifications will remain unaffected by plugin updates.

Using Hooks: A More Advanced Approach

For more complex customizations, consider using WooCommerce’s hooks system. Hooks allow you to insert your own code into specific locations without directly editing the template files.

Example: You want to add a custom banner below the product title on each product displayed on the shop page. You can use the `woocommerce_after_shop_loop_item_title` hook.

Add this code to your theme’s `functions.php` file (or a custom plugin):

 <?php /** 
Add a custom banner below the product title on the shop page.
 */ function my_custom_shop_banner() { echo '
Check out our new collection!
'; } add_action( 'woocommerce_after_shop_loop_item_title', 'my_custom_shop_banner' ); 

Reasoning: Hooks are more flexible and maintainable than directly editing template files. They allow you to add, remove, or modify elements without touching the core WooCommerce code.

A Word of Caution

• Backup Your Site: Before making any changes, back up your website! This allows you to restore your site if something goes wrong.
• Child Themes: If you’re using a premium theme, consider creating a child theme. A child theme inherits the functionality and styling of the parent theme but allows you to make customizations without modifying the parent theme’s files directly. This is crucial for ensuring your changes persist through theme updates.
• Code Carefully: Typos or errors in your code can break your site. Use a code editor with syntax highlighting and error checking. If you are not comfortable with PHP, seek assistance from a developer.
• WooCommerce Updates: After WooCommerce updates, double-check your customizations to ensure they still work as expected. Template changes in the new version of woocommerce may require modifications in your theme templates as well.