In simplest terms, WooCommerce extra product options allow you to add extra options and 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 WooCommerce store owners to increase their 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 look at the following areas. 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 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.

Example text field

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.

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 fields. 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:

  • Conditional logic – only display certain fields based on the value of other fields
  • Set prices as a percentage of the product price
  • Apply field prices as a fixed fee or flat rate
  • Display fields by selected product variation

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

The code below is 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.

<?php
/**
* Plugin Name: Custom Fields for WooCommerce
* Description: Add custom fields to WooCommerce products
* Version: 1.0.0
* Author: Gareth Harris
* Author URI: https://catapultthemes.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 items have all been added using the WooCommerce 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 *