Add checkbox before checkout with Paypal button on Woocommerce cart page

add checkbox before checkout with paypal button woocommerce
add checkbox before checkout with paypal button woocommerce

It’s been almost year I am working for a client who wants to add a checkbox before “Checkout with Paypal” button on Woocommerce cart page. Woocommerce normally adds a checkbox before the submit button on checkout page but not on the cart page.

When he asked me to add the checkbox I did a couple of google search and found that there is no option to add this from the plugin settings or any hook. So, I decided to add the checkbox by adding code. I am going to share what exactly I did to add the checkbox.

The idea was adding a checkbox before the button and disable the button until the checkbox is checked.

This is the code I added to in a js file.

jQuery('a#woo_pp_ec_button').before('<div class="paypal_checkbox_wrapper"><input type="checkbox" id="paypal_c_checkbox"/><label for="paypal_c_checkbox">I\'ve read and accept the <a href="/privacy-policy">Privacy Policy</a> and <a href="/terms-conditions/">Terms & Conditions</a> <abbr class="required" title="required">*</abbr></label></div><p class="alert">Please accept the Terms and Conditions.</p>');
jQuery('a#woo_pp_ec_button').after('<div class="disable_overlay"></div>');

jQuery('.wcppec-checkout-buttons.woo_pp_cart_buttons_div .alert').show();

First of all, I added a checkbox and an error message before the button. Then I hide the error message with CSS so that it only display when the checkbox is not checked. Then I made a CSS overlay to disable the button until it is checked. And when the checkbox is clicked the overlay will be hidden so that the button is clickable.

I have also added this code to design the checkbox, overlay and error message.

display: inline-block;
padding-left: 5px;
position: absolute;
text-align: center;
width: 100%;
margin-top: -46px;
display: block;
height: 48px;
cursor: pointer;
.wcppec-checkout-buttons.woo_pp_cart_buttons_div .alert{
width: 70%;
margin: auto;
display: none;

You might have to change the CSS according to your theme design. This the easiest solution I have found and I hope it will help others. If you have any other idea please let me know so that I can try. Please comment if you have any question.


Please enter your comment!
Please enter your name here