The Catalog group inside the WooCommerce area of Theme Settings controls your shop and product-category pages: how the product grid is arranged, what surrounds it, and what each product card shows.
Open it from Rey → Settings → WooCommerce. The WooCommerce area only appears when WooCommerce is active.
The product page is covered separately in Theme Settings › WooCommerce › Product Page, and the cart, checkout and store-wide options in Theme Settings › WooCommerce › Cart, Checkout & Store.
Grid Settings
The shape of the product grid itself.
- Grid Layout: Default keeps an even grid. Masonry and Masonry Zig-Zag stagger items by height, Scattered and Scattered Mixed vary their size, and Squares (metro) forces equal square tiles. Anything other than Default needs product images of varying proportions to look intentional.
- Gap size: the space between products. Responsive.
- Products per row: the desktop count comes from WooCommerce’s own setting, and Rey adds separate tablet and mobile counts here.
- Enable list view on mobiles: a single-column list instead of a grid on phones. See Mobile improvements.
Further down: Enable Titles before/after Categories with a Category list title and Product list title, for archives that list subcategories above the products; and Empty Products List, where you choose a global section and a Mode for what visitors see when a filter returns nothing.
Apply a Demo Layout at the bottom copies the catalog configuration from one of Rey’s demos in a single click, and a fast way to get a coherent starting point.
Applying a demo layout overwrites the catalog options you have already set. Take a snapshot first, using the Save history button in the top bar, so you can roll back.
Grid Components
Everything around the grid: the bar above it, the pagination below it, and the sidebar beside it.
Top Text
Enable product count text shows the “showing 1–12 of 48” line, and Custom product count text lets you word it yourself.
Pagination
Pagination type chooses between numbered pages, a load-more button and infinite scroll. The Ajax options add a counter to the button, custom Button Text and Button End Text (shown once everything is loaded), a Button Style, and two behaviours worth knowing:
- Add history marker for URLs: the address updates as more products load, so the back button and sharing still work.
- Cache loaded products: already-loaded pages are not fetched again.
Sidebar
Sidebar Position and Sidebar Size, Widget Spacing, and Sticky on Scroll so the filters stay in view while the visitor scrolls a long list.
Toggable Widgets turns each sidebar widget into a collapsible block, with a Status (open or closed by default), an Indicator type, and Exclude IDs for widgets that should stay open. Custom Titles Styles restyles the widget headings.
Filters themselves are a separate feature. See Filter products with Rey’s widgets and Custom sidebars for WooCommerce.
Product Card
The single product as it appears in the grid. This is the longest section in the whole editor, so use the page search (the magnifier next to the title) to jump to what you need.
Skin
Product Skin is the card’s overall design: Basic, Wrapped, Cards, Iconized and others. Each skin reveals its own group of options: inner padding, hover animation, border and background colours, corner radius, and for the wrapped skin an Item Height, Image Fit and Text Alignment.
Product Layout and Animate In (on scroll) sit above it, and Expand thumbnails lets the image fill the card edge to edge.
Height differences between cards are a common annoyance. See How to equalize product item’s height and Wrapped Product item skin – change height.
What the card shows
Each element has its own toggle and its own options group:
- Title: with Titles Height and Cut and limit the text, so long names do not push cards out of alignment.
- Add to Cart Button: its style, text, colours in both states, whether it appears on mobile, and whether it carries quantity controls.
- Price and Category: including Exclude parent categories so only the specific category is shown.
- Ratings: optionally hiding stars for unrated products, or extending them with a review count.
- Short description: with a word limit and a position.
- New Badge: automatic, based on a Badge duration (days).
- Featured Badge: for products marked featured in WooCommerce.
- Stock Status: show stock as a badge, with custom text, and optionally Hide by Stock Status to keep out-of-stock products out of the grid.
- Product Variations: show an attribute (usually colour) as swatches on the card. You pick the attribute, its position and size, the display limit, and whether clicking a swatch opens the product. See How to create product variations & display as colour swatches.
Discount badges are configured in Store Behavior; if they show the wrong figure, see Discount badges showing wrong discount or not at all.
Product Images
How catalog thumbnails are cropped and what happens on hover.
- Uniform image size: force every thumbnail into the same shape, set either as an Image-Container Height or an Aspect Ratio. This is the fix for a grid where products with differently-proportioned photos look ragged.
- Extra Images Display: what the product’s other images do in the grid: nothing, swap on hover, or a small slideshow. The slideshow options cover its navigation style, colour, bullets, whether slides change on dot hover, whether it is desktop-only, and a Maximum images cap.
- Corner Radius and Thumbnails Inner Padding.
Tip: After changing image sizes, existing thumbnails keep their old crop until they are regenerated. Use a plugin such as Regenerate Thumbnails, or re-upload the affected images.
Catalog Extras
- Exclude categories from Shop Page: keep certain categories out of the main shop listing while leaving them reachable by their own URL.
- Show sale price instead of range / Variable prices range: how variable products display their price: a range such as “£10 – £30”, or a single figure.
- Enable back arrow in Archives, with a Behaviour option, giving a “back to the listing” control on archive pages.
To change the descriptive text at the top of the shop page, see Change the Shop page description text and Archives Bottom Description.
Designing the shop with Elementor
These settings style Rey’s built-in catalog. For a fully custom layout, build the archive with Elementor instead. See Editing product pages & archives with Elementor and the Products Grid Element.