WooCommerce Checkout Add-ons

The WooCommerce Checkout Add-ons extension allows you to add fields to the checkout page. You can add text, checkbox, select, and other fields to the checkout, and optionally add costs for each option or field.

These fields can also be used to sort or filter orders in the order dashboard, and can be viewed in the “Edit Order” screen or by customers viewing their own orders. The additional checkout fields can be used to add gift wrapping, licenses, rush handling, and more. It even works with orders placed using WooCommerce Subscriptions!

Please note that Checkout Add-ons will create add-ons for an entire order; these will not depend on products in the order. If you need add-ons that only apply to certain products, please see the Product Add-ons extension.

Translation ready! Text Domain: woocommerce-checkout-add-ons
This plugin cannot manage inventory or SKUs for add-on “products” or services, as they essentially act like fees.

 

Installation ↑ Back to top

  1. Download the extension from your WooCommerce dashboard
  2. Go to Plugins > Add New > Upload and select the ZIP file you just downloaded
  3. Click Install Now, and then Activate
  4. Go to WooCommerce > Checkout Add-ons and read the next section to learn how to use the plugin.

 

Setup and Configuration ↑ Back to top

The extension has one setting under WooCommerce > Settings > Checkout. You can determine the placement of the add-ons in the checkout form: Before the Order Summary, Before Customer Billing Details, or After Customer Billing Details.

WooCommerce Checkout Add-ons Setting

Once you’ve configured the add-ons location, you can add fields.

Create Add-on Fields

To create a field, go to WooCommerce > Checkout Add-ons.

WooCommerce checkout add-ons Creating a Checkout Field
Creating a Checkout Field

Click “New Add-on” and begin creating your checkout field. The “Name” is the field name, and will be displayed under order details (both for customers and admins), and under “Your Order” on the checkout page, and can optionally be displayed in the Orders screen. We recommend using a shortened name for this.

The “Checkout Label” can optionally be displayed to users instead of the name if set. This is handy for fields that will require a bit more detail to understand. For example, a “Name” field could be Gift Wrap, and the “Checkout Label” can be set to override this on the frontend to say, “Want to add a gift wrap?” The Checkout Label is only displayed on the checkout page.

Once these have been set, the first option to configure will be the type.

WooCommerce Checkout Add-ons Select Checkout Field Type
Select Checkout Field Type

Field Types:

Each of the field types below can be used to add a cost to the order total if desired under “Options / Costs”. Some can add costs that depend on the option selected. Costs are not mandatory and can be left blank if no cost will be added.

Type Description Can be used to: Options / Cost
Text Allows the customer to enter a short string of text for the field. For example, you could use this field to set a recipient name for a gift. – Sort alphabetically
– Filter orders
Can add cost
Text Area Allows the customer to enter a long string of text for the field. Useful for notes, such as gift messages. – Sort alphabetically Can add cost
Select Creates a drop-down menu in the checkout form to select one of multiple options. – Sort alphabetically
– Sort numerically
– Filter orders
Can add cost per option
Multiselect Creates a field to select one, several, or all of multiple values in the checkout form. – Filter orders Can add cost per option
Radio Creates a list with radio buttons in the checkout form to select one of multiple options. – Sort alphabetically
– Filter orders
Can add cost per option
Checkbox Creates a single checkbox that can be selected or deselected for an option. – Sort alphabetically
– Filter orders
Can add cost
Multi-Checkbox Creates a list with checkboxes in the checkout form to select one, several, or all of multiple options. – Filter orders Can add cost per option
File Allows customers to upload a file as part of their order. – Filter orders Can add cost

Here’s an example of each field from the WooCommerce admin:

WooCommerce Checkout Add-ons Adding Checkout Fields
Adding Checkout Fields

And an example of what each looks like in the checkout template using the Storefront theme:

WooCommerce Checkout add-ons Sample Checkout Fields
Sample Checkout Fields

Please note that character limits must be set using our FAQ entry, as they’re not included in the plugin.

Options / Costs

While creating a select, multiselect, radio, or multi-checkbox type, you will be required to enter options and any costs per option (if needed). These are the options that will appear for a given field (each value will be an option for the user to select/check). Separate all values with a vertical pipe | (above Enter/Return on your keyboard). If you want to set a default value, enclose the value with a double asterisk, **, before and after the name.

For example, the Options / Costs field for a simple Yes / No radio box would look like this: Yes | No. If you want to make the “No” the default selection, you can enclose it in the double asterisk: Yes | **No**. This will select “No” by default. Multi-checkboxes and Multi-selects can have multiple default options selected.

You can also add a cost for an option (percentage or amount). For example, if you have a dropdown where customers select their wrapping option, you can add costs by appending =COST to the end of the option. Here’s an example that uses:
Basic Wrap=3.99 | Wrap + Bow=4.79 | Gift Bag=4.99
for the select Options / Costs:

WooCommerce Checkout Add-ons Sample Cost per Option
Sample Cost per Option

You can use percentages by entering a percent sign after the cost, like 5%. Example:
none | 15%=15% | 18 percent=18% | etc

WooCommerce Checkout Add-ons percentage fee

This will calculate the fee based on the order’s subtotal.

WooCommerce checkout add-ons percentage

Default values can also have costs associated with them. For example, let’s say that a Yes/No radio button will have a default of “Yes”, which costs $5. The format for the options will look like this: **Yes**=5 | No

Field Attributes:

You can also add attributes to a checkout field, which will affect when it is displayed and the potential to use it for sorting or filtering orders within the admin. Multiselect, multi-checkboxes, and file uploads cannot be used to sort orders.

  • Required – Adds a red asterisk to the field to denote that it should be completed. This field will be required to complete the order, and should only be used if the field is mandatory. For example, making a checkbox mandatory will require customers to check it before they can place an order (possibly for a “Terms and Conditions” notice). Note that multi-checkboxes and multi-selects that are marked “Required” will require at least one option to be selected.
  • Display in View Orders Screen – Adds the Checkout Field to the Orders Dashboard table and allows you to view the selected / entered information all in one screen.
  • Allow Sorting on View Orders Screen – Allows you to sort orders alphabetically or numerically based on the field for which this attribute is selected.
  • Allow Filtering on View Orders Screen – Allows you to filter orders (view only certain orders) based on the field for which this attribute is selected.

Sorting can be ascending or descending using alphabetic / numeric sorting. Filtering will only show orders that contain that field.

WooCommerce Checkout Addons | Sorting and Filtering Orders
Sorting and Filtering Orders

Taxes

Tax settings for add-ons will only be shown if your store has taxes enabled.

For the final part of setup, you can select whether or not the add-on field is taxable (for example, if you’re selling add-on items, such as samples, they may be taxable). If you select that the item is not taxable, then only it’s cost will be added at checkout. If the item is taxable, you’ll be able to select the appropriate rate from your shop’s taxes to add to the field’s cost:

WooCommerce Checkout Addons | Add Field Tax Status
Add Field Tax Status

 

Merchant Usage ↑ Back to top

Any additional Checkout Fields that have been selected for an order can be viewed by both customers and admins.

Required fields will always be displayed for an order under the order details and on the “Edit Order” page. Optional fields will be displayed if an option is selected. Options are displayed at checkout before order confirmation, and options along with cart totals are dynamically added and updated as options are selected by the customer:

WooCommerce Checkout Addons Checkout Additional Fields
Checkout Additional Fields

When customers view orders from their accounts, they’ll see any add-ons that added a cost to the order:

WooCommerce Checkout Addons | Customer Order View
Customer Viewing Addons

And when administrators view the “Edit Order” page, they’ll see all selected add-ons for an order:

WooCommerce Checkout Addons | Order Meta
Edit Order Page

File Uploads

File uploads have a kind of cool and unique usage in Checkout Add-ons (if we do say so ourselves!). Choosing the “File” type to create a file upload on the checkout page will allow a user to upload a file. Each File field will only allow one file upload, but you can add multiple File fields if desired.

WooCommerce Checkout Add-ons Add a File
WooCommerce Checkout Add-ons File Uploaded

When a user uploads a file, it will be saved in your media folder, and a unique suffix is added to ensure that no files have the same name (very helpful if customers are uploading files like logo.png). You’ll be able to view these files in your media folder, or link directly to them while viewing an order:

WooCommerce Checkout Add-ons Viewing Uploaded Files
Viewing Uploaded Files

You can also filter by orders with file uploads and use a shortcut to view files from the “Orders” page. If you click the “1 file” link on the Orders page, the file name will display with a link to view the file directly from this screen:

WooCommerce Checkout Add-ons Viewing Files from Orders page
Viewing Files from Orders page

Uploaded files can be viewed by customers in the same way from the “My Account” page.

 

Exporting Add-ons ↑ Back to top

Checkout Add-ons has dedicated compatibility with some order export plugins. As add-ons are WooCommerce order fees, they may appear in exports with other plugins, but the ones listed below have dedicated compatibility added, and no action from the merchant is needed.

Customer / Order CSV Export

Checkout Add-ons is compatible with the WooCommerce Customer / Order CSV Export extension. Exported order data from this plugin will now include a new column for each checkout add-on as part of the exported CSV.

Column Description Outputted Value Example
checkout_add_on The value selected for the add-on String FirstName
checkout_add_on_total The associated cost for the add-on Numerical 3.99

The column name will append the add-on name as well, so the column name will be displayed like so: checkout_add_on:gift_wrap_23 or checkout_add_on:message_26 (this is true for cost as well). The id of the checkout add-on is added to ensure that each column name is unique. The value for the add-on will be included, such as the text entered, the option selected, or a “Yes / No” for checkboxes.

Add-on Cost columns will include the total fee for the add-on option(s) selected if available.

Customer / Order XML Export

Checkout Add-ons (v1.9.0+) is compatible with the Customer / Order XML Export Suite extension. Exported order data is added in a dedicated XML tag.

A <CheckoutAddOns> wrapper is added to the XML output. This wrapper will contain a <CheckoutAddOn> element for each add-on that’s part of the order. The add-on ID, admin name, value (customer input), and total cost will be output for each add-on in the element.

The value for the add-on may vary based on the field type, such as the text entered, the option selected, or a “Yes / No” for checkboxes.

An example of expected XML output:

<CheckoutAddOns>
  <CheckoutAddOn>
    <ID>field ID</ID>
    <Name>field admin name</Name>
    <Value>field's customer input for this order</Value>
    <Cost>field's total cost added to this order</Cost>
  </CheckoutAddOn>
</CheckoutAddOns>

 

Subscriptions Compatibility ↑ Back to top

If WooCommerce Subscriptions is active, Checkout Add-ons will let you determine which add-ons are shown in renewal orders (if you use Subscriptions 2.0+, you must use Checkout Add-ons v1.7.1+).

When creating or editing add-ons, select “Renew with Subscriptions” as the attribute for any add-on that should be included in renewal orders.

WooCommerce Checkout Add-ons Renew Add on

This will include the add-on in the subscription record and any future renewals.

WooCommerce Checkout Add-ons Subscription add on
Subscription Add-on

 

Frequently Asked Questions ↑ Back to top


Q: Are there any character limits for the “text” or “text area” types?
A: No, these types have no character limits. If you need a character limit, we recommend suggesting one in the field name, or you can extend the plugin with custom code to set one as per our developer docs.


Q: Can I only show add-ons when certain products are purchased?
A: This is not a use-case that Checkout Add-ons addresses, as the plugin will create add-ons for an entire order, such as rushed shipping or gift products (and thus is not on the roadmap). These add-ons will not depend on products in the order.

If you need add-ons that only apply to certain products, please see the Product Add-ons extension instead, or work with a developer to conditionally show add-ons.


Q: Can I use this with One Page Checkout?
A: Yes! One Page Checkout is supported in Checkout Add-ons from version 1.3.0 and onwards.


Q: Do I have to edit the field if I don’t want to see it in the “Orders” list anymore?
A: Nope! Any checkout fields you’ve opted to show on the Orders screen can be hidden using the screen options at the top of the page:

Checkout Addons Screen Options
Screen Options


Q: Can I change the way checkout add-ons are displayed on the checkout page?
A: Sure. These fields will already inherit the styling set by your theme, so they should match the rest of your inputs already.

If you want to style them in any way, you can target #wc_checkout_add_ons with some CSS. For example, let’s say you want to make them only take up 75% of the page in the center, and have some space between them and the customer info. You could add something like this to your child theme or custom CSS stylesheet:

#wc_checkout_add_ons {
    width:75%;
    margin:30px auto 0px auto;
}

Here’s a tiny bit of CSS we typically use with the Storefront theme to patch radio and checkbox fields:

#wc_checkout_add_ons label.checkbox {
    display: inline-block;
    margin-left: 5px;
}


Q: Can I add placeholders or descriptions?
A: Yes, these can be added easily via a code snippet. If you’d like an example, check out our developer docs.



Q: Can I conditionally display gift options?
A: Checkout Add-ons does not currently support conditional displays for options. However, we have a snippet to only show certain fields if the shipping address differs from the billing address in our developer docs that could get you started.

 

WPML Compatibility ↑ Back to top

WooCommerce and most extensions are WPML-compatible, including this plugin. This plugins text domain is: woocommerce-checkout-add-ons

Translating Labels

You can translate your labels in Checkout Add-ons via WPML so they can be displayed in different languages on the frontend of your site. First, add this snippet to your site where you keep custom code (functions.php or custom plugin):

Then follow these steps to tell WPML to pick up the strings for translation:

  1. One of the “Auto-register” options in WPML > String Translation > Auto register strings for translation should be selected.
  2. The checkout page should have a translation (even just a dummy one) and you should visit one of the non-default language translations for the strings to be picked up.
  3. No matter where the snippet is placed (theme or plugin) the context in WPML > String Translations will be woocommerce-checkout-add-ons

Multi-currency Support

This gist can add WPML multi-currency support to Checkout Add-ons:

 

Troubleshooting ↑ Back to top

Please follow the following steps for troubleshooting:

  1. Are you using the W3 Total Cache plugin? If so, this may cause issues with file uploads. If you use the “minify” feature and plan on using the File add-on type, please ensure that you add wp-includes/js/plupload/plupload.full.min.js to the Never minify the following JS files list:

    You can read more about this here.
  2. For other issues, please submit a support ticket.

 

For Developers ↑ Back to top

We’ve begun a For Developers resource, which will grow as needed. You can view it here. This includes tips on adding information and attributes to checkout add-ons, such as placeholders and character limits.

 

Questions & Support ↑ Back to top

Have a question before you buy? Please fill out this pre-sales form.

Already purchased and need some assistance? Get in touch with a ninja via the help desk.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top