How to Edit the WooCommerce Shop Page: 4 Methods Explained

Editing the WooCommerce shop page takes less than 15 minutes once you know which method matches your setup. The catch is that most store owners start in the wrong place entirely.

Having built and supported WooCommerce stores for years, we see the same confusion repeat: someone opens the page editor, adds content, saves it, and wonders why nothing changed on the front end.

This guide covers four methods on how to edit the WooCommerce shop page, from the no-code WooCommerce Settings panel to hooks and child theme customisation.

You will learn which method applies to your theme type, what the block editor and Full Site Editor can each do, and how to fix the most common shop page problems.

What Is the WooCommerce Shop Page?

The WooCommerce shop page is an archive page that automatically displays all published products in your store. It is not a standard WordPress page you fill with content. Instead, WooCommerce generates the product loop dynamically and attaches it to whichever page you assign as your shop page in the settings.

This matters because it changes how you edit it. Opening the page in the block editor and adding blocks will place that content above the product loop, not instead of it. The loop itself comes from WooCommerce’s archive-product.php template file. Understanding this saves a lot of troubleshooting time.

Why Editing the Shop Page Is Not as Simple as Editing a Regular Page

When you install WooCommerce, it creates a page called “Shop” and assigns it automatically. That page has no real content. Its job is just to tell WooCommerce where to render the product catalog.

So when people say “edit the shop page,” they usually mean one of three different things: changing the layout, changing what products display and in what order, or adding content like banners or headings above the product grid. The method you need depends on which of those you are trying to do.

Before You Edit: Choose the Right Method for Your Setup

Here is where most guides skip ahead too quickly. The right method depends on your theme type, your technical comfort level, and what you actually want to change.

Worth knowing before you go further: if you are on a classic theme like Flatsome or OceanWP, the Full Site Editor is not available to you. Many tutorials skip this detail, which leads to a lot of frustrated searching.

Method 1: WooCommerce Settings (No Code, All Themes)

This is the starting point for every store. It controls the most fundamental shop page behaviour without touching a single line of code.

Method 2: Block Editor and WooCommerce Blocks (No Code, Classic Themes)

This lets you add content above your product grid using the Gutenberg editor. Think banners, headings, featured product sections, and category lists.

Method 3: Full Site Editor (No Code, Block Themes Only)

This gives you full template-level control over how the shop page looks. You can reposition the product grid, adjust the header layout, and redesign the page structure entirely. Only available on block themes.

Method 4: Hooks and Child Theme (Developers)

This is the correct long-term approach for any modification that is not covered by the first three methods. It keeps your changes updated and safe and does not require editing core WooCommerce files.

How to Edit the WooCommerce Shop Page Using WooCommerce Settings

Start here regardless of your theme. These settings control product display across the entire shop, and most store owners never configure them properly.

Steps:

1. Go to WooCommerce > Settings > Products
2. Confirm the correct shop page is assigned: Under “Shop page,” a dropdown lets you select which WordPress page WooCommerce uses as your shop. If this is set to the wrong page, or to nothing at all, your shop will not display correctly.
3. Go to Appearance > Customize > WooCommerce > Product Catalog. Here, you control three things that directly affect how your shop looks:
   • Default product sorting: sets how products appear when the page loads (newest, price, popularity, rating, or custom order)
   • Products per row: how many columns appear in the grid
   • Rows per page: how many rows display before pagination

A note from support: the default product sort order setting is often overlooked during setup. “Custom ordering + name” is the default, which means products appear in whatever order they were added unless you have manually sorted them. If your best-selling items are buried on page three, check this setting first.

How to Edit the WooCommerce Shop Page with the Block Editor

This method adds content above the product loop on your shop page. It is the right choice if you want to include a welcome heading, a category list, a banner, or a featured products section at the top of the page.

Steps:

1. In the WordPress dashboard, navigate to Pages, then All Pages. Find the page assigned as your shop (usually called “Shop”).
2. Click the + icon to add blocks. A heading, an image, or a call-to-action are all common additions.
3. Search for “products” in the block inserter to find the WooCommerce blocks. Useful ones include:
   • Best Selling Products: pulls your top sellers automatically
   • On Sale Products: highlights discounted items
   • Hand-Picked Products: lets you manually select which products to feature
   • Product Categories List: displays your category structure for easy navigation
4. Click Save.

One thing competitors’ guides consistently miss: adding blocks to the page editor does not change the product grid itself. If you want to change the grid layout, column count, or what appears inside each product card, you need Method 1 (Settings), Method 3 (FSE), or Method 4 (Hooks).

Using the Full Site Editor to Customise the WooCommerce Shop Page

The Full Site Editor (FSE) gives you template-level control over the shop page layout. This is the most powerful no-code option available, but it only works on block themes.

Block themes include Storefront 4.x, Kadence, Blocksy, Neve (with the block template option enabled), and Twenty Twenty-Three and later. If you are unsure whether your theme is a block theme, go to Appearance in your dashboard. If you see “Editor” in the menu (not just “Customize”), you have FSE available.

Steps:

1. Go to Appearance > Theme File Editor
2. In the FSE sidebar, click Templates. You will see a list of your site templates. Look for Product Catalog or Archive — this is the template that controls your shop page. You can now move, resize, and replace elements in the shop page layout.
3. Click Update file. Changes apply to the live shop page immediately.

The trade-off here is worth knowing. FSE gives you full layout control, but template edits can behave unexpectedly if your theme updates its own templates. Always check your shop page after a theme update if you have customised the template this way.

Developer Method — Editing the WooCommerce Shop Page with Hooks

Hooks are the cleanest way to customise WooCommerce. They let you add, remove, or modify shop page elements without touching the core plugin files. According to the official WooCommerce hooks documentation, there are two types: action hooks, which let you insert new content at specific points, and filter hooks, which let you modify existing data before it renders.

WooCommerce’s shop page is generated by the archive-product.php template file. You will find the key hooks documented in wc-template-hooks.php inside the WooCommerce plugin directory. The WooCommerce Code Reference lists every available hook.

Key Hooks for the WooCommerce Shop Page

The most commonly used shop page hooks are:

• woocommerce_before_main_content — fires at the very start of the shop page, before any products render. Good for banners.
• woocommerce_before_shop_loop — fires just before the product grid. Use this for headings or notices above the loop.
• woocommerce_after_shop_loop_item — fires after each product card in the loop. Use this to add labels, badges, or custom data per product.
• woocommerce_after_shop_loop — fires below the product grid. Useful for promotions or additional content.
• woocommerce_after_main_content — fires at the end of all page content.

Here is a basic example that adds a notice above the product loop:

add_action( 'woocommerce_before_shop_loop', 'devdiggers_shop_notice', 5 );
function devdiggers_shop_notice() {
    echo '<p class="shop-notice">Free shipping on orders over $50.</p>';
}

The third parameter (5) is the priority. Lower numbers run first. The default is 10.

Where to Place Your Hook Code

Never edit archive-product.php directly. WooCommerce updates will overwrite your changes.

Instead, place your code in one of these locations:

1. Your child theme’s functions.php file: the standard approach. If you do not have a child theme, create one before adding any code.
2. The Code Snippets plugin: a safer option that stores code in the database, separate from your theme files. This means your customisations survive theme switches.

As of WooCommerce 9.x, the product query on the shop page uses the ProductQuery class rather than a raw WP_Query, which affects how some older filter hooks interact with the results. If you are using a hook that modifies the product query and it stopped working after a recent WooCommerce update, this is the likely reason. Check the WooCommerce Code Reference for current hook compatibility.

What to Never Do

Do not edit WooCommerce plugin files directly. Not archive-product.php, not content-product.php, not wc-template-hooks.php. Every time WooCommerce updates, those edits disappear. If you need to override a template file, copy it to your child theme’s woocommerce/ directory and edit it there. WooCommerce will use your copy instead of its own.

Troubleshooting Common WooCommerce Shop Page Problems

This is the section most guides skip. If your shop page is not behaving as expected, work through these in order. Generally, the problems faced are:

• The shop page is blank: The most common cause is a misconfigured page assignment. Go to WooCommerce > Settings > Products and check the “Shop page” dropdown. If it is set to a page that was deleted, or to nothing at all, WooCommerce has nowhere to render the product catalog. If the assignment is correct, go to Settings > Permalinks and click Save Changes without changing anything. This refreshes the permalink structure, which often fixes a blank shop page after installation or migration.
• Products are not showing: Check that your products are published, not drafts. Then check that they are set to be visible in the catalog. In the product editor, look at the “Catalog visibility” option under Product Data > Visibility. A product set to “Hidden” or “Search only” will not appear on the shop page.
• The shop page shows your text content, but no products are below it: This is normal behaviour. Content added via the block editor appears above the product loop. The loop renders automatically below it. If no products appear at all, return to the product visibility check above.
• A plugin conflict is causing layout issues: Deactivate all plugins except WooCommerce and check the shop page. If it looks correct, reactivate plugins one at a time to find the conflict. Caching plugins and page builder plugins are the most frequent causes. Always back up your WooCommerce store before deactivating anything in a live environment.
• You cannot find the FSE template: Your theme is likely classic. If Appearance > Editor is not in your menu, you do not have FSE available. Use Method 1, Method 2, or Method 4 instead.

How to Edit the WooCommerce Shop Page for SEO

Most guides focus entirely on visual customisation and miss this entirely. Your shop page is often one of the highest-traffic pages on your site, so it deserves proper SEO attention.

A few things that matter:

• Set a meaningful page title and meta description: If you are using Yoast SEO or Rank Math, you can edit the shop page’s meta title and description without affecting what displays on the front end. Go to Pages > All Pages > Shop > Edit, then scroll to the SEO plugin fields below the editor.
• Add keyword-rich content above the product loop: A short paragraph using your block editor (Method 2) that describes your store or your product categories helps search engines understand what the page is about. Keep it to 2 to 3 sentences. Customers rarely read it, but Google does.
• Check your shop page URL: By default, WooCommerce sets the shop page to /shop/. If your primary keyword is something more specific, you can change the slug in Pages > All Pages > Shop > Edit > Permalink. Our WooCommerce SEO guide covers this in detail.

This won’t apply to every store, but if you sell in a competitive niche, your shop page’s on-page SEO matters as much as any product or blog page on your site.

Conclusion

Editing the WooCommerce shop page comes down to matching the right method to your setup. Start with WooCommerce Settings to control sort order, product count, and image sizes. Then use the block editor to add content above the grid, or the Full Site Editor if you are on a block theme and want full layout control. If you need anything beyond that, hooks and a child theme are the correct path.

The biggest mistake is treating the shop page like a regular WordPress page and expecting the block editor to control everything. Once you understand it is an archive template, the rest makes sense quickly.

If you need custom WooCommerce development beyond what these methods cover, our WooCommerce development services handle template customisation, hook integration, and full store builds.

Frequently Asked Questions