{"id":4707,"date":"2023-09-01T03:56:06","date_gmt":"2023-09-01T03:56:06","guid":{"rendered":"https:\/\/academy.bricksbuilder.io\/?post_type=bricks_article&p=4707"},"modified":"2024-02-05T01:09:20","modified_gmt":"2024-02-05T01:09:20","slug":"woocommerce-account-builder","status":"publish","type":"bricks_article","link":"https:\/\/academy.bricksbuilder.io\/article\/woocommerce-account-builder\/","title":{"rendered":"WooCommerce Account Builder"},"content":{"rendered":"\n

Bricks 1.9 introduces the My Account builder, which lets you customize the account area of your WooCommerce site.<\/p>\n\n\n\n

This includes the My Account page (logged-in), the account login\/register\/lost & reset password pages (shown when not logged-in), and all My Account endpoints (e.g., Orders, Downloads, etc.).<\/p>\n\n\n\n

IMPORTANT:<\/strong> In order to ensure that all your customizations to the WooCommerce My Account templates are properly applied, it is imperative that you complete the “My Account Page (logged in)<\/a>” step.<\/p>\n\n\n\n

My Account Page (logged in)<\/h2>\n\n\n\n

To design your My Account page (navigation + content wrapper), please edit your “My Account” page directly<\/strong>. You’ll find a dedicated “Account Page” element that you can add and adjust its settings to your liking.<\/p>\n\n\n\n

\"\"
Custom My Account page using the “Account – Page” element<\/figcaption><\/figure>\n\n\n\n

IMPORTANT:<\/strong> If you have the “Enable Bricks WooCommerce “Notice” element”<\/em> Bricks setting enabled, please make sure that you have added the “Notice” element to your account page or to all account templates individually. So the notifications when submitting the account forms (e.g., address, reset password, etc.) are displayed.<\/p>\n\n\n\n

Account – Login \/ Register<\/h2>\n\n\n\n

The login form is displayed when a not-logged-in visitor views the My Account page. And the registration form, if you have the “Allow customers to create an account on the “My account” page”<\/em> WooCommerce setting enabled.<\/p>\n\n\n\n

You can design your account login\/registration layout by creating a new template type “WooCommerce – Account – Login”. <\/p>\n\n\n\n

When editing this template, you’ll find dedicated elements for the “Account – Login form”<\/strong> & “Account – Register form”<\/strong> as shown in the screenshot below:<\/p>\n\n\n\n

You should also check the Account creation<\/strong> settings located at WooCommerce > Settings > Accounts & Privacy<\/em> section to control what form to be displayed via Account – Register form<\/strong> element.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"
Custom account login\/register template<\/figcaption><\/figure>\n\n\n\n

Account – Lost \/ reset password<\/h2>\n\n\n\n

The WooCommerce account builder in Bricks also provides the following dedicated templates and elements for the lost & reset password pages:<\/p>\n\n\n\n

Account page<\/strong><\/td>Template type<\/strong><\/td>Elements<\/strong><\/td><\/tr>
Lost password<\/td>WooCommerce – Account – Lost password<\/td>Account – Lost password<\/td><\/tr>
Lost password confirmation<\/td>WooCommerce – Account – Lost password (Confirmation<\/td>Displayed after submitting the lost password form. No special elements.<\/td><\/tr>
Reset password<\/td>WooCommerce – Account – Reset password<\/td>Account – Reset password<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Templates for specific account endpoints<\/h2>\n\n\n\n

Designing the account content area for individual account endpoints (Orders, Downloads, etc.) is possible by creating templates of the corresponding template type. <\/p>\n\n\n\n

In the example below, we created a “WooCommerce – Account – Orders” template, to which we then added the “Account – Orders” that we styled a bit.<\/p>\n\n\n\n

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

When editing the template for an account endpoint (Orders, Downloads, etc.), the drag & drop area is located inside the account content area. Offering a better preview in the builder than just rendering an empty canvas without the account navigation.<\/p>\n\n\n\n

The process of creating those account endpoint templates is the same for all other WooCommerce account template types.<\/p>\n\n\n\n

Account template types & elements<\/h2>\n\n\n\n
Template type<\/strong><\/td>Endpoint<\/strong><\/td>Element<\/strong><\/td><\/tr>
WooCommerce – Account – Dashboard<\/td>\/<\/code><\/td>–<\/td><\/tr>
WooCommerce – Account – Orders<\/td>orders\/<\/code><\/td>Account – Orders<\/td><\/tr>
WooCommerce – Account – View order<\/td>orders\/view-order\/{order_id}\/<\/code><\/td>Account – View order<\/td><\/tr>
WooCommerce – Account – Downloads<\/td>downloads<\/code>\/<\/td>Account – Downloads<\/td><\/tr>
WooCommerce – Account – Addresses<\/td>edit-address\/<\/code><\/td>Account – Addresses<\/td><\/tr>
WooCommerce – Account – Edit address<\/td>edit-address\/billing\/<\/code>
edit-address\/shipping\/<\/code><\/td>
Account – Edit address<\/td><\/tr>
WooCommerce – Account – Edit account<\/td>edit-account\/<\/code><\/td>Account – Edit account<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"

Bricks 1.9 introduces the My Account builder, which lets you customize the account area of your WooCommerce site. This includes the My Account page (logged-in), the account login\/register\/lost & reset password pages (shown when not logged-in), and all My Account endpoints (e.g., Orders, Downloads, etc.). IMPORTANT: In order to ensure that all your customizations to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":34,"template":"","format":"standard","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/4707"}],"collection":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article"}],"about":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/types\/bricks_article"}],"author":[{"embeddable":true,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/users\/1"}],"version-history":[{"count":45,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/4707\/revisions"}],"predecessor-version":[{"id":5526,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/4707\/revisions\/5526"}],"wp:attachment":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/media?parent=4707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}