Products
WooCommerce Templates
Single product page templates built with native WooCommerce elements, ready to paste into Bricks Builder. Copy one, assign it as a Single Product template, and start selling: no transformation, no setup beyond a WooCommerce installation.
What's included
Every template is a complete single product page assembled from native WooCommerce elements. The elements pull their data from each product automatically, so one template serves your entire catalog with no per-product configuration.
The typical lineup: product title, price, short description, add to cart button, product meta (SKU, categories and tags), full description, reviews and related products.
All 4 templates are included on both Essential and Pro LTD. Browse them on the WooCommerce Templates page, where each one shows a live preview, the included elements and the section count.
Requirements
What you need
- A WordPress site with Bricks Builder installed and active
- The WooCommerce plugin installed and active: without it the native product elements do not appear in Bricks
- At least one product 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
Copy the template
Open the template you want on the WooCommerce Templates page and click Copy template. The full JSON lands in your clipboard.
Create a Bricks template
In your WordPress admin, go to Bricks → Templates and create a new template.
Set the type to Single Product
In the template settings, set the template type to Single Product.
Paste into the canvas
Open the new template in Bricks Builder, click anywhere on the empty canvas and paste. The full template appears with all its sections, elements and styles.
WindowsCtrl + VMacCmd + V
Set the conditions
In the template settings, choose where the template applies. The most common option is All Products: one template covers every product in your store.
Save and visit a product
Save the template and open any product on the frontend to see it in action.
Judge the result on the frontend
Native WooCommerce elements only render live data on actual product pages, so the Bricks editor may show placeholders. The frontend shows the real thing.
Customizing the template
Templates ship as Vanilla: colors, spacing and typography arrive as fixed values rather than CSS variables. Every value stays editable directly in Bricks, exactly like any element you build yourself.
To change colors, select an element on the canvas and update its background, text and button colors from the Style panel. Each element keeps its own color value, so updating the brand means 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 edit.
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.
Hand styling is the point
Each template is styled by hand to look polished the moment you paste it. Running it through the framework transformer would override that styling with framework defaults and lose the design intent.
If you use ACSS, Core Framework, AT Framework or Bricks Design Tokens, your framework variables are not applied automatically on copy. To use your CSS variables instead of the hardcoded values, swap them manually in the Bricks Style panel after pasting. The structure of the template stays identical.
Troubleshooting
The product price or title does not appear
Native WooCommerce elements only render on actual product pages, so inside the Bricks editor you may see placeholders. Visit a real product on the frontend to see live data, and make sure the template type is Single Product with conditions that match.
I do not see any product elements in Bricks
Bricks only loads the product elements while the WooCommerce plugin is installed and active. Without it the template appears broken. Activate WooCommerce, refresh the editor and try again.
The template appears blank after pasting
Bricks needs active focus inside the canvas area to accept a paste. Click on the empty canvas first, not the sidebar, 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 and do not adapt to your Design System or brand palette automatically. Select each element in Bricks and update its colors in the Style panel. This is by design: every template is hand-crafted to look polished out of the box, and recoloring is part of customization.
Where to go next
Browse the templates
Live previews, included elements and section counts for every template.
Library & Layouts
Wireframes, styled components and complete page layouts for the rest of the site.
Dynamic Data & Query Loops
Generate product sections connected to your WooCommerce catalog with Studio.
Installation
From checkout to your first paste: license, plugins and framework setup.