WooCommerce
Build every part of your WooCommerce store inside Bricks. Product pages, cart, checkout, My Account, compare, swatches and wishlist — 6 dedicated modules, 50+ elements.
Djia Bricks provides 6 independent WooCommerce modules. Enable only what your store needs — each module is fully independent and can be toggled without affecting others.
| Module | What it covers | Elements |
|---|---|---|
| WooCommerce Elements | Product, cart, checkout and account elements | 50+ |
| Checkout Builder | Custom checkout fields and order bumps | 12 |
| My Account Builder | Custom account endpoints and navigation | 2 |
| Swatches | Color, image and label variation swatches | — |
| Compare | Side-by-side product comparison table | — |
| Wishlist (Pro) | Favorites button, loop and condition | 3 |
Use these elements inside a Bricks Single Product template or any loop that outputs product data.
The Mini Cart Builder element creates a custom slide-out mini cart. Place Cart Counter in your header to show a live item count that updates without page reload.
Build a fully custom WooCommerce checkout page inside Bricks. Use the Checkout Builder module elements to lay out billing fields, shipping, payment methods, order review and order bumps in any configuration.
Create a fully branded WooCommerce My Account area. Add custom navigation items, create new endpoints and map each to any Bricks template — no PHP, no shortcodes.
Create endpoint templates
In Bricks, create a new template for each account section you want to customize — Orders, Addresses, or a custom section.
Register endpoints
In Djia Bricks → My Account → Endpoints, add a new endpoint and map it to a Bricks template. Set the slug and navigation label.
Add Navigation element
Use the My Account Navigation element in your My Account page template to display the custom navigation menu.
Replace the default WooCommerce variation dropdowns with visual swatches on single product pages and product archive grids.
| Swatch Type | Display | Config |
|---|---|---|
| Color | Filled circle or square — hex, gradient or image | Set color per attribute term in Products → Attributes |
| Image | Thumbnail image per term | Upload image per attribute term |
| Label | Styled text button per term | Uses the attribute term name |
Lets customers add products to a comparison table and view them side by side. Configure which attributes and product data to show in the comparison.
- Add a
Compare Buttonelement to your product card or product page - Configure the comparison table columns in Djia Bricks → Compare → Attributes
- The comparison panel persists across page navigation via localStorage
- Works with all WooCommerce product types — simple, variable, grouped
The Wishlist module is part of the Pro Elements module. It works with any post type — not just WooCommerce products.
| Element | Description |
|---|---|
| Favorites Button | Toggle button to add/remove the current post from favorites |
| Favorites Query Loop | Query Loop source that outputs only the user's favorited posts |
| In Favorites Condition | Bricks condition — show/hide element when post is/isn't favorited |
localStorage for guest users and in user meta for logged-in users. Favorites sync automatically when a guest logs in.