In simplest terms, WooCommerce extra product options allow you to add extra options and price fields to your WooCommerce products. These permit your customers to configure your products in unique ways.

From a simple gift wrap option through to complex PC configurations, extra product options are a proven way for you, as a WooCommerce store owner, to increase your profits.

Your definitive guide to extra options in WooCommerce

I’ve put this article together to help you decide when and if to use extra options in your products.

In total, we’ll discuss what exactly we mean by extra product options and how these extend standard WooCommerce functionality. As part of this section we’ll look at some basic examples.

We’ll also think about the benefits of using extra product options in WooCommerce and provide some compelling evidence for why they will benefit you.

After that, we’ll provide two methods for adding extra options to your products – one, the easy way using a plugin; two, the developer’s way using code. This includes the full code for a free extra product options plugin. With both methods, we’ll examine adding the options in the back-end, then displaying them in the product page on the front-end.

Once you’ve got the basics of adding options to your products, we’ll go through several real-life examples of WooCommerce stores where product options are a crucial part. This includes detailed guides on how to create specific options for online florists, ophthalmologists, and for stores taking online bookings.

Just click a heading to jump straight to it:

Of course, if you just want to skip straight to the main action, you can take a look at the WooCommerce Product Add-Ons Ultimate plugin, a custom product add-ons plugin, which makes it easy for you to add extra fields to your products:

WooCommerce Product Add Ons Ultimate - WooCommerce extra product options plugin

What are WooCommerce extra product options?

Extra product options allow you to extend your products almost infinitely. By default, WooCommerce allows you to define several parameters for each product – parameters like price, description, category, and so on. But WooCommerce doesn’t give you the ability to let your customer define the product.

To do this, you need to be able to add further options or fields to the product page.

A typical product option

It’s usually easier to visualise an example. Take a look at this screenshot of a product page.

WooCommerce extra price field - text field with additional cost

You can see all the usual WooCommerce elements, like price and product title. But notice also the text field under the heading…

Here, the customer can enter their own wording into the text field and when they add the product to the cart, this wording will be captured as part of their product.

Here’s how it might look in the cart:

You can see that the wording is now part of the product that the customer is purchasing. It’s also visible after the purchase, so the store owner can see what the customer has specified:

Clearly, it’s very important that the store owner should know what extra options the customer has chosen.

WooCommerce extra price fields

Importantly, the options can have prices associated with them, making them WooCommerce extra price fields. So, as well as the base price of the product, the choices that the user makes will affect the overall product price.

Types of extra options

The text field above is probably the simplest example of an extra field. You could also add the following types of field:

  • Checkbox
  • Checkbox group
  • Date picker field
  • File upload
  • Number
  • Radio button group
  • Select (or dropdown) field
  • Text input
  • Textarea (or paragraph text) field

This is not an exhaustive list: there are further examples of more complex extra fields below.

What are the benefits of WooCommerce extra product options?

By now, you’re probably starting to think of your own possible uses for extra price fields in WooCommerce. Let’s look at how you stand to benefit from them.

There are several really strong reasons for wanting to enhance your products with extra options:

  • You can increase your profits: this is probably everyone’s golden ticket item. Having extra chargeable items that your customers can add to your products mean your turnover and profits increase. People are willing to pay a premium for customisable products.
  • You attract more customers: take a look at this report by the professional services company Deloitte on the rise of consumer personalisation. According to their research, over 50% of consumers are interested in purchasing customised products and Deloitte conclude that businesses that do not provide the opportunity for personalisation risk losing their customer base.
  • You make your customers happy (and therefore loyal). Again, Deloitte point to customer satisfaction based around personalising products.
  • You learn more about your customers. The more personalised data you accrue from your customers, the more you’re able to fine-tune your offering.

Here’s a nifty graphic from the Deloitte report which sums up their findings nicely:

Benefits to extra product options and personalisation by Deloitte
Credit: Deloitte

By now, hopefully you’re completely convinced by the benefits of customisable products. But if you’d like some more information, take a look at this article on customising WooCommerce products.

So, the big question is:

How can you create extra product options in your WooCommerce store?

There are two ways to create extra product options in WooCommerce:

  • The easy way – add them via a plugin
  • The less easy way – add them programmatically by coding them yourself

We’ll look at both methods.

WooCommerce Product Add Ons Ultimate plugin – the easy way

For the purposes of this article, we’ll look at the WooCommerce Product Add Ons Ultimate plugin. This is a popular plugin, used by hundreds of WooCommerce stores to add extra options to product pages.

WooCommerce extra product options plugin

WooCommerce Product Add Ons Ultimate lets you do everything you’d expect from an extra product options plugin:

  • Add extra input fields – like text, select, radio buttons, etc – to product pages
  • Increase the product price based on what the customer enters in the extra options
  • Charge per character for text fields (great for engravings and other personalised messages)
  • Organise fields by groups
  • Apply fields to individual products or globally

It also has a number of advanced features that you won’t see in many similar plugins, such as:

How to add extra options with a plugin

Let’s take a quick look at how to use WooCommerce Product Add Ons Ultimate to add an extra field to a product. We’ll use the simple text field example from the start of this article.

Install and activate WooCommerce Product Add Ons Ultimate

Once you’ve purchased and downloaded WooCommerce Product Add Ons Ultimate, follow the instructions in the email receipt to download and install the plugin.

Create your first extra option

With the plugin activated, edit one of your WooCommerce products. In the ‘Product Data’ section, you’ll notice a new tab for ‘Product Add Ons’.

Click the tab, then click ‘Add Group’ to create a new group for extra fields. Click ‘Add Field’ to add your field.

From the ‘Field Type’ dropdown box, select ‘Text’. You’ll see that you’re presented with various options to configure the text field. For now, just enter a field title and a field price.

WooCommerce extra text field

That’s it. Now publish or update the product and take a look on the front end. You’ll see that your text field has been added to the product.

How to add extra options programmatically

WooCommerce very helpfully provides a number of functions to create additional options. You can find them all in the wc-meta-box-functions.php file, but we’ll also look at them below.

WooCommerce Meta Box Functions

We’ll look at a couple of examples here.

woocommerce_wp_text_input

Using the woocommerce_wp_text_input function we can quickly and easily add a text field to the ‘General’ panel of the Product data section.

<?php
/**
* Display a custom text field
* @since 1.0.0
*/
function cfwc_create_custom_field() {
woocommerce_wp_text_input(
array(
'id' => 'custom_text_field_title',
'label' => __( 'Custom Text Field Title', 'cfwc' ),
'class' => 'cfwc-custom-field',
'desc_tip' => true,
'description' => __( 'Enter the title of your custom text field.', 'ctwc' ),
)
);
}
add_action( 'woocommerce_product_options_general_product_data', 'cfwc_create_custom_field' );

Add the above code to your functions.php file and you’ll see the following result in your WooCommerce products:

WooCommerce extra product option

The function accepts several simple parameters:

  • id: This should be a unique ID for your field. You’ll use this to retrieve its value
  • label: The label or title for the field
  • class: An optional class name that will be included on the front end
  • desc_tip: Help your users out by including a tooltip
  • description: The content for the tooltip

Where to hook woocommerce_wp_text_input

The function above will output a text field – but you’ll need to hook it to an action first. Note that we’ve hooked it to woocommerce_product_options_general_product_data, which means it’ll appear in the General tab.

Free extra product options plugin

Take a look at the extended code extract below. It’s a complete, fully functioning product options plugin that you can use to display extra fields and save their values.

It’s mostly taken from this article on adding custom fields to a product. There’s a really in-depth walkthrough of each element contained in the plugin so I recommend taking a look at that article for an explanation of the code.

Just use the code below for your free plugin.

<?php
/**
* Plugin Name: Custom Fields for WooCommerce
* Description: Add custom fields to WooCommerce products
* Version: 1.0.0
* Author: Gareth Harris
* Author URI: https://pluginrepublic.com/
* Text Domain: cfwc
* WC requires at least: 3.4.0
* WC tested up to: 3.4.2
*/
// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
/**
* Display the custom text field
* @since 1.0.0
*/
function cfwc_create_custom_field() {
$args = array(
'id' => 'custom_text_field_title',
'label' => __( 'Custom Text Field Title', 'cfwc' ),
'class' => 'cfwc-custom-field',
'desc_tip' => true,
'description' => __( 'Enter the title of your custom text field.', 'ctwc' ),
);
woocommerce_wp_text_input( $args );
}
add_action( 'woocommerce_product_options_general_product_data', 'cfwc_create_custom_field' );
/**
* Save the custom field
* @since 1.0.0
*/
function cfwc_save_custom_field( $post_id ) {
$product = wc_get_product( $post_id );
$title = isset( $_POST['custom_text_field_title'] ) ? $_POST['custom_text_field_title'] : '';
$product->update_meta_data( 'custom_text_field_title', sanitize_text_field( $title ) );
$product->save();
}
add_action( 'woocommerce_process_product_meta', 'cfwc_save_custom_field' );
/**
* Display custom field on the front end
* @since 1.0.0
*/
function cfwc_display_custom_field() {
global $post;
// Check for the custom field value
$product = wc_get_product( $post->ID );
$title = $product->get_meta( 'custom_text_field_title' );
if( $title ) {
// Only display our field if we've got a value for the field title
printf(
'<div class="cfwc-custom-field-wrapper"><label for="cfwc-title-field">%s</label><input type="text" id="cfwc-title-field" name="cfwc-title-field" value=""></div>',
esc_html( $title )
);
}
}
add_action( 'woocommerce_before_add_to_cart_button', 'cfwc_display_custom_field' );
/**
* Validate the text field
* @since 1.0.0
* @param Array $passed Validation status.
* @param Integer $product_id Product ID.
* @param Boolean $quantity Quantity
*/
function cfwc_validate_custom_field( $passed, $product_id, $quantity ) {
if( empty( $_POST['cfwc-title-field'] ) ) {
// Fails validation
$passed = false;
wc_add_notice( __( 'Please enter a value into the text field', 'cfwc' ), 'error' );
}
return $passed;
}
add_filter( 'woocommerce_add_to_cart_validation', 'cfwc_validate_custom_field', 10, 3 );
/**
* Add the text field as item data to the cart object
* @since 1.0.0
* @param Array $cart_item_data Cart item meta data.
* @param Integer $product_id Product ID.
* @param Integer $variation_id Variation ID.
* @param Boolean $quantity Quantity
*/
function cfwc_add_custom_field_item_data( $cart_item_data, $product_id, $variation_id, $quantity ) {
if( ! empty( $_POST['cfwc-title-field'] ) ) {
// Add the item data
$cart_item_data['title_field'] = $_POST['cfwc-title-field'];
$product = wc_get_product( $product_id ); // Expanded function
$price = $product->get_price(); // Expanded function
$cart_item_data['total_price'] = $price + 100; // Expanded function
}
return $cart_item_data;
}
add_filter( 'woocommerce_add_cart_item_data', 'cfwc_add_custom_field_item_data', 10, 4 );
/**
* Update the price in the cart
* @since 1.0.0
*/
function cfwc_before_calculate_totals( $cart_obj ) {
if ( is_admin() && ! defined( 'DOING_AJAX' ) ) {
return;
}
// Iterate through each cart item
foreach( $cart_obj->get_cart() as $key=>$value ) {
if( isset( $value['total_price'] ) ) {
$price = $value['total_price'];
$value['data']->set_price( ( $price ) );
}
}
}
add_action( 'woocommerce_before_calculate_totals', 'cfwc_before_calculate_totals', 10, 1 );
/**
* Display the custom field value in the cart
* @since 1.0.0
*/
function cfwc_cart_item_name( $name, $cart_item, $cart_item_key ) {
if( isset( $cart_item['title_field'] ) ) {
$name .= sprintf(
'<p>%s</p>',
esc_html( $cart_item['title_field'] )
);
}
return $name;
}
add_filter( 'woocommerce_cart_item_name', 'cfwc_cart_item_name', 10, 3 );
/**
* Add custom field to order object
*/
function cfwc_add_custom_data_to_order( $item, $cart_item_key, $values, $order ) {
foreach( $item as $cart_item_key=>$values ) {
if( isset( $values['title_field'] ) ) {
$item->add_meta_data( __( 'Custom Field', 'cfwc' ), $values['title_field'], true );
}
}
}
add_action( 'woocommerce_checkout_create_order_line_item', 'cfwc_add_custom_data_to_order', 10, 4 );

There are also a number of comments in this article which may be useful.

Examples of WooCommerce stores using extra product options

There’s no better way to demonstrate the benefits of product options that to look at some real life websites where they’re being used. Take a look at the examples below for some ideas on how to use extra fields in your own sites.

The online florist

Florists are a prime example of online stores that need extra options on their product pages. There are two main reasons:

  • One: to allow customers to specify the product, e.g. by adding inscriptions or personalised messages
  • Two: to upsell by offering additional options and the opportunity to purchase extra products

The Polished Petals Florist site uses WooCommerce Product Add Ons Ultimate to create simple options on most of its product pages.

Polished Petals - florist website

Notice the standard WooCommerce elements like size and colour swatch. Then, under the heading ‘Would you also like?’, there’s a set of images and dropdowns where the user is encouraged to add some further items to their purchase by selecting chocolates or other items.

These extra WooCommerce price fields have all been added using the Product Add-Ons Ultimate plugin.

Online optician / ophthalmologist

Shopping online for glasses is becoming more and more popular. But everyone wants their own style so being able to choose styles (and prescription) is essential.

The Eye Plan USA site uses WooCommerce Product Add Ons Ultimate to allow the user to pick a pair of glasses and provide their prescription details. All the fields below are simple text fields – note that it’s possible to set a field to be ‘required’ so that it’s not possible to add the product to the cart unless the field has been completed.

Eye Plan USA - online optician

Online bookings

Any kind of tour or event product will need you to collect some extra information from the customer. In this example from Cumberland Caverns for an overnight mountain trip, the product page contains fields for the number of people taking part, their ages, a date, and a checkbox requiring the customer to agree to terms and conditions.

Online bookings

Further reading

If you enjoyed this article, you can take a look these suggested posts for more of the same:

What next?

Hopefully this article has been useful in convincing you of the benefits of extra product options. If you’d like more information or just want to start adding fields to your own products, take a look at the WooCommerce Product Add-Ons Ultimate plugin.

WooCommerce extra product options plugin

Popular Posts

Leave a Reply

Your email address will not be published. Required fields are marked *