How to customize a WooCommerce checkout with Bold Checkout — and drive more revenue
The default WooCommerce checkout page is intentionally simple and works well for many small businesses. But for developers working on WooCommerce stores that generate $1 million or more in online sales, the default checkout is inadequate and puts revenue at risk.
Larger brands on WooCommerce tailor their checkout to accommodate specific needs, such as conditional checkout fields, quick checkout, additional payment options, donations, extra fees, address validation, types of order delivery and more. Developers turn to plugins to achieve these customizations. After all, the extensibility of the WooCommerce platform is what makes it so appealing. A highly customized WooCommerce checkout can have, on average, 20-30 plugins.
Yet a plugin heavy environment creates its own set of unique challenges, including:
- Security vulnerabilities due to a large number of plugins with no single owner.
- A lack of plugin vendor support or clear roadmaps for functionality.
- Performance degradation between independent plugins.
- Expensive maintenance of a heavily customized solution.
These challenges can quickly result in poor checkout performance, including slow checkout load time. That, in turn, leads to lost revenue as shoppers abandon their carts and fail to convert. Brands can lose as much as 30% of revenue because of lower conversion rates when a WooCommerce checkout is poorly performing, according to our independent tests.
SaaS performance plus limitless customizations — without risking revenue
At Bold, we have developed a checkout solution to address this exact problem. The Bold Checkout Experience Suite is a headless, SaaS checkout solution for WooCommerce in one lean plugin that’s managed directly in a WooCommerce dashboard. The single plugin solution:
- Provides enterprise-grade performance, efficient lightweight management, and integrated value add offerings.
- Reduces security risks with PCI DSS Level 1 and SOC2 compliance.
- Removes friction with one-click and single-page checkout.
- Has one set of APIs to cover taxes, shipping, payments, pricing, security, and subscriptions and to make any channel shoppable.
- Boosts average order value by expanding pricing, promotions, and upsell capabilities.
- Includes Bold Subscriptions to convert one time transactions into recurring revenue and grow customer lifetime value.
Perhaps most importantly, Bold Checkout loads more than four times faster than the WooCommerce checkout. This speed means brands can slash revenue losses associated with performance degradation by up to 30%. On a $10 million store, that is a potential savings of $240,000 in revenue annually.
If you want to explore the Bold Checkout Experience Suite on WooCommerce, contact us and we will send over access.
In the meantime, here are some of the top questions about customizing the WooCommerce checkout that the Bold Checkout Experience Suite can help solve:
- How to set up a headless checkout on WooCommerce?
- How to add additional fields to WooCommerce checkout?
- How to create discount codes in WooCommerce?
- How to add dynamic pricing to my WooCommerce checkout?
- How to add subscriptions in a WooCommerce store and checkout?
How to set up Bold’s headless checkout on WooCommerce?
Setting up Bold’s headless checkout on WooCommerce only takes a few minutes. Before starting, take a moment to note what APIs you want to access for your headless project.
Start by logging in as an administrator in the WordPress dashboard. Go to the WooCommerce menu, then Bold and login with your Bold Account credentials.
Next, navigate to Developer Settings. Click on "Create API key" to start the creation of the new API key. Give your API a name then select the scopes. These are the API resources you need to access for your projects and include products, customers, orders, checkout, price rules, and more. Once your API is created, these scopes will not be available to edit.
With those configured, click on "Create" to create the API key. Save the newly created Shared Secret and API key in a safe place.
Next, head to the WooCommerce menu then Settings menu, click on the "Integrations" tab and then Bold Checkout. Check the "Enable Bold Checkout" form and fill in the saved Shared secret and API key.
Congratulations, the headless Bold Checkout is now configured.
How can I add additional fields to my Checkout?
Given how critical a checkout page is in an ecommerce store, brands often want to customize the fields to capture specific information for each order. Perhaps a customer needs to leave a note about their order, like instructions for delivery, adding a birthday, or a preference on a gift with purchase.
With the Bold Checkout Experience Suite for WooCommerce, it’s simple to add a custom field in your checkout by using actions & filters with WooCommerce. Here’s the code to use in the theme's function.php file:
add_action('woocommerce_after_checkout_billing_form', 'custom_checkout_field' );
echo '<div id="custom_checkout_field">';
'type' => 'text',
'class' => array(
'label' => __('Custom Additional Field') ,
'placeholder' => __('New Custom Field') ,
With a few clicks, you can add a custom checkout field:
Here’s what it can look like in a checkout:
The information entered by customers in this custom field gets passed through to Orders in WooCommerce, so the brand never misses a detail.
How to create discount codes in WooCommerce using the Bold Checkout Experience Suite?
Offering a discount to customers is a popular tool in most brands' ecommerce and marketing strategies. Known as coupons, promo codes, or discount codes, these kinds of offers can help brands attract new customers.
A survey found 80% of shoppers say they are more likely to make a first-time purchase from a brand that is new to them if they have a discount or offer code. Without it, shoppers are far more likely to abandon their carts. Another survey found that two-thirds of consumers say they have “made a purchase they weren’t originally planning to make solely based on finding a coupon or discount.”
With Bold Checkout Experience Suite for WooCommerce you can create a discount code in less than 60 seconds right in the Bold Account Center. First, navigate to the Bold Checkout app then click on the Payment Options drop down menu. Select Discount Codes and then click the Create Discount Code button.
From there, fill out the details of your discount code, such as:
- Name of the code.
- Code phrase that customers will use in the checkout.
- Discount value, such as percentage off, dollar amount saved, or free shipping.
- Additional option details, like a limit for how often the code can be used, how often it can be used per customer and a date range for the code to be valid.
Once you click save, your discount code is active and will work in your Bold Checkout.
How to add dynamic pricing to my WooCommerce checkout?
Dynamic pricing means selling the same product at different price points to different groups of customers. This can include simple use cases such as employee pricing for products or seasonal sales as well as much more complex scenarios with B2B wholesale pricing for customer segments based on negotiated contracts.
Bold Checkout can easily accommodate dynamic pricing in a WooCommerce checkout. Once enabled, it ensures the right price is served to a logged in customer. Here’s how to implement dynamic pricing:1) Enable Price Rules: To do this, start by installing Bold’s Price Rules Engine in the Bold Checkout App. (For a detailed walkthrough, visit this guide.)
2) Create Your Price Rules Using The API: Then use Bold’s Price Rules API to create a discount for a specific group of customers. Here’s what this can look like for setting up a 15% discount:
} ] } ] } }
3. Dynamically Render Price Rules On The Storefront: You don’t have to build the middleware to connect the backend to the storefront. Bold has already done the magic to render the price rules on your product page.
To make that happen, add the Bold Platform Data Snippet within your project. It can be added as a plugin or, alternatively, it can be added within a themes’ functions.php file.
This will dynamically update the pricing on a storefront product page, cart page and checkout to match the rule created within Bold Price Rules API, as seen below.
How can I add subscriptions in my WooCommerce store and checkout?
Gartner has predicted that by 2023 more than 75 percent of organizations selling directly to consumers will offer subscription services. In Bold’s Drivers of Success: 2021 Subscription Trends report, 71 percent of the Bold Subscriptions brands who answered the survey view subscriptions as important or extremely important to the future health of their business.
Subscriptions are a unique way for brands to create recurring revenue streams while engaging consumers — from discovery and checkout all the way to unboxing — to maximize customer lifetime value. In fact, adding a subscription offering can increase customer lifetime value by 178%.
For brands using WooCommerce, adding a subscription offering for any product is simple and fast with Bold Subscriptions. To create a subscription, add the Bold Subscription plugin to your WooCommerce store through the Marketplace in the Bold Checkout plugin.
Once installed, you can turn any product in a WooCommerce store into a subscription offering in less than 90 seconds. This is done by navigating to the subscriptions plugin and clicking on Subscription groups in the menu. Click on the Create subscription group button and give this group a name. A subscription group might be all the products in a store that get a discount when purchased on a subscription. So a subscription group name could be “Subscribe & Save”.
With the name entered, click the select products button and choose which products are included in this subscription group. Then configure the subscription frequency and discount for subscribing and click save changes.
A subscription offering for each of the products in your subscription group is immediately available in that WooCommerce store.
Here’s what it can look like in a product page:
And in a checkout:
Have a question about a Bold Checkout feature not covered above? Contact us and we will reach out with an answer.