{"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 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 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 With WooCommerce activated, you can visually create and style the following WooCommerce templates in Bricks:<\/p>\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 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 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
Plugins \u2192 Add New<\/code>.<\/p>\n\n\n\n
WooCommerce Templates<\/h2>\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
Shop page<\/h2>\n\n\n\n
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