[Pro] How to build a custom checkout template

Would you like to take control of how your WooCommerce checkout page looks? The Templates Builder in Botiga Pro lets you create a custom checkout template and design the layout yourself, using either the Block Editor or Elementor.

In this guide, we’ll walk you through how to build a custom checkout template in Botiga.

Before you get started, make sure you’ve installed and activated the Botiga theme on your WordPress site. If you’re using features from Botiga Pro, ensure that both the Botiga theme and the Botiga Pro plugin are installed and active. The Templates Builder is a Botiga Pro feature, so this requires Botiga Pro.

1. Go to Botiga ยป Theme Dashboard and activate the Templates Builder module.

Activating the Templates Builder module in the Botiga Theme Dashboard

2. Click on Build Templates.

The Build Templates button in the Templates Builder module

3. Find the Checkout category and click on Create.

The Checkout category in the Botiga Templates Builder

4. Name your template.

Naming the new checkout template in Botiga

5. Choose the builder.

Choosing a page builder for the checkout template

6. Edit the template content.

Editing the checkout template content

The Templates Builder works with either the WordPress Block Editor (Gutenberg) or the Elementor page builder.

7. If you’re using the Block Editor, click the plus icon and search for the Botiga Templates Builder components to insert on the page. If you’re using Elementor, skip this step and move on to the next one.

Inserting Botiga Templates Builder components in the Block Editor

8. If you’re using Elementor, you’ll find the Botiga widgets under Botiga WooCommerce in the left sidebar. If you’re using the Block Editor, skip this step and follow step 7 instead.

The Botiga WooCommerce widgets in the Elementor sidebar

9. Once you’re done, remember to save your changes.

Saving the finished checkout template

Set display conditions (optional)

By default, the template shows on every page in its category. With display conditions, you can narrow that down so the template appears only in specific situations, for example only for logged-in users.

The Display Conditions button on a Botiga checkout template

Click Display Conditions and a popup opens where you can select the conditions you want.

Selecting display conditions for the checkout template

Frequently asked questions

Below, we’ve answered some of the most common questions about building a custom checkout template in Botiga.

Will a custom checkout template work with my payment gateways?

Yes. The template controls the layout and design of the checkout page. Your WooCommerce payment gateways keep working as configured.

Can I have more than one checkout template?

You can create multiple templates and use display conditions to decide which one shows in each situation. Keep the conditions specific so two templates don’t compete for the same page.

That’s it! You’ve successfully built a custom checkout template in Botiga and learned how to control where it appears.

Next, would you like to round out the cart experience too? Check out our guide on building a custom cart template, or read the Botiga Templates Builder overview to learn more.