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

Posted by on Dec 31, 2016 in Blog, E-Commerce, Woocommerce | 3 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.

3 Comments

  1. Joanne
    October 1, 2019

    Thank you very much for sharing this code. Is there a way to make the gift wrapping option cost something like 4,50$ ?
    Thank you very much for your help.
    Best regards,
    Joanne

    Reply
  2. Jhon
    December 21, 2018

    Hello;
    Ok what good post,but i have a question,how i can create a conditional to show the message field only if the checkbox is checked?

    thanks for your great tutorial

    Reply
  3. Henry
    February 6, 2018

    Hi, not sure if this is still open for comments but I would like to say thanks for your code. worked like a charm. Quick question, how do I reduce the size of the text box for gift wrap instructions. I just want a field where customers can input the gift receiver’s email address.
    You quick response would be greatly appreciated.
    Many thanks

    Reply

Leave a Reply