A simple way to allow customers add gift wrap or other small add-on to their order.
A number of years ago a client asked for a gift wrap option in the cart. I found some code on StackExchange that got me started. Last week another client asked me for something similar so I revisited and enhanced the code.
Create the gift wrap product
The option on the cart page will add a product to the cart. This product will be a hidden one so that it is available but cannot be found while searching or browsing.
In the Product Data section set the product price in the ‘General‘ tab. If there is only one gift wrap per order you can check ‘Sold individually‘ in the ‘Inventory‘ tab.
The product name (Gift Tag & Ribbon) will be the name of the option on the cart page. The full description (shown in the screenshot above) will be in the lightbox popup to explain the item. The short description will be shown as the link to add the item to the cart.
Add option to cart page
The basic algorithm is quite simple – if the gift wrap product is not in the cart then display a link to add it (using the [add_to_cart_url] shortcode).
The original code hard coded the product information in the code. I have change it so that it retrieves the product information (name, price, short and full description) from the product. This makes it easy to tweak the displayed information. The only hard coded text is ‘Yes‘ that is shown when the item has been added to the cart.
My new client asked for a popup with a photo of the product so I have added that too.
The “Is this a Gift?…” text is the product short description. Click it to add the item to the cart.
When in the cart the item cannot be clicked on because it is hidden. The quantity cannot be changed because “Sold individually” is checked.
The link to add it to the cart has changed to ‘Yes‘.
The popup caption is the product full description. The photo is the product’s featured image.
How to use the code
As with all my code this is a standalone plugin file. You can save it and the upload it to wp-content/plugins and activate it. See my post about how to use my code snippets.
The first thing you need to do is to change the ID of the add-on product ($gift_wrap_product_id at the top of the function).
If you do not want a popup with a photo of the add-on product then change $enable_popup to false.
Update for use in checkout
I got an email asking why the popup did not work when the code was used in the checkout (with ‘woocommerce_review_order_before_cart_contents’ action). After a lot of testing I found that the prettyPhoto-init code didn’t work because the ‘Your Order’ section is reloaded with ajax and the trigger breaks.