Enhancing Checkout Experience: Adding a Terms and Conditions Checkbox in WooCommerce

Introduction Adding a Terms and Conditions Checkbox To The Checkout

Providing a seamless and transparent checkout process is essential for any e-commerce store. One way to ensure that customers acknowledge your terms and conditions is by adding a checkbox form on the checkout page. In this blog post, we will guide you through the process of adding a checkbox form with terms and conditions that must be checked before customers can proceed with the checkout process in WooCommerce.

Step 1: Modifying the functions.php File

To begin, access your WordPress theme’s folder and locate the functions.php file. If you’re using a child theme, edit the child theme’s functions.php file. Otherwise, edit the parent theme’s functions.php file.

Add the following code snippet to the file:

/**
 * Add terms and conditions checkbox to the checkout page
 */
function add_terms_and_conditions_checkbox() {
    echo '<div class="woocommerce-terms-and-conditions">';
    woocommerce_form_field( 'terms_and_conditions', array(
        'type'          => 'checkbox',
        'class'         => array('form-row terms'),
        'label_class'   => array('woocommerce-form__label woocommerce-form__label-for-checkbox checkbox'),
        'input_class'   => array('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox'),
        'required'      => true,
        'label'         => __('I have read and agree to the terms and conditions.'),
    ),  WC()->checkout->get_value( 'terms_and_conditions' ));
    echo '</div>';
}
add_action( 'woocommerce_checkout_before_terms_and_conditions', 'add_terms_and_conditions_checkbox' );

This code snippet adds a checkbox field to the checkout page with the label “I have read and agree to the terms and conditions.” The checkbox is set as required.

Step 2: Styling the Checkbox

To ensure the checkbox is visually appealing and consistent with your theme’s styling, add the following CSS code to your theme’s stylesheet or use a custom CSS plugin:

.woocommerce-terms-and-conditions label.checkbox {
    font-weight: normal;
}

.woocommerce-terms-and-conditions input[type="checkbox"] {
    margin-right: 6px;
}

This CSS code adjusts the font weight of the label and provides some spacing between the checkbox and the label text.

Step 3: Save Changes and Test

Save the changes made to the functions.php file and refresh your checkout page. You should now see the terms and conditions checkbox displayed before the “Place Order” button.

Conclusion – Adding a Terms and Conditions Checkbox in WooCommerce

By adding a terms and conditions checkbox to your WooCommerce checkout page, you can ensure that customers explicitly agree to your store’s policies before completing their purchase. With the provided code snippets and styling instructions, you can seamlessly integrate this functionality into your checkout process, providing transparency and enhancing the user experience. Remember to tailor the terms and conditions content to reflect the specific policies and requirements of your e-commerce store.

If you need help implementing this code snippet give us a shout.

Photo by Thomas Bormans on Unsplash