add legal texts before order review and payment boxes in checkout page. and bring the terms and conditions checkbox below the legal notes.

gistfile1.txt

## Requirement:
add legal texts before order review and payment boxes in checkout page. and bring the terms and conditions checkbox below the legal notes.

## solution:
i think we can put the legal notes below the coupon boxes. because coupon box only appears before order and payment page/section. other sections are billing and shipping and login. we don't want to show the legal notes there. so our focus would be only in 4th stage ( order & payment info )  of the checkout page.

there is no hook to place anything below coupon. there are hooks to place before or after payment box, submit button etc.

so i think overriding the form-coupon.php file would be the right way to do. we can place our legal copy below the contents of this file. after test, we can see yes its showing below the coupon boxes.

now we have to bring the terms and conditions checkbox below our legal notes. its currently showing in shipping stage - below the additional notes/order notes.  also its showing below billing section.

please keep in note: we are using yith multistep checkout plugin.

to bring the terms checkbox below our notes, we can use jquery clone and appendTo function. in this way we can copy the existing checkbox and paste and insert into our desired place. now we have 3 checkboxes. but we need only to show 1 checkbox.

so what we do we hide all checkboxes but the one which below our legal notes.
but then there is another big issue. those checkboxes checked state in open (not checked). it means even we hide them using css and we checked our legal notes checkbox but we won't be able to purchase because woocommerce will trigger an error saying: ...please accept terms and conditions.... and we know why: because those 2 checkboxes we hide those weren't checked.

now ....

we will use jquery to target those 2 checkboxes to make them checked. And make our checkbox will be remain unchecked. because legally we can't checked this box in default. user must select and then proceed.

so even we hide those 2 checkboxes it won't halt our purchase completion.

lovely.

Our Legal Notes:

<div class="yourway-terms">
<?php echo '<div class="sbl_custom_texts">';
	echo '<p>You enter into a binding sales contract with seller mentioned in the checkout area once you have received an "order confirmation and sales receipt" email from us, in line with our Terms of Use. Then independent seller is responsible for the supply of the goods. <a href=" '. get_site_url().' ">YourWay.vip</a> is therefore not responsible for the performance of agreements concluded with seller. <a href=" '. get_site_url().' ">YourWay.vip</a> has the right to cancel your order in the event of technical problems, delivery failure, Fair use policy and other similar situations.​</p>';
	echo '<p>– Thank you for supporting the local sellers.​</p>';
echo '</div>';

echo '<div class="sbl_custom_texts" id="orderNotice">';
	echo '<p> The below seller is the contracting party and <a href=" '. get_site_url().' ">YourWay.vip</a> is merely the intermediary of the agreement​.</p> <p style="margin-bottom:0;"> Shipping time: Location-based & added to processing time. See more in the Terms/Seller info.​</p>';
echo '</div>';?>
</div>

We wrapped this within a div yourway-terms and later we will insert the our terms checkbox below it.

We will override this template of woocommerce:
yourtheme/woocommerce/checkout/form-coupon.php and add the above notes just below of the file. Thats it.

We will write a custom js file (custom.js) and will write the following code:

jQuery(document).ready(function($){
 
    $('.terms-privacy-conditions .input-checkbox').prop('checked', true); // 2 checkboxes that we want to hide and checked initially

    $('.terms-privacy-conditions').clone().appendTo($('.yourway-terms')); // Cloned and append
    $('.yourway-terms .terms-privacy-conditions .input-checkbox').prop('checked', false); // this checkbox that we want user to select

});

In css file, we can write following:

/* Here we hide the 2 checkboxes */
body.woocommerce-checkout .shoptimizer-archive .terms-privacy-conditions {
    display: none;
}
/* Here we keep our checkbox shown for user to select */
body.woocommerce-checkout .shoptimizer-archive .yourway-terms .terms-privacy-conditions {
    display: block;
}