How to edit the checkout page in WooCommerce

If you run an online store with WooCommerce, you may want to customize the checkout page to match your branding or to add additional functionality. In this article, we’ll walk you through the steps to edit the checkout page in WooCommerce.

Create a Child Theme 

Step 1: Create a Child Theme The first step is to create a child theme if you haven’t already. A child theme allows you to make changes to the code without affecting the parent theme. To create a child theme, follow these steps:

1. Create a new folder in wp-content/themes directory of your WordPress installation.
2. Create a new style.css file in the new child theme folder. Add the following code to the style.css file:

/*
Theme Name: Your Child Theme Name
Template: parent-theme-folder-name
*/

Make sure to replace “Your Child Theme Name” with the name of your child theme and “parent-theme-folder-name” with the name of your parent theme folder.

3. Create a functions.php file in the child theme folder. Add the following code to the functions.php file:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Step 2: Locate the Checkout Template File The next step is to locate the checkout template file. The checkout template file is responsible for displaying the checkout page. You can find this file in the woocommerce/templates/checkout/ directory of your parent theme.

To edit this file, copy the checkout template file to your child theme folder. You can do this by creating a new folder in your child theme folder called “woocommerce”, and then creating a new folder in that folder called “checkout”. Finally, copy the checkout template file into the new “checkout” folder.

Step 3: Customize the Checkout Template File Now that you have a copy of the checkout template file in your child theme folder, you can customize it to meet your needs. Here are some examples of customizations you might want to make:

• Change the layout of the checkout page.
• Add additional fields to the checkout page, such as a phone number or a company name.
• Remove unnecessary fields from the checkout page, such as the order notes field.

Here’s an example of how to add a new field to the checkout page. First, open the checkout template file in your child theme folder. Then, find the section of the file that displays the billing details form. This section should start with the following code:

<?php do_action( 'woocommerce_checkout_billing' ); ?>

After this line of code, you can add your new field. For example, to add a field for the customer’s phone number, you could add the following code:

<p class="form-row form-row-wide">
    <label for="billing_phone"><?php _e( 'Phone', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="text" class="input-text" name="billing_phone" id="billing_phone" value="<?php echo esc_attr( $checkout->get_value( 'billing_phone' ) ); ?>" placeholder="<?php _e( 'Phone', 'woocommerce' ); ?>" />
</p>

This code adds a new field for the customer’s phone number to the billing details form.

Examples of edits on the checkout page

Change the order of fields

By default, WooCommerce displays the billing details first, followed by the shipping details. If you want to change the order of these fields, you can do so by editing the checkout template file. Look for the following lines of code:

<?php do_action( 'woocommerce_checkout_billing' ); ?>
<?php do_action( 'woocommerce_checkout_shipping' ); ?>

You can change the order of these lines to change the order in which the fields appear on the checkout page.

Change the text on a field label

If you want to change the label of a field, you can do so by editing the checkout template file. Find the label you want to change and update the text. For example, to change the label for the “First Name” field, you would look for the following line of code:

<label for="billing_first_name"><?php esc_html_e( 'First name', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>

You can change the text inside the esc_html_e() function to update the label text.

Remove a field

If you want to remove a field from the checkout page, you can do so by editing the checkout template file. Look for the line of code that displays the field you want to remove and delete it. For example, to remove the “Company” field from the billing details form, you would look for the following line of code:

<p class="form-row form-row-wide" id="billing_company_field" data-priority="30">
    <label for="billing_company" class=""><?php esc_html_e( 'Company name', 'woocommerce' ); ?></label>
    <input type="text" class="input-text" name="billing_company" id="billing_company" placeholder="<?php esc_attr_e( 'Company name', 'woocommerce' ); ?>" value="<?php echo esc_attr( $checkout->get_value( 'billing_company' ) ); ?>" autocomplete="organization">
</p>

You can delete this entire section of code to remove the “Company” field from the checkout page.

Add a custom message

If you want to add a custom message to the checkout page, you can do so by editing the checkout template file. Look for the section of the file that displays the order review and add your message above or below that section. For example, to add a message below the order review, you could add the following code:

<p class="my-custom-message">Thank you for your order! We appreciate your business.</p>

You can style this message using CSS in your child theme’s style.css file.

Add a trust badge

1. Upload the trust badge image to your WordPress media library. To do this, go to your WordPress dashboard and click on “Media” in the left-hand menu. Then, click on “Add New” and select the trust badge image file from your computer. Once the file has uploaded, copy the URL for the image from the “File URL” field.
   
2. Add the Trust Badge Image to Your Checkout Page. To add the trust badge image to your checkout page, you’ll need to edit the checkout template file in your child theme. Open the checkout template file in a text editor and look for the following line of code

<?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>

This line of code is where you’ll add the trust badge image. Insert the following code immediately after the line above:

<div class="trust-badges">
   <img src="PASTE-IMAGE-URL-HERE" alt="Trust Badge" />
</div>

Replace “PASTE-IMAGE-URL-HERE” with the URL for your trust badge image that you copied from the WordPress media library in step 1.

3. Style the Trust Badge Image. By default, the trust badge image will be displayed without any styling. To make it look more attractive, you can add some CSS to your child theme’s style.css file. For example, you could add the following CSS to center the trust badge image and add a border:

.trust-badges {
   display: flex;
   justify-content: center;
   margin-bottom: 20px;
}

.trust-badges img {
   border: 1px solid #ddd;
   padding: 10px;
}

Adjust the CSS to match the styling of your website and the trust badge image you created.

That’s it! Save the checkout template file and check your website’s checkout page to see the trust badge image in action.