How to Edit WooCommerce Shop Page in Classic and Block Themes

To edit WooCommerce shop page content or layout, first check whether your theme is classic or block. That one check decides which tools work on your store and which ones do nothing.

We tested every method in this guide in October 2026 on a WooCommerce 11.2.1 test store running WordPress 7.1.3. One copy of the store used Storefront, a classic theme, and the other used Twenty Twenty-Five, a block theme.

You will learn five methods: the Customizer, the page editor, the Site Editor, hooks and a template override. You will also see why some edits never show up and how to fix that.

What Is the WooCommerce Shop Page?

The WooCommerce shop page is the page that lists every product visible in your catalog. WooCommerce assigns it under WooCommerce > Settings > Products in the Shop page dropdown. The product grid comes from a template instead of the page content. Editing the page alone rarely changes the grid.

WooCommerce creates this page during store setup and links it to your catalog. The WooCommerce pages documentation places the Shop page setting under Products. We confirmed that path on WooCommerce 11.2.1.

Leave that dropdown alone unless you build a new page for the catalog. The dropdown decides which URL prints the product grid. A wrong choice sends shoppers to an empty page.

Think of the page as a hook for the grid. The title and any text you type belong to the page, while the grid, the sorting menu and the pagination belong to a template. That split explains most shop page confusion.

Which Method Fits Your Theme?

Open Appearance in your dashboard to find your theme type. A classic theme lists Customize and Theme File Editor, while a block theme lists Editor and has no Customize link. That check decides which of the five methods below changes your shop.

On our classic test store, Storefront showed Customize and Theme File Editor under Appearance. Those two links belong to a classic theme, and they are the first sign that the Customizer exists.

Twenty Twenty-Five showed Themes, Editor and Fonts under Appearance. It had no Customize link. On a block theme, the Theme File Editor moves to the Tools menu, where we found it next to the Plugin File Editor.

Use this table to match your goal to a method:

Method	Works on	Best for	Code needed
1: Customizer	Classic themes	Products per row and default sorting	No
2: Page editor	Classic themes	Welcome text above the grid	No
3: Site Editor	Block themes	Grid layout, header and extra blocks	No
4: Hooks	Both types	Notices, labels and extra content	Yes
5: Template override	Classic themes	Changing the template markup itself	Yes

Method 1: Customize WooCommerce Shop Page Settings in the Customizer

The Customizer sets how a classic theme prints the catalog on the shop page. Go to Appearance > Customize > WooCommerce > Product Catalog to set the sorting and the grid size. That panel is missing on block themes, which use the Site Editor instead.

1. Open the Customizer: Go to Appearance > Customize on a classic theme such as Storefront.
2. Open the catalog panel: Choose WooCommerce and click Product Catalog.
3. Set the options: Pick what the shop displays and change the sorting, the products per row and the rows per page.
   
4. Publish: Click Publish to save the settings.

The Shop page display dropdown offers Show products, Show categories and Show categories & products. A second dropdown named Category display makes the same choice for product category pages.

The panel has no box named products per page. WooCommerce multiplies rows by products per row. We set Rows per page to 2 with 3 products per row. Our shop then showed 6 products and a pagination link because the test catalog holds 8 products.

Our test store started with 3 products per row and 4 rows per page. Say you want 12 products on each page with 3 per row: keep the rows at 4. Say you want 9 products instead: set the rows to 3.

Note: On our test store the default sorting reads “Default sorting (custom ordering + name)”. That means WooCommerce uses the custom order first and the product name second.

Method 2: Edit WooCommerce Shop Page Content With the Page Editor

You edit WooCommerce shop page content in Pages > All Pages, by opening the page assigned as your shop. On a classic theme, the blocks you add print above the product grid. On a block theme, the Product Catalog template wins. Those blocks stay hidden.

1. Open the page: Go to Pages > All Pages and edit the page named Shop.
2. Add your content: Insert a heading and a paragraph, such as a welcome message or a shipping note.
   
3. Save the page: Click Save and open the shop in a new tab.
   

On Storefront, our heading and paragraph printed above the sorting menu and the product grid. On Twenty Twenty-Five, the same blocks did not appear on the front end after saving.

That matches the WooCommerce Product Catalog documentation, which says the Product Catalog template takes priority over the Shop page. If you run a block theme, use Method 3 to add text.

Keep the text short on a classic theme. It prints above the sorting menu. A long block pushes the products down the screen. Our heading uses level 2 because the theme already prints the page title above it.

Method 3: Edit the WooCommerce Shop Page Template in the Site Editor

Block themes edit the shop layout in the Product Catalog template. Go to Appearance > Editor > Templates, choose WooCommerce and open Product Catalog. The template uses the Product Collection block for the product grid. You set the columns and the sorting there.

1. Open the Site Editor: Go to Appearance > Editor and choose Templates.
2. Find the template: Pick WooCommerce in the left list or search for Product Catalog and open it.
   
3. Select the grid: Click the Product Collection block. The sidebar shows the query type, the default sort, the layout and the columns.
   
4. Add your content: Insert a paragraph above the grid (such as a sale message).
   
5. Save and check: Click Save and open the shop in a new tab.
   

The block settings explain why shoppers can still filter. The default query type follows the current template. Sorting and filters keep working when you add blocks around the grid.

The columns setting works on the front end. On our test store, changing Columns from 3 to 2 gave a two column grid after we saved the template. We set it back to 3 afterward.

The template also holds a header and a footer, which show in the sidebar as shared parts. Edit those only when you want the change on every page that uses them.

The Templates screen says you can reset customizations made to the templates your theme supplies. Use that reset if a template edit goes wrong.

The WooCommerce Product Catalog documentation puts the key warning in a note. We boxed it below, since it explains why Method 2 fails on block themes.

Method 4: Change the Shop Page With Hooks

Hooks add content to the shop page without editing any template files. Attach a function to the woocommerce_before_shop_loop action in your child theme and wrap the output in is_shop(). That check keeps the notice on the main shop page only.

Here is the snippet we added to the child theme’s functions.php file:

add_action( 'woocommerce_before_shop_loop', 'mystore_shop_notice', 5 );

function mystore_shop_notice() {
	if ( is_shop() ) {
		echo '<p class="shop-notice">Free returns within 30 days.</p>';
	}
}

Use a WordPress child theme for this code. A parent theme update replaces its own files. Code added there disappears.

1. Open the file: Go to Appearance > Theme File Editor (Tools > Theme File Editor on block themes), pick your child theme and choose functions.php.
2. Paste the code: Add the snippet below the opening PHP tag.
   
3. Save the file: Click Update File and reload the shop page.
   

On Storefront, the notice printed once above the sorting menu. It did not appear on a product category page, because is_shop() is false there.

On Twenty Twenty-Five we ran the same function from a small test plugin. The notice printed inside the Product Collection block. This hook still fired on a block theme in WooCommerce 11.2.1.

The template file that renders the shop lists five hooks worth knowing:

• woocommerce_before_main_content: Opens the page wrapper and prints the breadcrumb.
• woocommerce_shop_loop_header: Prints the archive header and exists since WooCommerce 8.6.0.
• woocommerce_before_shop_loop: Prints notices, the result count and the sorting menu.
• woocommerce_after_shop_loop: Prints the pagination below the grid.
• woocommerce_after_main_content: Closes the page wrapper.

A priority number sets the order on one hook. Our snippet uses 5, which runs before the notices and the sorting menu at priorities 10 to 30.

Escape any dynamic value with esc_html() before you echo it. Our message is a fixed string. It needs no escaping.

Note: Themes can move hooks around. On Storefront, removing the core result count callback with remove_action() cut one of two result counts, but the sorting dropdown stayed. Storefront prints its own copies. Test every removal on your own theme.

If you want a store feature built around this page, our WooCommerce development services cover custom shop layouts and hooks.

Method 5: Override archive-product.php in a Child Theme

A template override replaces a WooCommerce template file with your own copy. Copy archive-product.php into a woocommerce folder inside your child theme and edit the copy. Use this method only when hooks cannot reach the markup you want to change.

The WooCommerce template structure documentation says to copy a template into a woocommerce folder in your child theme. It also warns that an override breaks if your theme has a woocommerce.php file.

1. Copy the file: Copy wp-content/plugins/woocommerce/templates/archive-product.php to your-child-theme/woocommerce/archive-product.php.
2. Edit the copy: Open it in Appearance > Theme File Editor and add your change, such as one echo line under the woocommerce_shop_loop_header hook.
   
3. Check the front end: Reload the shop page and look for your change.
   

We added one line, an echo after the woocommerce_shop_loop_header hook. The banner printed on the shop page, and WooCommerce > Status listed the file under Templates as an override.

The cost of an override is upkeep. The same documentation says WooCommerce core templates update while your custom overrides do not. Compare your copy with the plugin file after each major WooCommerce update.

Prefer a hook when one exists. A hook call stays valid across template changes, while a copied file can fall behind the original and miss new features.

How to Keep Your Shop Page Edits Safe

Back up your store, work in a child theme and keep a list of every change you make. Those three habits protect the shop page from theme updates and from your own mistakes. WooCommerce > Status also helps, because it lists every template override your theme carries.

A template or code mistake can break the shop page for every visitor. A fresh backup lets you return to the last working copy. Take one before you open any file editor.

Try risky changes on a staging copy first. Paste a hook snippet there, load the shop and a category page, and confirm nothing else moved. Then repeat the change on the live store.

After each WooCommerce update, open WooCommerce > Status and read the Templates section. On our test store it listed the single override we had made. That short list tells you which files to compare with the plugin copy.

Write down each change with its date and its method. A note such as “Customizer, rows set to 2” saves an hour of guessing when a plugin or theme update changes the shop later.

Why Your Shop Page Edits Do Not Show Up

Shop page edits usually fail for one of four reasons. A block theme template wins over the page, or the wrong page is assigned as the shop. A cache can serve an old copy, or a hidden product leaves the grid.

Work through the list in this order, and stop when the edit appears on your shop page.

• Block theme: Text added to the Shop page stays hidden on Twenty Twenty-Five. Add it in the Product Catalog template instead.
• Wrong page assigned: Open WooCommerce > Settings > Products and confirm the Shop page dropdown shows the page you edit.
• Old cached copy: Clear your caching plugin or CDN after each change and reload the shop in a private window.
• Theme override: A child theme can carry its own archive-product.php. Open WooCommerce > Status and read the Templates section to see which files override the plugin.
• Hidden product: A product set to Hidden in its catalog visibility leaves the shop grid.

We tested the last one on our test store. Setting one product to Hidden dropped the shop from 8 products to 7, and setting it back to visible restored all 8.

Tip: If a customization conflicts with a plugin, deactivate other plugins one at a time to find it. Our guide to checking for plugin conflicts walks through the steps.

Conclusion

To edit WooCommerce shop page layout, match the method to your theme. Classic themes use the Customizer, the page editor, hooks or an override, and block themes use the Product Catalog template in the Site Editor.

The biggest trap is typing into the Shop page on a block theme and seeing no change. Start in the template there, and keep PHP changes inside a child theme so updates do not erase them.

Looking for more shop upgrades? Our WooCommerce shortcodes guide shows how to place products on other pages.

Frequently Asked Questions (FAQs)