How to add extra cost to a WooCommerce product like a gift card?

Sometimes you would like to add the extra cost to a WooCommerce product. For example, a gift card with a small shipping fee when customers want to send it by post. Today, I will show you how to add extra price fields for your WooCommerce products!

Shipping costs may lower your profits, especially when customers get used to having free shipping!

But you can let customers decide about additional services, special packaging, or shipping options with extra price fields for WooCommerce products! Of course, charging customers additional costs will be fair when they make a decision.

Table of contents

• WooCommerce products – price & additional fields
• Let’s create a gift card!
• Extra price field & shipping cost for WooCommerce gift card

WooCommerce products – price & additional fields

As you know, by default, WooCommerce lets you set the regular and sale price.

It lacks a way to customize the product with additional fields if you want to get more personalized items though.

But, you can use a free plugin to add new fields to your products!

Download for free →
 
The extension lets you manage WooCommerce products with ease.
Have a look at the plugin settings

And this is how these fields from the gif above look on the website:

How to create a gift card in WooCommerce?

💡 First of all, I want to let you know that you can generate a gift card using the free version of the Flexible Coupons plugin.

👉🏽 With the plugin, you can create your card graphics and link them to your product. Once your customer purchases the product, a discount PDF card will be created for them with a value equal to the product price.

At the same time, a WooCommerce coupon will be created and a discount code will appear on the PDF gift card!

The PRO version of the plugin also enables the filling of the card with content from the order like the name of your client, or the value of the coupon (product). It’s possible with the shortcodes that automatically transfer content from the order to the gift card.

💡 Read more about adding a PDF gift card in WooCommerce →

Extra price field & shipping cost for WooCommerce gift card

The gift card is a WooCommerce virtual product and can’t be shipped. So, the shipping cost can’t be added to the order with the card. But, we would like to let customers buy the gift card and send it by mail!

To add the shipping cost per product, you can use Flexible Product Fields PRO. The PRO version of the plugin allows you to add an extra price field to your product page.

Now, follow the steps below to add a price field to the WooCommerce product (a gift card in my example).

1. Create a gift card with Flexible Coupons

   The process is well described above, and I think plugin configuration will be effortless for you.
    

2. Add shipping cost per product with Flexible Product Fields

   First, go to the plugin settings and create a new Fields Group, which you will assign to your product(s).

   

   Then, select the product for which you want to display additional fields. In my example, I used the name Gift Card with optional shipping costs.

   

   
    

3. Add product fields

   Next, add several fields, the key one being the first – a checkbox whose ticking by your client will do two things on the product page:

   ✅ The address fields will be displayed,
   ✅ the shipping cost will be added to the order.

   In the General tab, fill in the field name, and optionally the placeholder and tip tool. Then go to the Pricing tab and fill in the price with the value you want to charge your customers.

   Now, look at the checkbox settings should look like this:

   

   

   
    

4. Conditional logic for product fields

   The second field is a text field for the recipient’s first and last name. In this field, we need to set up conditional logic (in the Conditional logic tab) that will bind the text field to be displayed on the product page only after the checkbox is ticked.

   

   The settings of this field will be analogous to the other fields, which differ only in name. So copy the text field settings to the next ones and make sure the settings in the Conditional logic tab are the same in each field’s settings.

5. The extra price field for the WooCommerce product

   To sum up, we’ve added the following field types:

   

   🎉 Let’s see now the result on the product page:

   

   As you can see, it is easy to deal with the additional shipping cost if you want to send the WooCommerce gift card by post. Of course, you can similarly send tickets, certificates, vouchers, and gift cards sold in the WooCommerce shop.

   Gain additional revenue for the service you provide with extra price fields for the WooCommerce products!

   💡 You can also get the customer choices and print them on vouchers. Read how to use WooCommerce PDF gift cards with custom shortcodes!

Summary

Today, you’ve learned how to:

• use additional product fields,
• create a gift card in WooCommerce with a free plugin,
• add an extra price field to the WooCommerce product,
• also conditionally show/ hide the product fields,
• and charge customers a small fee based on their input & choice.

So, I hope this post encourages you to use additional product fields and sell gift cards in WooCommerce!