Are you looking to build a custom checkout in WooCommerce with Bricks Builder?
Bricks Builder has become a popular choice among WordPress users for its unrivaled visual full-site editing ability.
Like any other website pages, you can also create custom WooCommerce pages, whether single-page or multi-step checkout, without needing to know coding.
In this blog, we will share how you can create a custom WooCommerce checkout page with Bricks Builder in a step-by-step guide.
Plus, we will share tips you can implement to boost the conversion rate of your WooCommerce store.
Short on time? Watch the video 👇
Table of Contents
The default checkout process often fails to convert visitors into customers. You can see the default checkout page shown in the image below:
This default custom page is not conversion optimized. Here are some of the reasons why you should replace your default WooCommerce checkout page with a custom one.
The default checkout page has a generic look that doesn’t reflect your brand. A customized checkout highlights your brand’s visual identity, fostering a sense of professionalism and reliability.
When customers see a checkout that mirrors your brand, they’re more likely to feel confident in their purchase.
The default checkout process isn’t designed to maximize conversions and lacks critical features that encourage purchases. For instance, it's too long, and the layout isn’t user-friendly.
By optimizing the layout and reducing unnecessary steps, you can create a more intuitive experience that guides customers smoothly to completion.
The default checkout page lacks the Google address autocomplete feature, which can cost you money. Because incorrect addresses cause 41% of delivery delays and 39% of failed shipments, frustrating both you and your customers.
Implementing address auto-completion not only speeds up the process but also minimizes mistakes, resulting in fewer cart abandonments and a more satisfactory user experience.
If your business requires specific information from customers to complete orders, such as CPF, CNPJ, and RG values for Brazilian customers, the default checkout won’t let you add these custom fields without customizing.
Any business that needs to collect custom information from users must replace the default page with a custom one.
The default setup doesn’t include important sections like testimonials or clear shipping policies, which can significantly influence a customer’s decision to complete their purchase.
By customizing the checkout page, you can easily add elements such as customer testimonials, trust badges, and transparent shipping policies that can enhance credibility and reassure potential buyers.
Offering an order bump on the checkout page can effectively boost the average order value of your store. Unfortunately, you can’t do this with the default checkout page.
With a custom checkout, you can offer additional products on the checkout page that users can buy with a single click, resulting in increased order value.
As you can see, customizing the WooCommerce default checkout page is crucial.
But to customize the checkout page, you need a page builder, right? Because, let’s be honest, playing with raw code isn’t a feasible option.
For this, experts recommend using Bricks Builder.
Move to the next section to find out why WooCommerce and Bricks Builder make a powerful combination.
WooCommerce is an excellent platform for running an online store, and Bricks is a powerful page builder for creating custom WooCommerce pages. This ideal combination can turn your boring WooCommerce pages into conversion machines.
Bricks is a visual site builder for your WordPress website that empowers you to create scalable websites without any coding skills.
With its unmatched customization, flexibility, and accessibility, as well as full-site visual editing, flexbox layouts, global styles, and more, Bricks Builder should be your go-to choice for customizing your WooCommerce checkout page.
However, using FunnelKit Funnel Builder along with Bricks Builder to maximize the potential of custom checkout pages.
With FunnelKit Funnel Builder, you can create single or multi-step checkout, modernize the layout, optimize it with features like Google address autocomplete, inline validation, etc.
Additionally, you can offer pre- and post-purchase upsells to boost the average order value of your store.
So basically, you get the ultimate design flexibility with Bricks Builder and all the AOV boosting features with FunnelKit Funnel Builder to ensure you not only secure more sales but your revenue also hits the sky.
Move to the next section to find out about what Bricks Elements FunnelKit Funnel Builder provides to build a modern checkout.
FunnelKit Funnel Builder offers two drag-and-drop widgets to create your custom eCommerce checkout page: Checkout Form and Mini cart.
Let’s have a look at these both Bricks elements developed by FunnelKit:
FunnelKit’s checkout form element for Bricks adds everything from customer information to shipping address to the Place order button on your checkout page.
Here are the sections you can customize :
Note: We will talk in detail about all these sections later in the blog.
The Mini cart widget basically displays a cart summary, including cart item name, price, image quality, etc. FunnelKit Funnel Builder’s Mini cart also allows customers to update the number of items or remove any item they want.
This Bricks element also has a coupon code field where users can apply coupons to redeem discounts.
The Mini cart has three basic sections:
In addition to these two blocks, you can use other Bricks blocks to add more information, such as shipping policies, testimonials, etc., to make the checkout page more user-friendly.
Move to the next section to find out how to create a custom WooCommerce Bricks Checkout.
In this section, we will share how you can use FunnelKit Funnel Builder and Bricks to create a custom WooCommerce checkout page.
Make sure both these plugins are installed and activated on your WooCommerce store.
Now follow these steps:
Go to FunnelKit ⇒ Store Checkout and click on the ‘Create Store Checkout’ button.
You’ll get directed to the templates page.
Please note that apart from Bricks Builder, FunnelKit integrates with various page builders such as Divi, Oxygen, Gutenberg, and others using WooCommerce checkout shortcodes.
First, choose Bricks as your page builder. If you like any template, click on ‘Preview’ next to it.
Next, choose the number of steps you want on your checkout page, i.e., one-step or multi-step.
Here we will be importing the two-step Minimalist template for our WooCommerce Bricks checkout page. To do so, click on “Import this funnel”, provide a name and hit Done.
Click on the page to start editing your WooCommerce checkout with Bricks.
On the ‘Design’ tab, click on ‘Edit Bricks Template’ to start customizing your WooCommerce checkout page with Bricks.
This page will load in Bricks.
You can now start customizing your WooCommerce Bricks checkout page using different widgets.
To change the logo, click on the icon and upload a new image from either the URL or media.
Now click on the Checkout Form to customize the following options:
You can enable the steps and format them in the breadcrumb or tabs format. In case you choose tabs, you can customize the heading and subheading for each step.
You can turn on the collapsible order summary if you want. Usually, experts recommend to add it in a mobile view as it makes it easier for people to checkout order summary without scrolling.
You can set the width for the email, including first and last name.
Next, adjust the field widths of your checkout form.
Go to the ‘Customer Information’ or ‘Shipping Address’ section. You'll find the options to adjust the form field widths of your shipping and billing addresses into full, one-half, one-third, or two-thirds.x
Note: You can customize coupon button text,
Add a custom heading and subheading for the payment information.
As per the checkout button, you can add the button text and subtext. In case of multi-step checkout, you can set the step button text and subtext. In addition, set the return link text.
🔔 Note:
Along with customizing the content, make sure to move to the Style tab for each element to customize the look.
After checkout, click on the Mini Cart Block and customize the following options:
Feel free to customize the mini cart heading text.
Under the Products section, you can enable image, quantity switcher, and also th option to delete any item front the cart.
Expand the Coupon section to enable/disable it. You can make the coupon field collapsible if you want and set a custom button text.
Similarly, you can adjust the shipping policy and testimonial section.
After customizing all the Bricks blocks on the checkout page, make sure to update the settings.
Now, on the design tab, scroll down to the Checkout Form Fields section. Here, you can reorganize the checkout fields. You can add anything you want or remove anything you need.
You can also add any custom field based on your requirements. For more details, read our blog on adding custom fields to WooCommerce checkout.
Now move to the “Optimizations” tab and utilize these features to optimize your Bricks checkout page for conversion.
For more details, check our blog on checkout page optimizations.
Order bumps are low-dollar offers that users can add to their cart with a single click on the checkout page. To add an order bump, hit “Add Order Bump”, provide a name and click on “Add”.
Next, import the skin you like for your order bump.
Now search and add the order bump and hit Add.
This will add your order bump on the checkout page.
For more customization options, check our blog on WooCommerce order bump.
Move to the products tab to set the quantity of the order bump. You can offer a discount if you want.
After setting up your order bump offer, make sure to hit Save to update.
🔔 Note:
You can apply different rules to offer different oder bump to different audience. For more details read our blog on WooCommerce order bump.
Like order bumps, you can also offer one-click upsells right after users have checked. ne-click upsells tokenizes the payment details so users aren’t required to share the details again, making it convenient for them to buy the product with a single click.
Hit on the Offer step to customize the one click upsell. On the design tab you can customize the upsell template and on the Products tab, you can add the product you want to offer as one click upsell.
👉 For more details, read our blog on one click upsell.
As one-click upsells, you can customize the order confirmation page as well.
Once you’ve saved all your changes, go back to the funnel and hit the “Enable Store Checkout” button to activate the new store checkout with a custom WooCommerce Bricks checkout.
Here is the multi-step WooCommerce Bricks checkout we designed
This is how you can create a modern-looking user-friendly WooCommerce Bricks checkout using FunnelKit Funnel Builder.
Here are five best practices to enhance your store’s conversion rates and streamline the buying process:
1. Enable Google Address Autocomplete
Allow Google address autocomplete to help users quickly enter the correct address and place their orders faster. This not only boosts conversions but also prevents losses caused by incorrect shipping addresses.
2. Make optional field collapsible
Long checkout fields can overwhelm or distract users, resulting in cart abandonment. While multi-step checkout helps convert the long checkout process into user-friendly parts, it's always a good idea to make optional fields collapsible to shorten the form even further.
3. Make the checkout page device responsive
Most people nowadays shop using their smartphones. So it’s super important that you ensure your WooCommerce Bricks checkout page is responsive for mobile devices.
Ensure that your checkout is responsive, loads quickly, and has a user-friendly interface on mobile devices.
4. Offer multiple payment methods
Many people abandon their carts because they can’t find a convenient payment option. So, make sure you provide enough payment methods for your target audience. Especially if you run a local business, make sure local payment gateways are available on your WooCommerce Bricks checkout.
5. Enable social proof and testimonials
Almost 88% of customers trust user reviews as much as personal recommendations. So, always try to add social proof or testimonials on your checkout page that encourage users to complete the order placement process faster.
Yes, Bricks Builder is compatible with popular WooCommerce plugins and payment gateways, including Stripe, Paypal, etc.
Yes, by using Bricks Builder with FunnelKit Funnel Builder, you can easily create a multi-step checkout in WooCommerce.
No, you don’t need to know any coding. Bricks Builder is a visual page builder, so you can customize the WooCommerce checkout page without any coding knowledge.
Yes, you can add custom fields to your WooCommerce checkout page using Bricks Builder and FunnelKit Funnel Builder. You can add any type of field, such as a text field, drop-down, radio, etc.
As you have seen, creating a modern, conversion-optimized multi-step checkout is a breeze when you combine Bricks Builer with FunnelKit Funnel Builder.
The checkout page is the final and most crucial step in the buyer’s journey because if shoppers abandon it, all the efforts to get them there goes to waste.
That’s why experts always recommend paying special attention to your checkout page and optimizing it to maximize conversions.
Over 30,000 WooCommerce store owners use FunnelKit Funnel Builder to implement conversion optimized checkouts and boost their sales. Not only does it increase conversions, but it also helps raise average order value.
If you’re a Bricks Builder enthusiast looking to increase both sales and revenue, FunnelKit Funnel Builder is the perfect solution for you.
So, get FunnelKit Funnel Builder today, pair it with your favorite Bricks Builder, and start boosting your conversions!
