WooCommerce Templates
Single product page templates for Bricks Builder, designed with native WooCommerce elements. Copy a template, paste it into a Bricks Single Product template, and start selling. No transformation, no setup beyond a WooCommerce installation.
What's included
Every template uses native WooCommerce elements that automatically pull data from each product in your store. You do not need to configure each element by hand for each product.
The elements typically included are product title, price, short description, add to cart button, product meta (SKU, categories, tags), full description, reviews, and related products.
Browse the available templates at WooCommerce Templates. Each one shows a live preview, the included elements, and the section count.
Requirements
- WordPress with Bricks Builder installed and active.
- WooCommerce plugin installed and active. Without WooCommerce the native product elements will not appear in Bricks.
- At least one product created in your store, so you can preview the template with real data.
- An active Bricksfusion license (Essential or Pro LTD) to copy templates from the website.
How to install a template
Templates are designed to be applied as Bricks Single Product templates. Follow these steps:
- Open the template you want at WooCommerce Templates and click Copy template. The JSON is now in your clipboard.
- In your WordPress admin, go to Bricks → Templates and create a new template.
- Set the template type to Single Product.
- Open the new template in Bricks Builder. Click anywhere on the empty canvas and paste with Ctrl+V on Windows or Cmd+V on Mac. The full template appears.
- Set the template conditions in the template settings. The most common option is All Products, which applies the template to every product in your store.
- Save the template. Visit any product on the frontend to see it in action.
Customizing the template
Templates ship as Vanilla, which means colors, spacing, and typography are written as fixed values rather than CSS variables. Every value is editable directly in Bricks like any other element.
To change colors, select any element in the canvas and use the Style panel on the right to update background colors, text colors, button colors, and so on. Each element keeps its own color value, so updating the brand requires going through the elements you want to recolor one by one.
Spacing, typography, borders, and shadows work the same way. Every property is a regular Bricks setting, ready to be edited.
Why Vanilla only
Unlike wireframes and components, WooCommerce templates do not adapt to your selected CSS framework when you copy them. They always come in Vanilla.
The reason is simple: each template has been styled by hand to look polished as soon as you paste it. Running it through the framework transformer would override that styling and replace it with framework defaults, losing the design intent.
If you use ACSS, Core Framework, AT Framework, or Bricks Design Tokens, your framework variables are not applied automatically when copying. To use your CSS variables instead of the hardcoded values, you need to swap them manually in the Bricks Style panel after pasting. The structure of the template remains identical.
Troubleshooting
The product price or title does not appear
Native WooCommerce elements only render on actual product pages. Inside the Bricks editor you may see placeholders. Visit a real product on the frontend to see the template with live data. Make sure the template type is set to Single Product and the conditions match.
I do not see any product elements in Bricks
The WooCommerce plugin must be installed and active. If WooCommerce is not active, Bricks will not load the product elements and the template will appear broken. Activate WooCommerce, refresh the editor, and try again.
The template appears blank after pasting
Make sure you clicked inside the canvas (not on the sidebar) before pasting. Bricks needs an active focus inside the canvas area to accept a paste. Click on the empty canvas first, then paste again.
The template applied to other pages, not just products
Check the template type and conditions. The type should be Single Product, and the conditions should be limited to product pages (for example, All Products or specific categories).
Colors do not match my brand
Templates ship with their original colors hardcoded as hex values. They do not adapt to your Design System or brand palette automatically. To match your brand, select each element in Bricks and update its colors manually in the Style panel. This is by design: each template is hand-crafted to look polished out of the box, and recoloring is part of customization.