With store editing, you can build shop pages exactly the way you want by editing your Product Catalog templates and customizing the layout and styles using blocks within the site editor. In this document, we cover the templates and blocks included in WooCommerce for managing and customizing your catalog pages.
Beyond the main shop page, WooCommerce displays your catalog of products in different templates, depending on the context. There are built-in templates to display your products by category, tag, or attribute.
By using a block theme, you can customize different product archives to meet the distinct needs of your store. You can also create additional templates for specific attributes, categories, or tags using the no-code editor.
Templates
↑ Back to topWooCommerce includes templates for managing the way products are displayed in your store. While your chosen theme may override or introduce theme-specific versions of these templates. you can always edit them to fit your design needs. Learn more about accessing templates.
Built-in templates
↑ Back to topBy default, the display of your store’s product catalog is controlled by the following templates:
- Product Catalog controls the display of your main shop page, as set in WooCommerce > Settings > Products > General.
- Products by Category controls the appearance of your shop’s product category archive pages.
- Products by Tag controls the appearance of your shop’s product tag archive pages.
- Products by Attribute controls the appearance of your shop’s product attribute archive pages.
- Product Search Results controls the appearance of your shop’s product search results pages.
Note: As different types of product archive pages (i.e. tags, categories, attributes) are controlled by different templates, it’s not possible to edit all of the product archive templates at once. If you’d like to replicate the same design across all product archive templates, however, you can.
1. Customize a template.
2. Save your design as a template part or pattern.
3. Insert this template part or pattern in the other templates to quickly give them all the same look.
Product Catalog blocks
↑ Back to topThe following WooCommerce blocks are central to displaying your catalog across your store. They can be customized to meet a variety of designs and use cases. While several other product display blocks exist, the majority are being deprecated in favor of the more robust, customizable Product Collection block.
Product Collection block
↑ Back to topThis multi-purpose block has many pre-built collections to choose from. You can also create a custom collection to display products the way you want. Learn more about the Product Collection block.
Product Filter blocks
↑ Back to topSeveral filtering options are available for your product catalog pages. You can choose to allow customers to filter by attribute, rating, price, or stock status. Learn more about Product Filter blocks.
Patterns
↑ Back to topTo help you get started faster, you can choose from multiple pre-built patterns that display your product collections in different configurations of grids, rows, etc. Learn more about patterns.
How to create custom Product Catalog templates for specific product types
↑ Back to topIn addition to customizing the default templates listed above, store editing makes it simpler for you to create a custom template for a specific product category
To create a custom template:
- Head to the site editor at Appearance > Editor.
- Click Templates, followed by the plus symbol (+) to add a new template.
- Choose the Product Category or Product Tag option, depending on which product taxonomy you want the template to apply to.
- Select the specific product category or product tag this new template applies to.
- If you’d like to use a pre-built pattern, select a pattern when prompted.
- Edit the category-specific template to meet your needs for that specific product category or tag.
Questions and support
↑ Back to topDo you still have questions and need assistance?
This documentation is about the free, core WooCommerce plugin for which support is provided in our community forums on WordPress.org. By searching this forum, you’ll often find that your question has been asked and answered before.
If you haven’t created a WordPress.org account to use the forums, here’s how.
- If you’re looking to extend the core functionality shown here, we recommend reviewing available extensions in the WooCommerce Marketplace.
- Need ongoing advanced support or a customization built for WooCommerce? Hire a Woo Agency Partner.
- Are you a developer building your own WooCommerce integration or extension? Check our Developer Resources.
If you weren’t able to find the information you need, please use the feedback thumbs below to let us know.