3 Effective Ways to Customize & Edit WooCommerce Checkout Page

3 Effective Ways to Customize & Edit WooCommerce Checkout Page
Comments Off on 3 Effective Ways to Customize & Edit WooCommerce Checkout Page, 27/04/2022, by , in Wordpress

Searching for the best way to edit the WooCommerce checkout page? 🤔

Learning how to customize the WooCommerce checkout page allows you more control over its design and increases the potential for more sales.

🧑‍🏫 In this detailed tutorial, we’ll show you three code-free ways to customize the checkout page, including fully adjusting the design and/or changing the fields that appear on the checkout page.

We’ll also go over all of the built-in features that WooCommerce offers to customize the checkout experience.

Let’s get started…

Reasons to edit the WooCommerce checkout page

Is there a glaring reason to modify the WooCommerce checkout page to begin with? That depends. The built-in checkout module is clean, functional, and quick enough to process payments without annoying your customers.

But you may also notice its downsides. Here are the main reasons you might want to edit the WooCommerce checkout page:

To replace the default WooCommerce branding elements like their preset fonts, styles, and the WooCommerce purple. To add web items that relate to your business, like a logo, brand colors, and links to support documentation. If optimizing the checkout for conversions is required after testing. To speed up the checkout process by converting it into one step. To incorporate upsells, cross-sells, and related products. For adding custom fields or removing some fields provided by WooCommerce. To modify shipping options. For changing design elements like button text, preset field text, and guest checkout options.

How to edit WooCommerce checkout page

You have several options available to edit the WooCommerce checkout page. The method that works best for you will depend on the specific edits that you’re trying to make and whether or not you’re open to using a plugin.

Below, we’ll go over three of the best methods:

Native WooCommerce settings – WooCommerce includes a lot of built-in options for customizing the checkout, which we’ll detail in the first method. Your theme might also offer its own options to customize the checkout page design.Elementor Pro– Elementor Pro now offers its own checkout widget that lets you fully customize the design of the checkout page. This is a great option if you specifically want to edit the design of the page.Checkout Field Editor– this is a great option if you want to edit the form fields that appear on the checkout page. You can use it to add new fields, remove default fields, and rearrange everything as needed.

Let’s go through them.. 👇

Method 1: Use the default WooCommerce checkout settings

WooCommerce offers built-in settings to edit your checkout module, and your WordPress theme may already provide tools for adjusting some fields and checkout settings in the WordPress Customizer.

It’s always wise to check these settings before looking for an additional plugin, theme, or field customizer, since you may already have the features you need.

👉 For instance, WooCommerce has tools for removing certain fields, enabling tax rates during checkout, and showing coupon fields.

Step 1: Add tax calculations and a coupon field on checkout

WooCommerce has built-in settings to automate tax calculations and accept coupons at checkout.

To toggle either on/off, go to WooCommerce > Settings on WordPress.

edit WooCommerce checkout settings

Choose the General tab, and scroll down to the Enable Taxes section. Check the box to Enable Tax Rates and Calculations during checkout. This generates and displays tax fees based on the rates you configure in WooCommerce (WooCommerce > Settings > Tax > Standard Rates).

Check the box to Enable The Use of Coupon Codes to show a field where customers can type in discount codes.

enable rates and coupons

If you’d rather not show certain elements, simply remove the checkboxes. Make sure to click the Save button to see your changes on the frontend.

Step 2: Display product pricing with or without tax

It’s one thing to calculate taxes at the end of the checkout, but you must also decide if you’d like to include tax in the overall cost of products, especially as customers move through checkout.

In general, this shows more transparency, instead of increasing the price with tax right before the customer pays.

To include tax with pricing in the checkout process, go to WooCommerce > Settings > Tax.

tax tab

Scroll down on the page to find the field to “Display prices during cart and checkout.”

Pick from the dropdown:

Including taxExcluding tax

Click Save Changes.

including tax

Step 3: Set what shipping items show on the checkout

Also, under WooCommerce > Settings, you’re able to mark which shipping zone, methods, and calculations appear in the WooCommerce checkout.

Simply go to the Shipping tab and adjust:

Calculations: to enable the shipping calculator on the cart pageCalculations: to hide shipping costs in checkout until an address is insertedShipping destination: to set default shipping addresses in checkout

Click Save Changes.

shipping

Step 4: Manage accounts and privacy on the checkout

While remaining under WooCommerce > Settings, go to the Accounts & Privacy tab.

At the top of the page, you’ll see two fields:

Guest checkout: include/remove guest checkouts and existing account log ins Account creation: allow customers to create an account or start a subscription during the checkout

accounts and privacy

Continue down the Accounts & Privacy page to find the Privacy Policy area.

Fill in the Checkout Privacy Policy text box to ensure customers see the policy as they check out. Leave the field blank if you’d rather not display a privacy policy in that area.

checkout privacy policy

Step 5: Choose the actual checkout page and other advanced settings

Navigate to the Advanced tab to reveal a Page Setup section; this prompts merchants to tell WooCommerce where to send customers as they check out.

By default, WooCommerce generates Cart, Checkout, My Account, and Terms and Conditions pages, which you can find by going to Pages > All Pages on WordPress.

However, you have the option to generate an entirely new page and link it here. That overrides the default checkout pages and sends customers to the custom ones.

Another option in the Advanced tab is to Force Secure Checkout, which requires an SSL certificate.

secure checkout and page setup to edit WooCommerce checkout

Step 6: Change your theme’s checkout design in the WordPress Customizer

WordPress themes with WooCommerce functionality often install WordPress Customizer tools to easily adjust your checkout styling.

Keep in mind that all WooCommerce themes offer unique WordPress Customizer settings (some don’t have any settings at all), but overall, it’s worth checking the WordPress Customizer for quick control over the checkout.

To begin, go to Appearance > Customize on WordPress.

customize button to edit WooCommerce checkout

If available, your theme should display a WooCommerce button somewhere in the WordPress Customizer. Click on that.

edit WooCommerce checkout in customizer

This is just an example with the Storefront theme (so you may not see the same thing), but it’s rather common for themes to have a Checkout tab in the Customizer. Choose that, or something similar, that may indicate control over the checkout.

the checkout tab

Walk through all the checkout settings offered by your theme. In the Storefront theme, you can make these fields optional, required, or hidden:

Company name fieldAddress line 2 fieldPhone field

It’s also possible to highlight required fields with an asterisk.

changing fields

Finally, the Storefront theme offers options to show a Privacy Policy and Terms and Conditions page at the end of the checkout.

privacy policy

Method 2: Use a page builder to edit WooCommerce checkout fields and the overall style

Page builders like Elementor, Beaver Builder, and Themify all offer WooCommerce content widgets to override what’s currently on the WooCommerce checkout page.

Page builders almost exclusively reserve their WooCommerce checkout modules for their Premium plans, so there’s a good chance you’ll have to pay for this functionality. For example, you receive the Elementor Checkout widget with the Pro plan.

Having said that, a page builder gives you almost complete control over your checkout page, so it’s an easy way to edit WooCommerce checkout without coding knowledge, and only for around $50 to $100 per year.

👉 In this tutorial, we’ll show you how checkout customization generally works with a page builder, using Elementor.

Step 1: Open the designated Checkout Page in Elementor

To edit WooCommerce checkout in Elementor, you must go to the Checkout page automatically created by WooCommerce. Find that under Pages > All Pages.

edit WooCommerce checkout page

Open the page labeled “Checkout Page,” then click on Edit with Elementor.

edit with elementor

Step 2: Remove the WooCommerce checkout shortcode

WooCommerce has automatically added its “WooCommerce checkout” shortcode into the editor, which renders the default WooCommerce checkout module.

The goal is to swap that out for a checkout module from your page builder. So, delete the WooCommerce checkout shortcode.

edit WooCommerce checkout shortcode

Step 3: Drop in the Elementor Checkout widget

Now it’s time to find your page builder’s checkout widget. Elementor offers one called Checkout, which you can find using the search bar or by browsing under the WooCommerce heading. Click and drag the Checkout widget onto the blank page, where it says, “Drag Widget Here.”

Note: You may not see the Checkout widget if you haven’t upgraded to the Premium version of Elementor. This is the case for most page builders.

insert the elementor checkout module

Step 4: Customize the content, style, and advanced features

After dragging over the checkout widget, Elementor renders the checkout preview. You can then click on these tabs to the left to customize every aspect of the checkout:

customize elementor checkout for WooCommerce

As an example, you could switch the General Layout to one column and adjust the placeholder text for the first name field.

change placeholder

Other customization tabs include:

Billing DetailsAdditional InformationYour OrderCouponPayment

content settings to edit WooCommerce checkout

There are also endless ways to edit WooCommerce checkout under the Style tab.

Use these tabs:

SectionsTypographyFormsOrder SummaryPurchase Button

As an example, we switched out the blue Purchase button for a green one.

edit WooCommerce checkout to change it to green buy button

Finally, the Advanced tab offers even more powerful tools to edit:

LayoutsMotion EffectsTranformationsBackgroundsBordersMasksResponsivenessAttributesCustom CSS

edit WooCommerce checkout with advanced tools

As long as you stick with the page previously set as “Checkout Page” for WooCommerce, and swap out the WooCommerce checkout shortcode for the page builder checkout widget, you can save changes and complete the process!

Method 3: Install a customizer plugin to edit fields

Many WooCommerce checkout customizer plugins exist, such as:

Most WooCommerce checkout plugins provide additional customization tools to modify and add fields, but there are a few to completely revamp the design, like the Multi-step Checkout plugin.

⌛ We suggest you look into all the recommended plugins above, but we’ll go through a quick tutorial with the Checkout Field Editor plugin to help you understand how to edit WooCommerce checkout with a plugin.

Step 1: Install and activate the Checkout Field Editor plugin

Install the Checkout Field Editor plugin, then walk through the process of activating the plugin.

Once active, the plugin adds a new tab on WordPress, which you can access by going to WooCommerce > Checkout Form.

checkout form tab

Step 2: Edit the current fields

The plugin displays all the current fields inside your WooCommerce checkout, except the plugin now links to the default WooCommerce checkout, so you have full control over the fields.

You can edit:

Billing FieldsShipping FieldsAdditional Fields

To edit WooCommerce checkout fields, click Edit next to the field you want to change. For this example, we’ll modify the Company Name field.

edit WooCommerce checkout fields

In the Edit Field window, you can modify options for the field, like:

LabelPlaceholderDefault ValueClassValidation

It’s also possible to uncheck the Required box, so customers aren’t obligated to fill the field. You can also disable the field so it doesn’t show in the checkout at all. Make sure to click Save & Close.

make it not required

The plugin usually saves everything after that, but you can click the Save Changes button again to ensure it works.

As you can see, we removed the Company Name field from the checkout area.

now you can't see the field

And it’s gone from the frontend checkout.

on the frontend

You also might want to edit something like the Placeholder text. In that case, it’s the same process of opening the field in question and changing the settings.

edit WooCommerce checkout placeholders

The First Name field on our checkout now reveals new placeholder text.

the frontend

Step 3: Add a new field to the WooCommerce checkout

To add an entirely new field, click on the Add Field button.

add new field

Pick the Type of field, choosing from options like:

TextNumberHidden PasswordPhoneCheckboxMonthURLand many more

choose a field type

As an example, we’ll make a Number field and ask customers to type in their Loyalty Rewards Number. You can also designate elements like placeholders, default values, and whether it’s a required field.

Make sure you check the Enabled box, then click Save & Close.

enable the field

Step 4: View the results

On the backend, you’ll see the new checkout field at the bottom of the list. It’s placed at the end by default, but you can click and drag to reorder.

see it in the backend

And the new field also appears on the frontend checkout module.

and the frontend

Create the perfect checkout page today

👉 In this article, we discussed the reasons you may want to edit the WooCommerce checkout page, whether that’s because of branding, optimization, or user-experience issues. Then we covered the most effective ways to actually edit the checkout, with options like:

💡 We recommend starting with the default WooCommerce checkout settings to see if they help achieve your desired results. For more advanced edits, consider using custom fields. And for advanced, but relatively easy-to-implement customizations, use one of the suggested page builders.

What are your main questions on how to edit WooCommerce checkout? Share your thoughts in the comments!

Free guide
5 Essential Tips to Speed Up Your WordPress Site
Reduce your loading time by even 50-80% just by following simple tips.

About Vikram Rout

Vikram Rout has been a blogger, digital marketer and an SEO expert at Pixxelznet.com, one of the fastest growing custom design crowdsourcing platforms. Over the years, he has been helping small businesses and startups improve website design and SEO strategy, content marketing and user experience. You can engage with him on here.