WooCommerce is a free plugin to manage the e-commerce functionality of your WordPress site. It is the world’s most popular open-source solution to create and manage a shop on the Internet and therefore Bricks proudly integrates with it.
Bricks introduces the new in-theme WooCommerce Builder which allows you to build your single product layout, main shop page, products archive layouts (e.g. products by category), the cart, and the checkout pages.
The ability to visually design the Account pages will be introduced at a later development stage.
To design these layouts, Bricks offers WooCommerce-specific elements. These elements only show when the WooCommerce plugin is active. Certain elements only show in certain template types (e.g. the “Checkout customer details” element is only available when editing the “Checkout” template).
Getting Started
To access the WooCommerce Builder in Bricks, install and activate the free WooCommerce plugin available in the official WordPress repository or through your WordPress dashboard under Plugins → Add New.
After activation, you might want to set up the store using the in-site configuration wizard or you could do it manually through the WooCommerce settings menus.
Please note that during the configuration wizard, you won’t need to pick up a new theme because Bricks is already a theme and it fully supports WooCommerce.
With the configuration done and after adding some products, you can start visually building your WooCommerce layouts with Bricks.
WooCommerce Templates
With WooCommerce activated, you can visually create and style the following WooCommerce templates in Bricks:
| Template Type | Description |
| Single product | Layout for viewing an individual product. |
| Product archive | Use for styling your WooCommerce archive pages (product categories, tags, attributes, etc.). Set visibility via “Template Conditions”. |
| Cart | Layout for viewing the cart (when it contains products). |
| Empty cart | Layout for viewing the cart (when it contains no products). |
| Checkout | Layout for viewing the first checkout screen where customer enters billing & shipping details, selects payment. |
| Pay | Layout for viewing the checkout screen where the customer completes the payment for an unpaid order. |
| Thank you | Layout that shows after the order has been placed successfully. |
| Order receipt | Layout that shows for unpaid order receipt. |
The Shop page
A word about the Shop page. The shop page is a special WooCommerce page which is defined as the archive page for your products.
To design a unique Shop page layout you can directly edit the Shop page with Bricks.
Or you could add a template condition in your “Product Archive” template, so this template is used for the Shop page as well. In this case, you would need to set the template conditions to target the shop page individually like so:
WooCommerce elements
Bricks aims to provide the most flexible approach to the visual design of the WooCommerce templates without losing the functionality & hooks WooCommerce already provides that many third-party WooCommerce plugins/extensions rely upon.
Among the general WooCommerce elements and Products element, Bricks has special elements for specific WooCommerce template types like the cart or the checkout. More than 30 WooCommerce-specific elements in total are available to design your WooCommerce templates & pages with Bricks.
These are some of the WooCommerce-specific elements:
- Product title
- Product gallery
- Product short description
- Product price
- Product stock
- Product meta
- Product rating
- Product content
- Add to cart
- Related products
- Product additional information
- Product tabs
- Product up/cross-sells
Dynamic Data
The WooCommerce integration adds new dynamic data tags to target product and order properties.
{woo_product_price} – Returns the product price{woo_product_cat_image} – Renders the product category image{woo_add_to_cart} – Renders the add to cart button{woo_product_on_sale} – Renders the on-sale badge if the product is on sale{woo_product_rating} – Renders the product rating{woo_product_rating:plain} – Outputs the product rating in text form. Ex: Rated 5.00 out of 5 (@since 1.7.2){woo_product_rating:format} – Outputs the product rating even if no rating has been submitted yet (@since 1.8){woo_product_sku} – Returns the the product SKU{woo_product_excerpt} – Renders the product short description{woo_product_stock} – Renders the product stock (append `value` filter outputs number of products in stock){woo_product_stock_status} – Outputs `instock`, `outofstock`, or `onbackorder` (since 1.6.1. Useful for element conditions)
You can use the basic dynamic tags as well.
{post_id} – Outputs the product ID{post_title:link} – Renders the product title with link{post_terms_product_cat} – Renders the product categories with links{post_terms_product_cat:plain} – Renders the product categories without links (@since 1.7.2)Bricks Settings: WooCommerce
You’ll find a dedicated tab for the WooCommerce integration in your WordPress dashboard under “Bricks > Settings > WooCommerce”.
- Disable WooCommerce Builder – This toggle disables the Bricks’ WooCommerce integration.
- Product Badge “Sale” – Choose between not showing the on-sale badge, showing the “Sale” badge or the discount percentage.
- Product Badge “New” – Show a “New” badge if the product was published in less than the .. days configured.
- Disable Product Gallery Zoom/Lightbox – Disable the product gallery zoom or lightbox scripts.
Theme Styles
When WooCommerce is active, you’ll find a new control group on the Theme Styles panel: WooCommerce – Button. In there you’ll be able to define the general styles for the WooCommerce buttons:
