Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Customize WooCommerce Checkout Page (The Easy Way)

Do you want to customize your WooCommerce checkout page?

WooCommerce comes with a default checkout page, but it isn’t optimized for conversions. By replacing it with a custom checkout page, you can get more sales and improve your conversion rates.

In this article, we’ll show you how to easily customize your WooCommerce checkout page, step by step without writing any code.

How to customize WooCommerce checkout page (the easy way)

Why Customize WooCommerce Checkout Page in WordPress?

Studies show that between 70-85% of all shopping carts are abandoned. In other words, most visitors will leave your checkout page without making a purchase.

With that in mind, you’ll want to do everything you can to convince customers to complete their purchase. However, the built-in WooCommerce checkout isn’t optimized for sales.

The default WooCommerce checkout

By creating a custom WooCommerce checkout page, you can add content that encourages shoppers to buy, including social proof such as customer testimonials and five star ratings.

You can also show related products that the shopper may want to add to their basket, and optimize the layout to remove any friction.

In the following image, you can see an example of an optimized checkout page, taken from the AIOSEO site.

Checkout page example

Before you move forward, you may also want to customize your WooCommerce cart page. By optimizing both your cart and checkout pages, you can make the entire buying process feel effortless so you don’t miss out on any sales.

You can also design both pages to have the same branding and offer your visitors a consistent checkout experience.

With that said, let’s take a look at how you can easily customize your WooCommerce checkout page and make more money from your online store.

Video Tutorial

Subscribe to WPBeginner

If you’d prefer written instructions, just keep reading.

How to Customize Your WooCommerce Checkout Page in WordPress

The easiest way to create a custom WooCommerce checkout page is by using SeedProd.

SeedProd is the best drag and drop WordPress page builder used by over 1 million websites. It comes with more than 180 professionally-designed templates including eCommerce templates that you can use to create sales pages and lead squeeze pages.

Even better, SeedProd has full support for WooCommerce and even comes with special WooCommerce blocks that you can use to create a custom checkout page, fast.

First thing you need to do is install and activate the plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Note: There is a free version of SeedProd, but for this guide we’ll use the Pro version because it has the built-in WooCommerce blocks we need. It also integrates with the email marketing services you may already be using to get more sales and conversions.

Upon activation, go to SeedProd » Settings and enter you license key.

SeedProd license key

You can find this information under your account on the SeedProd website. After entering the license, click on the ‘Verify Key’ button.

After that, go to SeedProd » Landing Pages and click on ‘Add New Landing Page.’

SeedProd's page design templates

Next, you need to choose a template for your custom checkout page.

SeedProd’s templates are organized into different campaign types such as coming soon and 404 page. You can click on the tabs at the top of the screen to filter templates based on campaign type.

Choosing a design that matches the type of page you want to create will help you build the page faster. However, every template is fully customizable so you can always fine-tune the design to better fit your online store.

For this guide, we’ll select the ‘Blank Template’ since it lets us build the exact kind of checkout page we want.

To select a template, hover your mouse over it and then click the ‘Checkmark’ icon.

Select blank SeedProd template

Next, go ahead and type in a name for your custom checkout page. SeedProd will automatically create a URL based on the page’s title, but you can change this URL to anything you want.

When you’re happy with the information you’ve entered, click on the ‘Save and Start Editing the Page’ button.

Name checkout page

This will take you to the drag and drop editor, where you can build your custom WooCommerce checkout page.

The SeedProd editor shows a live preview of your checkout page to the right, and some block settings on the left.

Creating a custom checkout page for your WooCommerce store

First, we’ll add a header and then customize it with your own branding.

SeedProd comes with sections, which are collections of blocks that are often used together. To adda a header section, click on the ‘Sections’ tab and then select the ‘Header’ category.

Insert header section

After that, hover your mouse over the ‘Header 1’ section and click the ‘Plus’ icon.

This adds a Header section to your layout.

Adding a header section to your custom checkout screen

To start, you’ll want to replace the placeholder ‘Your Logo’ by clicking to select that block.

Then, click on the ‘Select Image’ icon in the left-hand menu.

Adding a custom logo to the WooCommerce checkout screen

You can now choose an image from the media library or upload a new file from your computer.

The Header 1 section comes with a navigation menu. However, you’ll typically want to delete this menu so it doesn’t encourage visitors to abandon your checkout page without completing their purchase.

To delete the Nav Menu block, simply click to select that block. Then, click on the ‘Delete Block’ option.

Delete menu block

Once you’ve done that, click on the call to action button.

We’re going to change the button’s text to ‘View Cart’ so shoppers can easily go back to the cart page and add more items, or change the quantity.

In the ‘Button text’ editor, type in the call to action that you want to use instead.

Edit button text

Next, type the URL of your WooCommerce cart page into the ‘Link’ field.

Now, clicking this button will take shoppers to their cart.

The SeedProd WooCommerce blocks

After that, it’s time to choose a layout for the rest of your checkout page.

In the ‘Choose your layout’ section, click on the content and sidebar layout, as this lets you create a section for your checkout plus a recommended products section.

Select two column layout

Once you’ve done that, find the ‘Checkout’ block in the left-hand menu and drag it over to your layout.

You can completely customize how your checkout looks using the settings in the left-hand menu, including changing the color scheme, font choice, link color, buttons, and more.

Add checkout block

Next, it’s a good idea to add a popular products or recommended products section. This can get you more sales by promoting other products that shoppers might want to buy.

To create this section, simply drag a ‘Best Selling Products’ block onto your page.

Add WooCommerce products block

For more details, please see our guide on how to display popular products in WooCommerce.

Next, you can add a headline above the popular products. Simply drag the ‘Headline’ block over to your page and drop it above the popular products block.

Add product headline block

Then, click to select the ‘Headline’ block and type the text that you want to use.

Once you’ve done that, you can add a customer testimonials block. Simply find the ‘Testimonials’ block and drag it onto your layout.

Add testimonials block

You can now change how the testimonials look on your online store.

For example, in the left-hand menu you’ll see settings to change the color of the comment bubble, change the alignment, and add more customer testimonials to this section.

Another great idea is to show a star rating underneath your testimonial.

To do this, simply find the ’Star Rating’ block and drag it under the testimonial block.

Add star rating block

When you’re happy with how the WooCommerce checkout page looks, it’s time to publish it by clicking on the dropdown arrow next to ‘Save.’

Then, select the ‘Publish’ option.

Publish checkout page

Now, if you visit your store you’ll see the checkout page live.

Pro tip: Conversion tracking can help you see what’s working on your checkout page, and what isn’t. You can then use this insight to fine-tune your checkout page using SeedProd. For more details, see our step by step guide on how to setup WooCommerce conversion tracking.

WooCommerce checkout page example

Assign Your Checkout Page to WooCommerce

Once you’ve published your custom checkout page, you need to change the default WooCommerce URL settings so customers go to your new page instead of the default one.

First, go to WooCommerce » Settings and click on the ‘Advanced’ tab.

Changing the WooCommerce URLs

After that, open the ‘Checkout page’ dropdown and start typing in the URL of the custom checkout page you just created.

When the right page shows up, select it.

Changing the WooCommerce checkout URL

After that, don’t forget to scroll to the bottom of the page and click on ‘Save changes’ to store your changes.

How to Reduce Checkout Page Abandonment

Checkout page abandonment is when a customer starts the checkout process, but doesn’t complete their payment. Similar to cart abandonment, it’s a big problem for all online stores.

Creating a custom checkout page is a great way to reduce abandonment rates and get more sales. However, there are a few more things you can do to further increase your sales.

Avoid Adding Any Extra Checkout Charges

When customers go to checkout, they expect the total price to be similar to the total product prices. If they get to the checkout page and see taxes, high shipping costs, and other additional fees, then there’s a good chance they won’t complete the purchase.

Added fees example

Some customers might continue with the purchase if they think the costs are justified. However, it’s far better to be upfront about your pricing.

If you have lots of extra fees, then we recommend adding these to your product prices.

You may also want to offer free shipping on all your products, or you might offer free shopping on all orders above a certain amount.

Make Account Creation Optional or Simpler

Asking shoppers to create an account in order to complete their purchase adds more friction to the buying process, and can increase your checkout abandonment rates.

You can allow user registration to your WordPress site, but it should not be a requirement. For example, you might ask shoppers to create an account and join your email list after they complete their purchase.

To encourage signups, you might offer extra perks such as an exclusive coupon code for anyone who creates an account.

Offer More Checkout Payment Options

Shoppers may abandon your checkout page if you don’t support their favorite payment method. While it’s impossible to offer every single payment method, you should aim to provide the most comment payment options.

Payment options example

Your customers can then use the payment method that’s most convenient for them.

For more details, see our list of the best WooCommerce payment gateways for WordPress.

We hope this article helped you customize the WooCommerce checkout page easily. You may also want to see our guide on how to create an email newsletter, and our list of the best WooCommerce plugins for your store.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

Comments

  1. Congratulations, you have the opportunity to be the first commenter on this article.
    Have a question or suggestion? Please leave a comment to start the discussion.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.