1. Home
  2. Docs
  3. WPFunnels – All Docs
  4. 7. How To Use An Upsell Offer After Your Funnel Checkout
  5. 7.2 Designing Your Upsell Offer Page Using Gutenberg

7.2 Designing Your Upsell Offer Page Using Gutenberg

In this guide, I will show you how you can design your Upsell page with the Gutenberg page builder.

I assume you’ve already added an Upsell step in your canvas.

If you’ve missed our previous steps, have a look at the following links to learn how you can add an Upsell to your WPFunnels canvas.

  1. How To Add An Upsell Offer To Your Funnel
  2. How To Assign The Offer Product To Your Upsell Step

Now, follow the easy steps to design/edit your Upsell offer page

Step 1: Open Upsell Step With Gutenberg

1. Open your WPFunnels canvas.

WPFunnels Canvas

2. Click on the Upsell step, and you will get Upsell settings options on top of the Upsell step.

WPFunnels Upsell Settings

3. Click on the Edit (pen icon) option from the Upsell settings options.

WPFunnels Edit Upsell Page Button

Once you click on the Edit button, it will open a new tab where you will get the option to edit your Upsell page with the Gutenberg page builder.

Edit Upsell Page With Gutenberg

Step 2: Edit Upsell Page WIth Gutenberg

Now, once your Upsell page is in edit mode with Gutenberg, you will get plenty of options to design the page just like the way you want.

To do so-

1. Click on the Template dropdown on the right side of the screen.

Edit Upsell With Gutenberg - Change Canvas

2. Once you click on the dropdown, you will get the different canvas options.

Select your preferred canvas style and click on the Update button to start working with the new canvas.

3. Now, on this Gutenberg editor, you will get a plus (+) button, which you can use to add any new block to your canvas.

Search and select any block and it will be added to the canvas.

Edit Upsell With Gutenberg - Add Block

4. To add WPFunnels Offer Button, search for the WPFunnels Offer Button in the search box, and the Offer Button will be added to your canvas.

Gutenberg Add WPFunnels Offer Button

5. Once you add the Offer Button block, on the right you will get the Offer Button settings.

Edit Upsell - Gutenberg - WPFunnels Offer Button Settings

6. Change the settings as you want and continue with the design.

7. Finally, once you are done with the design, click on the Update button.

8. Now, to see your upsell page in action or test the page, click on the Preview button of Gutenberg:

Gutenberg Upsell Step Preview

And you will view your Upsell page in action in a new tab.

Was this article helpful to you? Yes No

How can we help?