Random News

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.

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:

Cart-errors.php
Form-billing.php
Form-checkout.php
Form-coupon.php
Form-login.php
Form-pay.php
Form-shipping.php
Order-receipt.php
Payment-method.php
Payment.php
Review-order.php
Terms.php
Thankyou.php


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.

Leave a comment

Your email address will not be published. Required fields are marked *