---
title: Shop pages and filters
description: The shop and category pages, category pills, filters and the filter drawer on phones.
url: "https://wpruby.com/knowledgebase/candy-shop-catalog-and-filters/"
updated: "2026-11-04"
category: WPRuby Themes / Candy Shop
---

# Shop pages and filters

The shop page, category pages and product search results share one layout: a filter column and a three-column product grid with twelve products per page. The shop and category pages also list your categories as pills under the title.

To edit it, go to **Appearance → Editor → Templates** and open **Product Catalog** (or **Products by Category**, **Product Search Results** and so on).

[![A Candy Shop category page with category pills, filters and product cards](https://cdn.wpruby.com/wp-content/uploads/2026/11/04084003/candy-shop-docs-catalog-filters.jpg)](https://cdn.wpruby.com/wp-content/uploads/2026/11/04084003/candy-shop-docs-catalog-filters.jpg)

Table of Contents

 [Toggle](#)

- [Filters](#Filters)
  - [On phones](#On_phones)
- [Product cards](#Product_cards)
- [Cart and checkout](#Cart_and_checkout)

## Filters

Filters are WooCommerce's own **Product Filters** block, so they work with WooCommerce's URLs, caching and extensions. Candy Shop sets it up with:

- **Active filters** as removable chips, with **Clear filters**
- **Category**
- **Price** range
- **Every product attribute** you've created, such as Flavor, Occasion or Dietary
- **Rating**
- **Availability**

New attributes appear as filters automatically. Filters only show options that exist in your catalog.

The filter column is titled *Find your flavor*, and the category filter *Candy type*. Developers can change both with the `candy_shop_copy` filter (keys `filters_title` and `category_filter`, see [Hooks and filters](https://wpruby.com/knowledgebase/candy-shop-hooks/#candy_shop_copy)).

### On phones

On small screens the filters open in a drawer.

[![The filter drawer open on a phone](https://cdn.wpruby.com/wp-content/uploads/2026/11/04084005/candy-shop-docs-catalog-filters-phone.jpg)](https://cdn.wpruby.com/wp-content/uploads/2026/11/04084005/candy-shop-docs-catalog-filters-phone.jpg)

## Product cards

Cards show the product image with its [badges](https://wpruby.com/knowledgebase/candy-shop-products/#badges), the title, the star rating (when the product has reviews), the price and an add-to-cart button.

## Cart and checkout

The cart, mini-cart and checkout use WooCommerce's blocks with Candy Shop's styling. Checkout has its own focused header without the navigation, so shoppers aren't pulled away while paying. Nothing in the theme changes how prices, payment, shipping or orders work.