Max Addons’ Checkout Page Builder allows you to customize the default WooCommerce checkout page using Bricks Builder. With this builder, you can enhance the checkout experience for your customers, making it more streamlined and visually appealing.
In this guide, we will give a complete overview and walk you through the step-by-step process of how to customize the WooCommerce Checkout Page using Bricks Builder and Max Addons.
Getting Started#
Before proceeding, ensure you have the following installed and activated:
Max Addons Checkout Page Builder: Features#
Max Addons Checkout Page Builder offers 3 elements to customize your WooCommerce checkout page:
- Billing Fields: Modify the form where customers input their billing details.
- Shipping Fields: Adjust the shipping form for delivery information.
- Checkout Hooks: Add custom content at specific points in the checkout process.
With the Max Addons Checkout Page Builder, you have the flexibility to tweak the default WooCommerce checkout page to your liking or create an entirely new one. Let’s explore how to use each element!
Checkout Page Builder: Billing Fields Element#
The Billing Fields element lets you modify the default billing form where customers input payment details.
Here’s how to use the element:
- Open your template in Bricks Builder.
- Search for “billing fields” in the elements panel.
- Add the element to your template. Make sure the element has the “MAX” tag.
The default billing form will automatically appear once you add the Billing Field element.
Customizing the Billing Form#
Content Tab Overview#
The Billing Fields element comes with two sections in the Content Tab:
- FIELDS
- LABELS
Fields Section#
Here, you can manage the form fields:
- Remove existing fields or add new ones.
- Customize each field with options to set:
- Label Name: (e.g., “Full Name” or “Email Address”).
- Placeholder Text: (e.g., “Enter your name here”).
- Description: Provide brief instructions for the field.
- Default Value: Pre-fill certain fields if needed.
- Required Field Status: Ensure fields like “Email” can’t be left blank.
Typography Options for Placeholder & Description:#
- Color
- Font Size
- Text Alignment
- Text Transform
- Font Family
- Font Weight
Styling Options for Fields:#
- Adjust typography (font size, color, alignment, etc.).
- Add background colors, borders, or shadows.
- Control padding and spacing to create a clean layout.
Labels Section#
For form labels, you can:
- Hide Labels (Enable/Disable toggle)
- Customize label typography
- Style required field typography
- Adjust label margins
Checkout Page Builder: Shipping Fields Element#
The Shipping Fields element works just like the Billing Fields but for delivery details. To display shipping details, search for “Shipping Fields” in Bricks Builder. Add the element to your template, ensuring it has the “MAX” tag.
Once added, the default shipping form appears.
Customizing Shipping Fields#
Content Tab Overview#
The Shipping Fields element consists of three sections:
- FIELDS
- LABELS
- SHIP TO DIFFERENT ADDRESS
Fields Section#
Similar to Billing Fields, the Fields section allows you to:
- Remove existing fields or add new ones.
- Customize field properties, including:
- Label Name
- Placeholder Text
- Description
- Default Value
- Widget Type
- Required Field Status
Typography Options for Placeholder & Description:#
- Color
- Font Size
- Text Alignment
- Text Transform
- Font Family
- Font Weight
Styling Options for Fields:#
- Typography
- Background Color
- Border
- Box Shadow
- Padding
Labels Section#
For form labels, you can:
- Hide Labels (Enable/Disable toggle)
- Customize label typography
- Style required field typography
- Adjust label margins
Ship to Different Address Section#
In this section, you can:
- Enable or disable the “Show Ship to Different Address Checkbox?” option.
- Customize HTML Tag and Typography settings.
Checkout Page Builder: Hooks#
The Checkout Hooks element lets you add custom content or functionality at specific points in the checkout process using predefined WooCommerce hooks.
Available Hook Options#
- Before Billing and Shipping Details: Add introductory messages or instructions before the forms.
- Before Order Review Heading: Insert custom headings or details before the order review section.
- Before Order Review: Add important information or promotions, such as discount reminders or special instructions, above the order details section.
- After Billing and Shipping Details: Include additional notes or guidance for customers after they complete the forms.
- After Order Review: Place custom thank-you notes, terms and conditions, or promotional content below the order review and payment section.
This was the complete overview of the Max Addons Checkout Page Builder. Hope this helps!