Add a giftwrap checkbox and instruction field to your child theme woocommerce

Posted by on Dec 31, 2016 in Blog, E-Commerce, Woocommerce | No Comments

Code for a giftwrap checkbox and input field on woocommerce checkout

This code will add a checkbox and input field to woocommerce checkout.
It will also add it to the orders page in the backend AND the thank you page after checkout PLUS the email the customer receives after ordering. It took me a while to track down all of these bits. I received a request for help so I am posting the code. If I get a chance I may add more explanation later.
This goes in your child themes functions.php file.

<?php 
/* --- GIFT WRAP FIELDS CHECKOUT AND ADMIN --- */

/**
* Add the fields to the checkout
*/

add_action( 'woocommerce_after_checkout_billing_form', 'my_custom_checkout_field' );

function my_custom_checkout_field( $checkout ) {
   echo '<div class="my_gift_wrap_checkout_field"><h2>' . __('Gift wrap', 'woocommerce') .'</h2>';
   
   woocommerce_form_field( 'my_gift_wrap_checkbox', array(
'type'          => 'checkbox',
'class'         => array('checkbox_field'),
'label'         => __('Free gift wrapping? - Yes please!', 'woocommerce'),
'required'  => false,
), $checkout->get_value( 'my_gift_wrap_checkbox' ));

woocommerce_form_field( 'my_gift_wrap_field', array(

'type' => 'textarea',
   'label'      => __('Gift wrap instructions', 'woocommerce'),
   'placeholder'   => _x('Please enter any gift wrapping instructions. For example if you have multiple items in your order but only want 1 wrapped, or a special message to include.', 'placeholder', 'woocommerce'),
   'required'   => false,
   'class'      => array('form-row-wide'),
   'clear'     => true,
       ), $checkout->get_value( 'my_gift_wrap_field' ));

   echo '</div>';
}

/**
* Update the order meta with fields values
*/

add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );

function my_custom_checkout_field_update_order_meta( $order_id ) {

      if ( ! empty( $_POST['my_gift_wrap_checkbox'] ) ) {
       update_post_meta( $order_id, 'my_gift_wrap_checkbox', $_POST['my_gift_wrap_checkbox'] );
   }
      if ( ! empty( $_POST['my_gift_wrap_field'] ) ) {
       update_post_meta( $order_id, 'my_gift_wrap_field', $_POST['my_gift_wrap_field'] );
   }
}

/**
* Display fields on the order edit page
*/

add_action('woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );

function my_custom_checkout_field_display_admin_order_meta($order){

  if (get_post_meta( $order->id, 'my_gift_wrap_checkbox', true ) == 1){
	  echo '<p><strong>'.__('Gift wrap', 'woocommerce').': </strong> ' . __('Yes please!', 'woocommerce'). '</p>';
  } else {
	  echo '<p><strong>'.__('Gift wrap', 'woocommerce').': </strong> ' . __('No thank you', 'woocommerce'). '</p>';
  }
  echo '<p><strong>'.__('Gift wrap instructions', 'woocommerce').': </strong> ' . get_post_meta( $order->id, 'my_gift_wrap_field', true ) . '</p>';
}

/**
 * Add the fields to order emails and thank you page.
 **/
add_action( "woocommerce_email_after_order_table", "my_woocommerce_email_after_order_table", 10, 1);

/* add same function to run on after orders table for thank you page */
add_action( 'woocommerce_order_details_after_order_table', "my_woocommerce_email_after_order_table", 10, 1 );

function my_woocommerce_email_after_order_table( $order ) {
    $my_gift_wrap_checkbox = get_post_meta( $order->id, "my_gift_wrap_checkbox", true );
    $gift_wrap = $my_gift_wrap_checkbox ? __('Yes please!', 'woocommerce') : __('No thank you.', 'woocommerce');

    echo '<p><strong>Gift wrap?: </strong>' . $gift_wrap . '</p>';

    if ( $my_gift_wrap_checkbox ) {
        echo '<p><strong>Gift wrap instructions: </strong>' . get_post_meta( $order->id, "my_gift_wrap_field", true ) . '</p>';
    }

}
?>

Tools:

You may edit your PHP outside WordPress and upload it to your server. You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/

Child Themes

You want to change code in a way that will not be over-written when you update your theme. So if you do not already have one you should setup a child theme. I always do this if I am making any changes to the main theme, even if it is only CSS. That is not the topic of this post so here is a link to a tutorial on creating a child theme, you will find the WordPress codex article here.

Leave a Reply