Woocommerce does not include in its core the ability to insert checkboxes where you would require your clients to agree to terms and conditions and consent to the processing of personal data.
To clarify, Woocommerce provides a checkbox for Terms and Conditions, provided you have created them as a page and set them as a “Terms and Conditions page” in your Woocommerce settings. However, this can be a problem if you have the T&Cs listed on your site in .pdf format and not as a separate sub-page.
Our Slovak legislation requires consent from the customer. According to her, it is not enough that the client is informed about data protection and general terms and conditions, but the client must explicitly perform an action confirming these terms and conditions. In our case, the action is to check the checkbox.
There are a quantum of plugins that offer the possibility to add various fields to the checkout, after all, something as basic as a checkbox, you will find surprisingly only in their paid versions. Additionally, the checkbox is unaesthetically displayed below the text box that is intended for comments, but we would like to place it at the very bottom – just above the order confirmation button.
That’s why I offer this simple snippet to add two checkboxes to the end of the checkout. As usual, it should be inserted into the functions.php file of your child theme.
//custom checkout fields
add_action( 'woocommerce_review_order_before_submit', 'bt_add_checkout_checkbox_vop', 10 );
/**
* Add WooCommerce additional Checkbox checkout field
*/
function bt_add_checkout_checkbox_vop() {
woocommerce_form_field( 'checkout_checkbox_vop', array( // CSS ID
'type' => 'checkbox',
'class' => array('form-row mycheckbox'), // CSS Class
'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, // Mandatory or Optional
'label' => 'Súhlasím so <a href="https://tvoja-stranka.sk/wp-content/uploads/2021/07/vop.pdf" target="_blank" rel="noopener">Všeobecnými obchodnými podmienkami</a>', // Label and Link
));
}
add_action( 'woocommerce_checkout_process', 'bt_add_checkout_checkbox_warning_vop' );
function bt_add_checkout_checkbox_warning_vop() {
if ( ! (int) isset( $_POST['checkout_checkbox_vop'] ) ) {
wc_add_notice( __( 'Prosím, potvrďte, že súhlasíte s obchodnými podmienkami' ), 'error' );
}
}
add_action( 'woocommerce_review_order_before_submit', 'bt_add_checkout_checkbox_gdpr', 10 );
function bt_add_checkout_checkbox_gdpr() {
woocommerce_form_field( 'checkout_checkbox_gdpr', array( // CSS ID
'type' => 'checkbox',
'class' => array('form-row mycheckbox'), // CSS Class
'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, // Mandatory or Optional
'label' => 'Súhlasím so <a href="https://tvoja-stranka.sk/wp-content/uploads/2021/07/gdpr.pdf" target="_blank" rel="noopener">spracovaním osobných údajov pre potreby objednávky</a>', // Label and Link
));
}
add_action( 'woocommerce_checkout_process', 'bt_add_checkout_checkbox_warning_gdpr' );
function bt_add_checkout_checkbox_warning_gdpr() {
if ( ! (int) isset( $_POST['checkout_checkbox_gdpr'] ) ) {
wc_add_notice( __( 'Prosím, potvrďte, že súhlasíte so spracovaním osobných údajov' ), 'error' );
}
}
These are actually two similar functions, so in an ideal universe they could be parameterized and we would observe the so-called. DRY principle (Don’t repeat yourself). However, these tutorials, as well as the whole wp blog, are not intended for professional WordPress programmers, but for regular people who are looking for ways to improve their e-shops. From that point of view, I hope to be forgiven this time.
The code itself consists of two functions, i.e. two filters. The role of the first function bt_add_checkout_checkbox is simply to add a checkbox to the “before_submit” hook – that is, above the confirmation button. Actually we add a new input, which is of type checkbox, has some classes, label (naming). It is worth mentioning the key called “required”, if this is set as TRUE, the field will be required, if it is set as FALSE, the field will be optional (e.g. if it was a checkbox to subscribe to a newsletter – not every customer needs to want to subscribe to a newsletter right away. On the flip side – every customer must agree to the terms and conditions…). In the label key, type the text you want to display at the checkbox. Of course, it is also possible to use HTML tags, e.g. mark part of the text as a link to the terms and conditions.
The role of the second function bt_add_checkout_checkbox_warning is to check if the checkbox has been checked. If not, the $_POST[] variable will not contain a numeric value, the condition will be evaluated as satisfied, an error message and the “error” parameter will be set to the wc_add_notice() function, which will actually prevent the order from being processed to completion and display an error, styled as error (i.e. red). If the checkbox is checked, the value of the $_POST[] field will be 1 and the order will be processed successfully.
To distinguish between the checkbox for GTC and the checkbox for GDPR, these two abbreviations are used in both functions and parameters.
I have been programming websites since 2006. I have worked in several smaller and larger companies, always as a developer. I know how to program in PHP and lately I have been exclusively working on small and medium-sized projects in WordPress.
