service_agreement

Adding an additional checkbox to the WooCommerce checkout

A question from the WooCommerce forum got me thinking about this, how can I add an additional checkbox to the WooCommerce checkout and make it required, like the ‘Terms and Conditions’. Obviously it needs to have the same admin options as the T&C’s so the shop manager can choose the page that it links to and the error checking needs to work in the same way as the terms and conditions.

And this is what I came up with, no core files are changed, the only files that need to be modified are your functions.php file and your stylesheet.

Once you have added the code just go to the WooCommerce settings page and click on the pages tab, just as you would to set the terms and conditions page.

NOTE : Working within the available WooCommerce actions means that the admin drop down appears at the top of the list and the checkbox appears above the terms and conditions checkbox – although I used some CSS to reposition that.

First the functions.php, just paste this at the end.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<?php
	// ADMIN
	add_action( 'woocommerce_settings_page_options', 'service_agreement' );
	add_action( 'woocommerce_update_options_pages', 'save_service_agreement' );

	function service_agreement() {

		woocommerce_admin_fields( array(
			array(  
				'name' 		=> __( 'Service Agreement Page ID', 'woocommerce' ),
				'desc' 		=> __( 'If you define a \'Service Agreement\' page the customer will be asked if they agree to it when checking out.', 'woocommerce' ),
				'tip' 		=> '',
				'id' 		=> 'woocommerce_service_agreement_page_id',
				'std' 		=> '',
				'class'		=> 'chosen_select_nostd',
				'css' 		=> 'min-width:300px;',
				'type' 		=> 'single_select_page',
				'desc_tip'	=>  true,
			),
		
		));
	
	}
	
	function save_service_agreement() {
		
		if ( isset($_POST['woocommerce_service_agreement_page_id']) ) :
            update_option( 'woocommerce_service_agreement_page_id', woocommerce_clean( $_POST['woocommerce_service_agreement_page_id']) );
		else :
			delete_option('woocommerce_service_agreement_page_id');
		endif;
	
	}
	
	//FRONTEND
	

	add_action( 'woocommerce_review_order_after_submit' , 'add_service_agreement_checkbox' );
	add_action( 'woocommerce_checkout_process' , 'check_service_agreement' );
	
	function add_service_agreement_checkbox() {
		
		global $woocommerce;
		if (woocommerce_get_page_id('service_agreement')>0) : ?>
			<p class="form-row service_agreement">
				<label for="service_agreement" class="checkbox"><?php _e('I agree to the', 'woocommerce'); ?> <a href="<?php echo esc_url( get_permalink(woocommerce_get_page_id('service_agreement')) ); ?>" target="_blank"><?php _e('service agreement', 'woocommerce'); ?></a></label>
				<input type="checkbox" class="input-checkbox" name="service_agreement" <?php if (isset($_POST['service_agreement'])) echo 'checked="checked"'; ?> id="service_agreement" />
			</p>
			<?php endif;
		
	}
	
	
	function check_service_agreement() {
		
		global $woocommerce;
		if (!isset($_POST['woocommerce_checkout_update_totals']) && empty($_POST['service_agreement']) && woocommerce_get_page_id('service_agreement')>0 ) :
			
			$woocommerce->add_error( __('You must review and agree to our service agreement.', 'woocommerce') );
			
		endif;
		
	}	
?>

And now for the CSS, you will probably want to tweek this depending on your theme – I was using twentyeleven to test this

1
2
3
4
5
6
7
8
9
10
11
12
13

#payment .terms{
	position:relative;
	top:-7px;
	right:0px;
	text-align:right
}

#payment .service_agreement{
	position:relative;
	top:-27px;
	right:100px;
	text-align:right
}