--- title: Catalog and filters description: Shop and category pages, product filters, sorting, product cards, badges and quick view. url: "https://wpruby.com/knowledgebase/cartavera-catalog-and-filters/" updated: "2026-11-04" category: WPRuby Themes / Cartavera --- # Catalog and filters 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). Table of Contents [Toggle](#) - [Filters](#Filters) - [Add or remove a filter](#Add_or_remove_a_filter) - [On phones](#On_phones) - [Sorting](#Sorting) - [Product cards](#Product_cards) - [“New” and “Best seller” badges](#%E2%80%9CNew%E2%80%9D_and_%E2%80%9CBest_seller%E2%80%9D_badges) - [Wishlist button](#Wishlist_button) - [Quick view](#Quick_view) - [Product search](#Product_search) - [Categories](#Categories) - [Deals page](#Deals_page) ## 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. [![The shop page with the filter column and product grid](https://cdn.wpruby.com/wp-content/uploads/2026/11/04082757/cartavera-docs-catalog-filters.jpg)](https://cdn.wpruby.com/wp-content/uploads/2026/11/04082757/cartavera-docs-catalog-filters.jpg) ### 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. [![The filter panel open on a phone](https://cdn.wpruby.com/wp-content/uploads/2026/11/04082758/cartavera-docs-catalog-filters-phone.jpg)](https://cdn.wpruby.com/wp-content/uploads/2026/11/04082758/cartavera-docs-catalog-filters-phone.jpg) ## 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: 1. 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. 2. YITH WooCommerce Wishlist. 3. 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: 1. Select the grid's **Product Template** block (inside the Product Collection block; use **List View** to find it). 2. In the block settings, turn on **Quick view**. 3. 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](https://wpruby.com/knowledgebase/cartavera-homepage/#deals-page).