Design Funnel Steps Easily

  1. Home
  2. Docs
  3. Design Funnel Steps Easil...
  4. Design Your Funnel Steps ...
  5. How To Design Your Funnel Checkout Page – Oxygen Builder

How To Design Your Funnel Checkout Page – Oxygen Builder

WPFunnels allows you to create and edit your funnel pages using Oxygen Page Builder.

In this guide, you’ll learn to design and customize your funnel Checkout page with Oxygen Page Builder.

So, let’s begin.

Design Your Funnel Checkout Page with Oxygen Page Builder

Step 1:

Go to your Dashboard > WPFunnels. Now Add a New Funnel or start editing the existing one.

Step 2:

Click on the Checkout step on your funnel canvas.

4 new options will appear on top of it.

  • Settings
  • View
  • Edit
  • Configure
WPFunnels Checkout step Settings

To edit the Checkout page, click on the Edit icon.

WPFunnels edit Checkout step

Step 3:

Once you click on the Edit icon, a new tab will open with the Oxygen page builder plugin, through which you can edit your Checkout page.

To get the full canvas, you can select WPFunnels Canvas from the template option on the right side of the window.

And to start editing the template, click on the Edit with Oxygen button.

WPFunnels Oxygen Builder Checkout Page Option

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

Step 4:

Once you click on the Edit with Oxygen button, your Checkout page will be opened with the Oxygen builder.

Edit WPFunnels Checkout Page with Oxygen Builder

If you click on any section, you will see the section-related settings/ options on the left side of the window.

Step 5:

To add the WPFunnels element to the checkout page,

Simply click on the Add button from the top-left of the window, and you will get the option to search the elements.
Or you can also click on the WPFunnels accordion option to get the WPFunnels elements for Oxygen builder.

WPFunnels Elements of Oxygen Builder

Now, if you want to add the Checkout element to the page, simply click on the WPF Checkout element from the WPFunnels element box, and this element will be added to your checkout page.

WPFunnels Checkout Element of Oxygen Builder

** Remember, if you haven’t added any products on the WPFunnels canvas, it will show a “No Products Added” message.

Step 6:

Once the checkout section is added, you can change the layout by clicking on the Layout option from the left side of the window.

You will get the option to change the layout to 1 column, 2 columns, or to Multistep.

WPFunnels Checkout Step Layout Option of Oxygen Builder

Also, you can change the Billing, Shipping, Order, Payment, etc sections settings and design by selecting the relevant option from the left side of the window.

Step 7:

Make any changes you want, and then click on the Save button on the upper right corner of the window, and your changes will be saved.

WPFunnels Oxygen Builder Save Button

Step 8:

That’s it. Your Checkout Page is ready.

Now, to see your updated Checkout Page in action, go back to your funnel canvas, click on the Checkout step and then click on the view icon.

How can we help?