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.
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.
Table of Contents
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.
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:
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.
It adds a new option to the side bar that removes everything from the page, except the blocks.
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.
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:
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:
And the settings for the checkout button:
And I also like to remove the label text, as I think it looks cleaner:
Also, make sure you select your new custom checkout page:
And save the product.
Step 4: Add Your Product Shortcode
Now, you’ll have a custom shortcode of this products checkout.
You’ll need to copy this shortcode and paste in into the shortcode box on the checkout page:
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:
And after the CSS:
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:
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.