Checkout Builder is an element for the Bricks Builder editor and WooCommerce. You can make a fully customizable Shopify kind of checkout page for your WooCommece shop site without writing the code. Every part of the checkout page is editable from the bricks builder editor.

Currently Checkout Builder element is divided into 10 small mini-elements.

1. Billing Address Selector
2. Billing Fields
3. Shipping Address Selector
4. Shipping Fields
5. Checkout Hooks
6. Shipping Methods
7. Cart Total Wrapper
8. Cart Cost
9. Payment Methods
10. Place Order Button

 

Minimum requirements:

1. WooCommerce
2. Bricks Builder

Activate Element

At first, you will activate this element from the Bricks -> BricksUltimate -> Woo tab page.

Billing Address Selector

Billing Address Selector is the sub-element of the checkout builder component which is used for the billing information. It is a nestable element and accepts the Billing Fields element with the native Bricks elements. It creates the toggle section on your checkout page.

Editor structure

Billing Fields

You create the billing form’s field with the Billing Fields element. It is fully flexible, customizable, and controllable from the bricks editor. You can also unregister the existing billing fields from the Bricks -> BricksUltimate -> MISC -> Checkout Builder section.

This element is also a mandatory sub-element of the Billing Address Selector element.

Shipping Address Selector

Shipping Address Selector is the sub-element of the checkout builder component which is used for the shipping information. It is a nestable element and accepts the Shipping Fields element with the native Bricks elements. It creates the toggle section on your checkout page.

Shipping Fields

You create the shipping form’s fields with the Shipping Fields element. It is fully flexible, customizable, and controllable from the bricks editor. You can also unregister the existing shipping fields from the Bricks -> BricksUltimate -> MISC -> Checkout Builder section.

This element is also a mandatory sub-element of the Shipping Address Selector element.

Checkout Hooks

When we are dividing every part into a single element, we are missing some hooks that are required for the 3rd party WooCommerce plugin. We found a solution and listed the missing hooks into an element. Now you can reassign those hooks from the Bricks editor and fill up the gap easily. If you have no idea where you will put the hooks of your Bricks checkout template, you should check the template files of the WooCommerce -> Templates -> Checkout folder. You will get the idea.

Shipping Methods

The Shipping Methods element lists all active shipping options on the checkout page. Make sure that you enable and configure your shipping options from the WooCommerce -> Settings -> Shipping tab. After configuring the shipping options, you will drag and drop the Shipping Methods element on the canvas. You will refresh/reload the builder editor if the preview is not showing there correctly.

Note: Shipping options map with the Billing or Shipping form. If you do the wrong setup, it will not work correctly. How you will control your option, is also available in the WooCommerce -> Settings page.

Cart Total Wrapper

Cart Cost element will wrap with the Cart Total Wrapper element. Both elements are linked with each other.

Why need the Cart Total Wrapper element?
When you are changing the shipping options, the quantity of the cart content, or removing a product from the cart, the cart total is also changing automatically via AJAX. WooCommerce needs the CSS class name to perform this action. The Cart Total Wrapper is accomplishing this functionality. We should always wrap all our cost-related rows like subtotal, discount, fees, tax, total, etc with the Cart Total Wrapper element.

Cart Cost

The Cart Cost element shows your cart price like Subtotal, Shipping cost, Coupon price, Fees, Taxes, Total price, etc. You will add this element one by one and create the row. Please check the above images for setup.

Payment Methods

Payment Methods element lists all available payment gateways. Make sure that you configure them in WooCommerce -> Settings -> Payment tab. Now open the bricks editor and drop the Payment Methods element on the canvas. You will refresh/reload the builder editor if you do not get the correct preview there.

Place Order

Place Order element creates the submit button of the checkout form.

Note: We shared some templates about the checkout builder. You can import them, see the setup, and test them.