---
title: Shop pages, product cards and product pages
description: "The catalog with WooCommerce Product Filters, Formafern's product cards and the furniture product page, including Complete the look."
url: "https://wpruby.com/knowledgebase/formafern-catalog-and-filters/"
updated: "2026-11-04"
category: WPRuby Themes / Formafern
---

# Shop pages, product cards and product pages

Table of Contents

 [Toggle](#)

- [The catalog](#The_catalog)
  - [Banner image](#Banner_image)
  - [Filters](#Filters)
- [Product cards](#Product_cards)
- [The product page](#The_product_page)
  - [Complete the look](#Complete_the_look)
- [Cart, checkout and account](#Cart_checkout_and_account)

## The catalog

The shop, category, room, tag and search pages share one layout: the title and description, a banner image when there is one, filters beside the products, the product count and sorting above them, and the products in three columns (two on tablets and phones).

### Banner image

A category page shows the category's own image as a wide banner: set it under **Products → Categories → Edit → Thumbnail**. The shop page shows the Shop page's **featured image**. Without one, there's no banner.

### Filters

The filters are WooCommerce's own **Product Filters** block. Formafern sets them up with:

- **Active filters**, with a **Clear** button.
- **Category.**
- **One filter for each product attribute your products use**, Material, Colour, Finish, Upholstery, Room and Style first. Attributes no product uses are left out, so no filter is ever empty. Size and width options show as chips, the rest as a checklist.
- **Price.**
- **Availability.**
- **Rating**, once at least one product has a review.

On large screens they sit in a sidebar; on phones, a **Filter products** button opens them in a drawer.

| Desktop | Phone |
| --- | --- |
| ![The catalog with the filters sidebar](https://cdn.wpruby.com/wp-content/uploads/2026/11/04140118/formafern-docs-catalog-filters.jpg) | ![The filters drawer on a phone](https://cdn.wpruby.com/wp-content/uploads/2026/11/04140120/formafern-docs-catalog-filters-phone.jpg) |

The list follows your products by itself: a new attribute gets a filter as soon as a product uses it. To change the order or which filters show, select the **Product Filters** block in **Appearance → Editor → Templates → Product Catalog** and edit it. Once you've saved that template, its filters stay as you set them.

## Product cards

Every product grid, in the catalog and on the homepage, uses the same card:

- The product photograph, cropped to a 4:5 portrait, with WooCommerce's sale badge.
- The name, and the [material line](https://wpruby.com/knowledgebase/formafern-products/#the-material-line).
- The price, and the [finish swatches](https://wpruby.com/knowledgebase/formafern-products/#on-product-cards).
- Availability, when the product is out of stock, on backorder or low in stock.
- The add-to-cart button, or **Select options** for variable products.

Catalog images are cropped to the 4:5 shape when you import the demo store. For your own store, set **Appearance → Customize → WooCommerce → Product Images → Thumbnail cropping** to **Custom** with **4 : 5**, or the ratio your photographs use.

## The product page

- **Gallery:** every product image at once, uncropped: the first large, the rest two to a row below it, with zoom and a lightbox. On phones the images form a row you swipe through. On touch screens, tapping opens the lightbox instead of zooming.
- **Beside it:** the category, name, [material line](https://wpruby.com/knowledgebase/formafern-products/#the-material-line), price, rating, short description, WooCommerce's add-to-cart form with [finish buttons](https://wpruby.com/knowledgebase/formafern-products/#on-the-product-page), and short [delivery notes](https://wpruby.com/knowledgebase/formafern-furniture-details/#delivery-and-returns).
- **Below:** the full description beside the [furniture details](https://wpruby.com/knowledgebase/formafern-furniture-details/).
- **Complete the look**, then reviews and related products.

### Complete the look

**Complete the look** shows the pieces that go with the product, such as the table, lamp and rug for a sofa. They are the product's **cross-sells**:

1. Edit the product.
2. Under **Product data → Linked products → Cross-sells**, search for and add the pieces.
3. Update the product.

Products without cross-sells don't show the section.

## Cart, checkout and account

The cart, checkout, mini cart and My Account pages use WooCommerce's own blocks, styled to match. Checkout has a quiet header and footer: see [Headers, footers and menus](https://wpruby.com/knowledgebase/formafern-headers-and-footers/#checkout-header-and-footer). Nothing in Formafern changes how payment, shipping or orders work.