{"id":2220,"date":"2022-03-09T00:55:56","date_gmt":"2022-03-09T00:55:56","guid":{"rendered":"https:\/\/academy.bricksbuilder.io\/?post_type=bricks_article&p=2220"},"modified":"2023-09-01T04:33:40","modified_gmt":"2023-09-01T04:33:40","slug":"woocommerce-builder","status":"publish","type":"bricks_article","link":"https:\/\/academy.bricksbuilder.io\/article\/woocommerce-builder\/","title":{"rendered":"WooCommerce Builder"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

Bricks introduces the new in-theme WooCommerce Builder, which allows you to build your entire store with it. Including the main shop page, single product page, products archives, cart, checkout, and account pages.<\/p>\n\n\n\n

To design these layouts, Bricks offers WooCommerce-specific elements and template types. <\/p>\n\n\n\n

Certain elements only show when editing a specific template type. <\/p>\n\n\n\n

The Checkout customer details<\/code> element, for example, is only available when editing the WooCommerce Checkout<\/code> template.<\/p>\n\n\n\n

Getting Started<\/h2>\n\n\n\n

To access the WooCommerce Builder in Bricks, install and activate the free WooCommerce plugin available in the official WordPress repository<\/a> or through your WordPress dashboard under Plugins \u2192 Add New<\/code>.<\/p>\n\n\n\n

After activation, you might want to set up the store using the in-site configuration wizard or do it manually through the WooCommerce settings menus. <\/p>\n\n\n\n

Please note that during the configuration wizard, you won’t need to pick up a new theme because Bricks is already a theme and fully supports WooCommerce.<\/p>\n\n\n\n

With the configuration done and after adding some products, you can start visually building your WooCommerce layouts with Bricks. <\/p>\n\n\n\n

WooCommerce Templates<\/h2>\n\n\n\n

With WooCommerce activated, you can visually create and style the following WooCommerce templates in Bricks:<\/p>\n\n\n\n

Template Type<\/strong><\/td>Description<\/strong><\/td><\/tr>
Single product<\/strong><\/td>Individual product page.<\/td><\/tr>
Product archive<\/strong><\/td>Archive pages like product categories, tags, attributes, etc. Set visibility via Template Conditions.<\/td><\/tr>
Cart<\/strong><\/td>The cart (when it contains products).<\/td><\/tr>
Empty cart<\/strong><\/td>The empty cart (when it doesn’t contain any products).<\/td><\/tr>
Checkout<\/strong><\/td>Checkout screen where the customer enters billing & shipping details and selects the payment method.<\/td><\/tr>
Pay<\/strong><\/td>Checkout screen where the customer enters the payment details.<\/td><\/tr>
Thank you<\/strong><\/td>Displayed after successful checkout completion.<\/td><\/tr>
Order receipt<\/strong><\/td>Displayed when viewing the order receipt.<\/td><\/tr>
Account login<\/strong><\/td>Displayed when viewing the My Account page not logged in.<\/td><\/tr>
Account lost password<\/strong><\/td>Displayed when viewing the lost password My Account page.<\/td><\/tr>
Account lost password (confirmation)<\/strong><\/td>Displayed after submitting the lost password form.<\/td><\/tr>
Account reset password<\/strong><\/td>Displayed after clicking the link in the password reset email.<\/td><\/tr>
Account dashboard<\/strong><\/td>Displayed when viewing the My account page logged in.<\/td><\/tr>
Account orders<\/strong><\/td>Displayed when viewing the “Orders” tab of the My Account page.<\/td><\/tr>
Account view order<\/strong><\/td>Displayed when viewing an individual order.<\/td><\/tr>
Account downloads<\/strong><\/td>Displayed when viewing the “Downloads” tab of the My Account page.<\/td><\/tr>
Account addresses<\/strong><\/td>Displayed when viewing the “Addresses” tab of the My Account page.<\/td><\/tr>
Account edit address<\/strong><\/td>Displayed when editing the billing or shipping address on the My Account page.<\/td><\/tr>
Account edit account<\/strong><\/td>Displayed when editing the account details on the My Account page.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

My Account builder<\/h2>\n\n\n\n

Starting at Bricks 1.9, you can also visually design your Account page. Including the login\/registration, lost & reset password pages. <\/p>\n\n\n\n

For more details, please refer to our dedicated Academy article about the new WooCommerce Account builder here https:\/\/academy.bricksbuilder.io\/article\/woocommerce-account-builder\/<\/a><\/p>\n\n\n\n

Shop page<\/h2>\n\n\n\n

The shop page is a special WooCommerce page which is defined as the archive page for your products. <\/p>\n\n\n\n

To design a unique Shop page layout, you can directly edit the Shop page with Bricks. <\/p>\n\n\n\n

Or you could add a template condition in your WooCommerce - Product Archive<\/code> 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:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

WooCommerce elements<\/h2>\n\n\n\n

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. <\/p>\n\n\n\n

Among the general WooCommerce elements and Products element, Bricks has special elements for specific WooCommerce template types like the cart or the checkout. <\/p>\n\n\n\n

More than 30 WooCommerce-specific elements in total are available to design your WooCommerce templates & pages with Bricks.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

These are some of the WooCommerce-specific elements:<\/p>\n\n\n\n