How to Customize the WooCommerce Checkout Page
Customizing the checkout page is one of the best aspects of WooCommerce simply because it’s the page where customers will have to trust you the most. That’s where they will wonder if they really need your product, if you can ship the package quickly and if you won’t just take their money.
Thankfully, WooCommerce has a ton of solutions to make the checkout page your own. In this article, we’ll cover a couple very handy methods such as hooks and templates.
WooCommerce Custom Templates
Usually, when it comes to customization within WooCommerce, you have to use custom templates. Basically, a custom template allows you to override WooCommerce default files and use your own custom files instead. Here is a quick tutorial that will explain you how to create your custom templates. Also, if some of your existing custom templates are outdated, I would suggest updating them.
WooCommerce comes with a number of front-end HTML templates as well as email templates. Instead of editing these files directly within the plugin (which is a very bad idea because once update the plugin and all of your changes will be lost!), you can copy them into your theme:
- In your theme directory, make a new folder called woocommerce.
- Navigate to the WooCommerce plugin directory and open the templates folder. The templates folder has a lot of subfolders with all of the different templates that WooCommerce uses. Fortunately, the template file structure and naming in WooCommerce is easy to follow.
- In your newly created woocommerce folder, copy the template file that you want to edit. Remember to keep the directory structure the same here. If the template you want to edit is within a subfolder then remember to create that subfolder within your theme’s directory.
- Edit the file from within your woocommerce folder and save the changes.
The checkout related templates are all located on the templates/checkout/ folder:
Please note that all of them are for the checkout process except the thankyou.php file. This one contains the content of the page displayed after the order is placed.
All of those files can be loaded from within your theme instead of being loaded from WooCommerce itself, which means you can do quite a lot with them! But I have to warn you that if you break one of those files your customer may not be able to purchase on your site anymore, so use this method only if you know what you’re doing.
Let’s have a look at the default checkout page when using Storefront. At the top there’s a blue box that allows customers to enter a coupon:
If you want to modify that box only, then use the form-coupon.php file. In the screenshot below, I simply changed the $notice_type parameter in wc_print_notice() from “notice” to “success” and the look of the box is changed:
You can also remove the extra-click to show the field and display it right away:
Each section of the checkout page can be modified using custom templates. Let’s have another example with the review-order.php file responsible for loading the order content right above the payment method form:
Here is a very simple change: move the product quantity before the product name and remove the multiplier cross:
But you could also make the quantity editable:
In addition to custom templates, WooCommerce provides a huge variety of hooks that you can use to customize the checkout page.
If you’re not familiar with hooks, we’ve got you covered, you can learn what filters and actions are if you read the beginners guide.
You can use a great plugin called Simply Show Hooks that will display the list of available hooks on any of your front pages:
Here are some hooks that you can use on the checkout page:
And the following ones are added based on your WooCommerce settings.
If you combine the notion of hooks and custom templates, you’ll notice that custom templates can introduce some new hooks or remove existing ones. You can also remove hooks dynamically using the WordPress default remove_action() function.
Hooks are handy if you want to rearrange the order of elements if you want to remove or add elements as well. But you can also modify a default behavior or edit a string.
Let’s say you want to dynamically add a section right there:
To add something like this:
This can be done using this very simple snippet. You need to add it to the file called functions.php, within your theme folder:
Now that you know what custom templates and hooks are, we can imagine a couple of scenarios and see how we can adjust the checkout page to your specific needs. By the way, just a quick note: all HTML elements on the checkout have prefixed classes, so you can, of course, use custom CSS code to change colors, margins, dimensions etc… but this is not the point of this article (you’ll find many great resources on CSS on Google!).