Shop & Product Archives
The shop and product archives display lists of products. A product category archive shows products in that category; the shop shows the store's catalog. Use a WooCommerce template to customize their shared layout.
Build the Shop Layout
- Go to Breakdance > Templates > Add Template and choose Shop Page & All Product Archives.
- Create the template and click Edit in Breakdance.
- Add Shop Page inside a Section.
- From the Design tab, configure Products List, Result Count, Pagination, and Spacing, then save.
Shop Page displays the products for the current archive. The same layout can therefore show the full catalog on the shop and the matching products on each category page.
For a different layout on selected product categories, see WooCommerce Templating. The assigned Shop page is an archive; editing an ordinary page named “Shop” does not create this behavior.
Customizing the Shop Page Element
Create a Global Block named Custom Product Layout and design the product card inside it. Use WooCommerce Dynamic Fields so each card displays its own product’s image, title, price, and other details.
- Add a Shop Page element to your archive template, or select the one you added above.
- In the Design tab, open Products List > Elements and disable the default elements.
- Under Custom Areas > Areas, add an area and select Custom Product Layout as its Global Block. The Custom Area renders that block for each product.
- Adjust Products List > Layout, including products per row and spacing between products, then save.
You can also use a Products List element. Its Design tab has the same default elements and Custom Areas under Elements.
Add Product Filters
Add Shop Filters beside Shop Page so shoppers can filter products by price, rating, or attributes. For FacetWP and WP Grid Builder, see WooCommerce Integrations.
