Checkout Page Template for Upsell Plugin

In this post, I’ll show you how to turn the default Upsell Plugin checkout page into a more modern design, using only Gutenberg and the free version of GenerateBlocks.

upsell plugin checkout template

It shows your own logo at the top of the page, the featured image of the page in the top right corner, and some text for you to add about your product.

And all you need to do is copy and paste some text into the Gutenberg editor.

Let’s get started.

Watch the Video Tutorial

What You’ll Need

The only plugins you need is of course Upsell Plugin and the other is GenerateBlocks.

GenerateBlocks adds an extra six blocks to the Gutenberg editor to help you create high quality landing pages and sales pages.

generateblocks blocks

And Upsell Plugin lets you sell products with an unlimited number of upsells, downsells, and order bumps, all within WordPress.

Also, if you want to hide your main logo and website navigation, your theme might have the ability to do this.

I’m using GeneratePress and the options are at the bottom of the sidebar of every page:

gp layout checkout

Most popular WordPress themes like Astra and Kadence have similar options.

However, if your theme doesn’t support it, there is a work around with a plugin called Blank Slate.

blank slate 1

It adds a new option to the side bar that removes everything from the page, except the blocks.

blank slate

How to Create a Custom Checkout Page for Upsell Plugin

Follow these 5 steps below to complete transform your Upsell Plugin checkout page.

Step 1: Install GenerateBlocks

Go to the plugins and search for GenerateBlocks.

generateblocks

Install and activate the plugin and then move onto the next step.

Step 2: Create a New Checkout Page

Now that you have GenerateBlocks installed, all you need to do is paste the text in the box below onto your page.

Give your page a title (for internal use only), hit enter and press Ctrl-Alt-V on Windows or Command-V on Mac, or right click and click on paste:

paste gutenberg blocks

Here’s the code:

<!-- wp:generateblocks/container {"uniqueId":"7ce06c82","containerWidth":835,"paddingTop":"30","paddingBottom":"40","backgroundColor":"#eeeeee","align":"full","isDynamic":true,"blockVersion":2} -->
<!-- wp:site-logo {"width":250,"isLink":false,"shouldSyncIcon":false,"align":"center","className":"is-style-default"} /-->

<!-- wp:generateblocks/container {"uniqueId":"20b6d7c0","containerWidth":850,"marginTop":"30","borderSizeTop":"4","borderSizeRight":"1","borderSizeBottom":"1","borderSizeLeft":"1","borderColor":"#364f6b","gradientDirection":90,"gradientColorOne":"rgba(255, 255, 255, 0.1)","gradientColorTwo":"rgba(0, 0, 0, 0.30)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/grid {"uniqueId":"2c463dad","columns":2,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"eb24bd25","isGrid":true,"gridId":"2c463dad","width":66.66,"widthMobile":100,"paddingTop":"30","paddingRight":"30","paddingBottom":"40","paddingLeft":"30","borderColor":"#0092a8","backgroundColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"f12012a0","element":"p","alignment":"center","backgroundColor":"","textColor":"#c6c6c6","fontWeight":"500","fontSize":17,"hasIcon":true} -->
<p class="gb-headline gb-headline-f12012a0"><span class="gb-icon"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.7 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0z"></path></svg></span><span class="gb-headline-text">100% secure SSL encrypted payment</span></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:shortcode /-->

<!-- wp:generateblocks/image {"uniqueId":"6050aad8","mediaId":513,"sizeSlug":"full","alignment":"center","marginTop":"30"} -->
<figure class="gb-block-image gb-block-image-6050aad8"><img class="gb-image gb-image-6050aad8" src="https://wpconfidence.co/wp-content/uploads/2022/10/cards1.png" alt="" title="cards1"/></figure>
<!-- /wp:generateblocks/image -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"fd3b2061","isGrid":true,"gridId":"2c463dad","width":33.33,"widthMobile":100,"paddingTop":"30","paddingRight":"30","paddingBottom":"30","paddingLeft":"30","backgroundColor":"#F5F5F5","isDynamic":true,"blockVersion":2} -->
<!-- wp:post-featured-image {"width":"150px","height":"","scale":"contain","align":"center"} /-->

<!-- wp:generateblocks/headline {"uniqueId":"8ff6ba05","element":"h3","fontSize":22,"marginTop":"30"} -->
<h3 class="gb-headline gb-headline-8ff6ba05 gb-headline-text">What you get:</h3>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"ce39ad57","element":"p","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","fontSize":20,"iconColor":"","iconSize":1.5} -->
<p class="gb-headline gb-headline-ce39ad57 gb-headline-text"><strong>➡️ Awesome benefit or feature</strong> - Briefly descibe a feature and/or benefit of the product</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"1f99504a","element":"p","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","fontSize":20,"iconColor":"","iconSize":1.5} -->
<p class="gb-headline gb-headline-1f99504a gb-headline-text"><strong>➡️ Awesome benefit or feature</strong> - Briefly descibe a feature and/or benefit of the product</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"b1cd0ff2","element":"p","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","fontSize":20,"iconColor":"","iconSize":1.5} -->
<p class="gb-headline gb-headline-b1cd0ff2 gb-headline-text"><strong>➡️ Awesome benefit or feature</strong> - Briefly descibe a feature and/or benefit of the product</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

Add a featured image of your product to the page and this will update the image in the top right corner.

Make sure you remove elements from the page that you don’t want like the main title, featured image, and the navigation, using your theme settings or Blank Slate.

Then save.

Step 3: Edit the Product Checkout Settings

If you want the checkout to look like the image above, then you’ll need to make some changes to your product checkout settings.

Otherwise this step is optional.

In the Upsell Plugin, add or edit a product with these checkout settings:

checkout settings1

And the settings for the checkout button:

checkout settings2

And I also like to remove the label text, as I think it looks cleaner:

checkout settings3

Also, make sure you select your new custom checkout page:

checkout settings4

And save the product.

Step 4: Add Your Product Shortcode

Now, you’ll have a custom shortcode of this products checkout.

checkout settings5

You’ll need to copy this shortcode and paste in into the shortcode box on the checkout page:

paste checkout chortcode

Save the page.

Step 5: Add Custom CSS (Optional)

Lastly, this is just a final touch to the design of the checkout form.

I’ve added some CSS below to make a subtle difference to the design.

Here’s the default:

default check fields

And after the CSS:

updated checkout fields

Here’s the code:

.upsell {
	font-size: 17px;
}
.upsell legend {
  text-align: left;
}
.upsell .input-group-append .btn {
  font-size: 17px !important;
}
.upsell .form-control {
  padding: 22px 15px;
  background-color: #FCFCFC;
  border: 2px solid #ebebeb;
  border-radius: 3px;
  margin-bottom: 0px;
}
.upsell legend, .upsell .form-group {
  margin-bottom: .8rem;
}
.upsell-checkout-form fieldset {
  margin-bottom: 20px;
}

To add the code, paste it into your theme customizer, under Appearance > Customize > Additional CSS:

add custom css

That’s it!

Go take a look at your custom checkout page.

Conclusion

I hope you found this post helpful.

I’ll be creating more templates soon and some YouTube tutorials to help you build better funnels with WordPress and increase your sales.

So make sure you subscribe to the YouTube channel and join the email list below.

Subscribe to Get the Lastest Blog Updates and Exclusive Content Sent to Your Inbox ✉

Content of popup

Processing...