How to add gift wrapping to WooCommerce’s checkout page

Offering gift wrap can be a convenient option for customers and can help you stand out from other ecommerce shops. Just make sure to carefully consider the cost and logistics of offering this service.

There are 2 easy ways to do that.

One way is with Plugin

To offer gift wrap as an option at checkout in WooCommerce, you can follow these steps:

1. Install and activate the WooCommerce Gift Wrap plugin: This plugin allows you to add gift wrap as a product and make it available as an option at checkout.
2. Set up gift wrap as a product: Once the plugin is activated, you’ll need to set up gift wrap as a product in your WooCommerce store. Go to Products > Add New, and enter the product name, description, and price. You may also want to upload any product images you have and set up product variations (such as different wrapping paper designs).
3. Enable gift wrap at checkout: Once you’ve added gift wrap as a product, you can enable it as an option at checkout. Go to WooCommerce > Settings > Gift Wrap, and check the box to enable gift wrap. You can also customize the label and message displayed at checkout.
4. Test the gift wrap option: Make sure to test the gift wrap option at checkout to ensure it’s working correctly. You may want to place a test order to see how the gift wrap option appears and functions on the checkout page.

Add the following code to your theme’s functions.php add a checkbox field to the checkout page

<?php

//GIFT WRAP
// Display the custom checkbow field in checkout
add_action( 'woocommerce_review_order_after_order_total', 'fee_installment_checkbox_field', 20 );
function fee_installment_checkbox_field(){
	
	$threshold = 2; //threshold for showing option
    $current = WC()->cart->get_cart_contents_count();
	$billing_country = WC()->customer->get_billing_country();
    if ( $current < $threshold && WC()->customer->get_billing_country() == 'GB' ) {
	
	echo '<tr class="packing-select"><th>';
		

    woocommerce_form_field( 'installment_fee', array(
        'type'          => 'checkbox',
        'class'         => array('installment-fee form-row-wide'),
        'label'         => __('<span class="text-gift">Gift Bag (£2) </span>'),
        'placeholder'   => __(''),
    ), WC()->session->get('installment_fee') ? '1' : '' );

	
	echo '</th><td>';
	echo do_shortcode('[popup_anything id="67"]'); 
}
}

// jQuery - Ajax script
add_action( 'wp_footer', 'checkout_fee_script' );
function checkout_fee_script() {
    // Only on Checkout
    if( is_checkout() && ! is_wc_endpoint_url() ) :

    if( WC()->session->__isset('installment_fee') )
        WC()->session->__unset('installment_fee')
    ?>
    <script type="text/javascript">
    jQuery( function($){
        if (typeof wc_checkout_params === 'undefined')
            return false;

        $('form.checkout').on('change', 'input[name=installment_fee]', function(){
            var fee = $(this).prop('checked') === true ? '1' : '';

            $.ajax({
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'installment_fee',
                    'installment_fee': fee,
                },
                success: function (result) {
                    $('body').trigger('update_checkout');
                },
            });
        });
    });
    </script>
    <?php
    endif;
}

// Get Ajax request and saving to WC session
add_action( 'wp_ajax_installment_fee', 'get_installment_fee' );
add_action( 'wp_ajax_nopriv_installment_fee', 'get_installment_fee' );
function get_installment_fee() {
    if ( isset($_POST['installment_fee']) ) {
        WC()->session->set('installment_fee', ($_POST['installment_fee'] ? true : false) );
    }
    die();
}


// Add a custom calculated fee conditionally
add_action( 'woocommerce_cart_calculate_fees', 'set_installment_fee' );
function set_installment_fee( $cart ){
    if ( is_admin() && ! defined('DOING_AJAX') || ! is_checkout() )
        return;

    if ( did_action('woocommerce_cart_calculate_fees') >= 2 )
        return;

    if (1 == WC()->session->get('installment_fee')  ) {
        $items_count = WC()->cart->get_cart_contents_count();
        $fee_label   = sprintf( __( "Gift Bag" ));
        $fee_amount  = 2;
        WC()->cart->add_fee( $fee_label, $fee_amount );
		
    }
}

add_filter( 'woocommerce_form_field' , 'remove_optional_txt_from_installment_checkbox', 10, 4 );
function remove_optional_txt_from_installment_checkbox( $field, $key, $args, $value ) {
    // Only on checkout page for Order notes field
    if( 'installment_fee' === $key && is_checkout() ) {
        $optional = '&nbsp;<span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
        $field = str_replace( $optional, '', $field );
    }
    return $field;
}

?>

You might need to make a few modifications to the code above.

Modify the minimum amount of items in the cart.
You may alter the number displayed in this line of code to alter the number of items that the Gift Bag section is hidden from.

$threshold = 2; //threshold for showing option

According to the aforementioned, the Gift Bag area is hidden in any basket that contains more than one item.

Change the price per unit
You must modify this line of code in order to adjust the amount of your Gift Bag cost.

$fee_amount = 2;

This may be altered to suit your needs, and it will just appear in the store’s currency.

Modify the wording to reflect
The first spot, which will also offer you the opportunity to adjust the price of gift wrapping, is this section of code. If you want to call it anything else instead than Gift Bag, you’ll need to make modifications here.

‘label’ => __(‘Gift Bag (£2) ‘),

The next component is

$fee_label = sprintf( __( “Gift Bag” ));

This is what will appear on your order edit, thank you page, and pricing breakdown.

The Gift Bag text’s style
You just need to utilize CSS to style the text, and that belongs in your stylesheet.css file rather than your functions.php file. You may add anything you need to customize the text to your preferences if, like in my example, you wish to modify the font weight.

/styles gift bag text/
label.checkbox {
font-weight: 500;
}