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. The main controls are built into WooCommerce settings, your theme’s customiser, and the block editor. 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.
What You Can Change on the Shop Page
WooCommerce gives you direct control over several display settings:
- Number of products displayed per page and per row
- Default sorting order (by popularity, price, rating, or newest)
- Whether to show or hide out-of-stock products
- Product thumbnail image dimensions
Your theme adds another layer of control — sidebar layout, breadcrumbs, page title visibility, and grid column count. Some block themes let you edit the shop page template directly in the site editor, giving you full structural control over the layout.
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, go to Appearance → Customise (or Appearance → Editor for block themes) and look for WooCommerce or Shop layout options. Most themes expose a products-per-row setting here — typically between two and four columns.
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. 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.
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
The default WooCommerce shop page doesn’t include sidebar filters. To add filter widgets, 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.
For block themes without traditional widget sidebars, use the WooCommerce Product Filter block in the site editor, or install a plugin like FiboFilters or Filter Everything for more advanced faceted filtering. 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
- Skipping mobile testing — a clean four-column grid on desktop can collapse into a broken layout on smaller 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 gives significantly more flexibility. However, page builders add complexity and can affect site performance. For most small to medium stores, the built-in WooCommerce controls and theme customiser deliver everything you need without the added overhead.
Once your shop page layout is in place, it’s worth adding product filters too, so shoppers can narrow down a large catalogue by attribute, price, or rating instead of scrolling through everything.
Conclusion
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 customiser for grid columns, add intro text on the Shop page itself if needed, and introduce filter widgets once your catalogue is large enough to need them. The WooCommerce plugin page also lists official extensions if you need features beyond what the core plugin provides.
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.