Introduction
In this tutorial, you’ll learn how to create an entirely custom WooCommerce checkout page using Breakdance. Even though Breakdance provides a default two-column WooCommerce checkout page designed for conversions, you might want to customize it further. This documentation will guide you through the customization process step-by-step.
Accessing the Breakdance Editor
Initial Setup
- Navigate to your WooCommerce Checkout page on the front-end.
- Find “Breakdance” in the admin bar at the top of the page.
- Hover over “Breakdance” and click “Open Checkout”.
- Once inside the Breakdance editor, add a “Checkout Page Element” to your page. The page will look like the default setup initially.
Customizing the Checkout Page
Layout and Section Customization Options
- You can adjust the layout, switching between a two-column to a single column layout.
- Disable the coupon code section if needed.
- Override the global styles for various sections such as the coupon code, billing details, shipping address, and more.
- Customize the typography of headings or make adjustments to spacing.
Global Settings and Consistency
Using Global Settings for Brand Consistency
- Access global settings by clicking on the three-dot menu and selecting “Global Settings”.
- Adjust elements according to your brand, ensuring consistency across the website. For instance, you can change the color of all primary buttons to match your brand color.
- It’s crucial to remember that global settings will affect multiple elements of your site, not just the checkout page. Hence, make changes here for broad, site-wide customizations.
Additional Notes
Even though there are numerous customization options available, it’s advisable not to make too many changes. The default Breakdance checkout page is already designed with conversions in mind. However, if you want to personalize it further, ensure that the changes are aligned with your brand and user experience goals.
