Design Your Sales Funnel Steps

  1. Home
  2. Docs
  3. Design Your Sales Funnel Steps
  4. Design Your Funnel Steps With Gutenberg
  5. How To Customize Your Funnel Checkout Page – Gutenberg

How To Customize Your Funnel Checkout Page – Gutenberg

With WP Funnels, you can design and edit your Checkout page using Gutenberg.

To design or edit your Checkout page with Gutenberg, first, Add a New Funnel or start editing an existing funnel.

Now, when you click on the Checkout step, you will see three new options on the top of the Checkout step.

The first one is the Settings option, the second option is the View option, the third option is the Edit option, and the last option is the Configure option.

To edit the Checkout page, click on the Edit icon and a new tab will open with Gutenberg Page Builder, through which you can edit your Checkout page.

image 1 3

Note: If you set Gutenberg as the default page builder the Checkout page will open with Gutenberg. You can change the default page builder from the WPFunnels Settings.

Now, you can edit the Checkout page from scratch or you can use one of our pre-made templates. Here I’m editing the Checkout page from scratch.

image 2 3

On your right, click on the plus [+] sign to choose a block.

You will see the WPFunnels Checkout block. If you don’t see it, search for it on the block search bar.

image 3 2

Now just click on the WPFunnels Checkout block to add it to your Checkout page. It will add a two-column Checkout form.

image 4 2

To make any changes to your Checkout block, go to the Block tab on your right and you will get some options to change the Layout, Enable Order Bump, etc.

image 5 3

Click on the Gutenberg Update button from the top bar to save the changes.

image 6 2

Now, to see your Checkout page in action, click on the Preview button next to the Gutenberg Update button, then click Preview in new tab and you will see the live view of the page.

image 7 2

As you started editing from scratch, edit and complete your Checkout page with the necessary content and design.

That’s it, your Checkout page will be ready.

Was this article helpful to you? Yes No

How can we help?