When you first install WooCommerce, the shop page displays your products in a default grid with basic sorting options. For some stores that’s fine. For most, the default layout doesn’t reflect how you want customers to browse — wrong number of products per row, no filters, no intro text, and styling that clashes with the rest of your site.
Customising the WooCommerce shop page doesn’t require a developer or a paid plugin. Before adjusting the shop display, make sure you’ve already set up your WooCommerce store and added your products — those give you something to work with.
Two Different Paths, Depending on Your Theme
How much control you have depends heavily on whether you’re running a classic theme or a full-site-editing block theme. Classic themes rely on WooCommerce’s own settings screens plus whatever the theme’s Customiser exposes — sidebar layout, breadcrumbs, page title visibility, grid column count. Block themes go further: the shop page becomes an actual editable template in the Site Editor, built from real blocks rather than settings toggles. You can drop a Product Collection block directly into the template, configure exactly which products it pulls in and how it’s laid out, add filter blocks, highlight a category, or surface recently added items — all visually, without touching code. If your theme supports full site editing, check Appearance → Editor → Templates for a “Product Catalog” or “Shop” template before assuming you’re limited to the older Customiser-based controls below.
Change How Many Products Display
Go to WooCommerce → Settings → Products and look for Products per page. Set this to match how many products you want to show before pagination appears. A common choice is 12 (four rows of three) or 16 for denser catalogues.
To change the number of columns in the product grid on a classic theme, go to Appearance → Customise and look for WooCommerce or Shop layout options — most expose a products-per-row setting between two and four columns. On a block theme, this is instead a setting directly on the Product Collection block itself, adjustable from the block’s own toolbar without leaving the Site Editor.
Set the Default Sorting Order
The sort control at the top of the shop page defaults to “Default sorting.” To change what that actually means, go to WooCommerce → Settings → Products → Default Product Sorting. Options include menu order, popularity, average rating, and most recent.
Menu order lets you arrange products manually via the product list view (drag to reorder). Popularity is driven by sales count and works well once you have order history. Most recent suits stores that update inventory frequently.
Add an Introduction or Banner Above Products
WooCommerce doesn’t give you a visual click-to-edit area above the product grid by default on a classic theme. There are two reliable ways to add content there.
Option 1 — Edit the Shop Page Directly
In WordPress, go to Pages and open your Shop page. Any content you add there appears above the product grid. Add a short intro paragraph or promotional banner using the block editor, then update the page. Keep it brief — two or three sentences is plenty. Customers came to browse products, not read copy.
Option 2 — Use a Hook in functions.php
Add content programmatically above the product loop using the woocommerce_before_shop_loop hook in your child theme’s functions.php. This is better for persistent banners or category descriptions you want to control from code rather than the page editor. On a block theme, the equivalent is simply adding a Paragraph or Cover block directly above the Product Collection block in the Site Editor template — no hook required.
Customise Product Thumbnail Images
Product images drive clicks on the shop page. WooCommerce sets thumbnail dimensions under WooCommerce → Settings → Products → Product Image. Set the thumbnail width and height to match your grid proportions — square thumbnails suit most product grids; portrait thumbnails work well for clothing and fashion.
After changing image sizes, regenerate thumbnails using a plugin like Regenerate Thumbnails so existing product images update to the new dimensions. New uploads will use the updated size automatically.
Show or Hide Out-of-Stock Products
Under WooCommerce → Settings → Products, tick Hide out of stock items from the catalogue to automatically remove products with zero stock from the shop page. This prevents customers from browsing products they can’t buy. If you prefer to keep out-of-stock products visible with a badge instead of hiding them, leave this unchecked and rely on the stock management settings on each individual product to display an “Out of stock” label.
Add Product Filters and Category Navigation
On a classic theme, go to Appearance → Widgets and add the built-in WooCommerce filter widgets — filter by price, attribute, or category — to your shop sidebar. These only appear if your theme includes a dedicated shop sidebar area.
On a block theme, use the WooCommerce Filter blocks (Filter by Price, Filter by Attribute, Filter by Rating, Active Filters) directly in the Site Editor, placed alongside your Product Collection block. For more advanced faceted filtering than the core blocks offer, a plugin like FiboFilters or Filter Everything adds multi-select attribute filtering and AJAX-based results without a full page reload. Once your shop layout is sorted, the next step is improving individual listings — see the guide on creating a WooCommerce product page that converts for those details.
Practical Tips
- Match column count to your image proportions — three columns suits portrait images, four works better for square thumbnails
- Set a sensible default sort order: popularity works once you have sales data, newest works for stores that update frequently
- Keep any intro text very short — two or three sentences is enough to set context
- Test on mobile after every layout change — grid columns that look clean on desktop can collapse awkwardly on phones
Common Mistakes
- Not regenerating thumbnails after changing image dimensions — existing product images stay at the old size until regenerated
- Setting too many products per page — 30 or more products per page slows load time and makes the page feel overwhelming
- Adding a filter sidebar to a small catalogue — on a store with fewer than 20 products, a sidebar wastes screen space and narrows the grid unnecessarily
- Assuming you’re stuck with Customiser controls on a modern block theme — check the Site Editor’s Shop/Product Catalog template first, since it usually gives you far more direct control than the older settings screens
WooCommerce Shop Page vs Page Builders
If you need advanced control — custom layouts, product sliders, or category spotlight sections — a page builder like Elementor or Bricks still gives more flexibility than either the Customiser or the block-theme Site Editor. However, page builders add complexity and can affect site performance. For most small to medium stores, the built-in WooCommerce controls, the Site Editor on a block theme, or the theme customiser on a classic theme deliver everything you need without the added overhead.
The WooCommerce shop page is more customisable than it looks at first glance. Start with the product count and sorting settings in WooCommerce, use your theme’s Site Editor or Customiser for grid layout, add intro text if needed, and introduce filter blocks or widgets once your catalogue is large enough to need them.
Etienne Basson works with website systems, SEO-driven site architecture, and technical implementation. He writes practical guides on building, structuring, and optimizing websites for long-term growth.