The shop page, category pages, tag pages, attribute pages and product search results share one layout: breadcrumbs, title and description, a results count, sorting, the filter column and the product grid.
To edit it, go to Appearance → Editor → Templates and open Product Catalog (or Products by Category, Product Search Results and so on).
Filters
Filters are WooCommerce’s own Product Filters block, so they work with WooCommerce’s URLs, caching and extensions. Cartavera sets it up with:
- Active filters as removable chips, with Clear filters
- Category (the department)
- Price range slider
- Rating
- Every product attribute you’ve set up (colour, size and so on)
- Availability (in stock, out of stock, on backorder)
Filters only show options that exist in your catalog. A shop with no product ratings, for example, has nothing to filter by rating.
Add or remove a filter
Open the catalog template, select the Product Filters block, and add or remove filter blocks inside it like any other block. To set up product attributes for filtering, go to Products → Attributes.
You can also insert the whole filter column into another template with the Catalog filters pattern.
On phones
On small screens the filters move into a Filter products button that opens them in a full-screen panel. Keyboard focus moves into the panel when it opens, stays inside it, and goes back to the button when it closes.
Sorting
The sort menu is WooCommerce’s own Catalog Sorting block, with WooCommerce’s options (popularity, average rating, latest, price low to high and high to low). Changing the order keeps the active filters.
Product cards
Each product card shows:
- the product image
- a discount badge worked out from the real regular and sale price, for example “25% off”. Without the Cartavera Blocks plugin, WooCommerce’s “Sale” badge shows instead
- New and Best seller badges (see below)
- the product name
- the star rating with review count, linking to the reviews. Nothing shows until the product has a review
- the price
- stock status: low stock, on backorder or out of stock
- WooCommerce’s own add to cart button. It handles variable products (“Select options”), grouped and external products for you
- a wishlist button, when you use a supported wishlist plugin (see below)
“New” and “Best seller” badges
These come from the Cartavera Blocks plugin.
- New: the product was published in the last 30 days.
- Best seller: the product is the top seller in one of its categories (subcategories included), by WooCommerce’s total sales count. Only published, visible products with at least one sale are ranked.
Select the Product Badges block in the product template to change the number of days, how many top sellers in a category count as best sellers, or to hide either badge.
Best-seller rankings are refreshed every six hours and whenever you save a product or category, not after every order. A new top seller can take up to six hours to get its badge.
Wishlist button
Cartavera doesn’t store wishlists itself. The Wishlist Button block shows the button of the wishlist your store already uses, in this order:
- WooCommerce’s own wishlist, when your WooCommerce version has it and the feature is on. WooCommerce shows it to signed-in shoppers only, and Cartavera leaves it out on variable products.
- YITH WooCommerce Wishlist.
- TI WooCommerce Wishlist.
With YITH or TI, set the plugin’s button position to Shortcode (YITH) or Custom position with code (TI). Otherwise the plugin places its own button and Cartavera’s block stays empty, so you never get two. In product grids, also turn on the plugin’s “show in lists” setting.
In our tests TI WooCommerce Wishlist 2.14.0 did not show its button with WooCommerce 11.2.1 at all, in Cartavera or in its own positions. If you use TI and see no button, check with TI’s support.
Quick view
Quick view adds a Quick view button to each card in a grid. It opens the product in a pop-up with its image, rating, price, short description and WooCommerce’s own add-to-cart form, variations included. Shoppers can add to the cart without leaving the page, and the mini-cart updates.
It’s off by default. To turn it on for a grid:
- Select the grid’s Product Template block (inside the Product Collection block; use List View to find it).
- In the block settings, turn on Quick view.
- Save.
Turn it on only for the grids where you want it: it adds WooCommerce’s variation script (and jQuery) to those pages.
Product search
The header’s Store Search shows live suggestions as the shopper types: picture, name, price and stock. Pressing Enter opens the full search results page. Shoppers can limit the search to a category with the selector next to the field.
Categories
- Category images (Products → Categories → Thumbnail) are used by the category grid, the mega menu and the department cards.
- Category descriptions show under the title on category pages.
- Parent categories list the products of their subcategories too.
Deals page
Create a page with the Deals page (sale products) template to list every product that’s on sale. See The homepage.