WooCommerce Extra Product Options

Create extra options on your products!

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please visit the support forum here. Thanks so much!

Overview

Extra Product Options allows you to create extra fields on your WooCommerce products. The current version supports checkboxes, radio buttons, select boxes, textareas, input boxes, upload, date, range picker and color picker.

Extra Product Options are created locally on the edit product page or globally. For each option you have the option to name it, describe it, choose the order and give an optional price. The options you create show up above the add to cart form.

Minimum requirements

  • PHP 5.1
  • WordPress 3.5
  • WooCommerce 2.1
  • JavaScript / jQuery

Sources

  • WordPress

    Used source code from the file class-wp-posts-list-table.php

  • WooCommerce

Credits

Installation

There are two primary methods for installing any WordPress plugin.

Install with a zip file

  1. From your WordPress dashboard, choose Plugins > Add New
  2. Select Upload from the set of links at the top of the page (the second link)
  3. From here, browse for the zip file included in your plugin purchase titled woocommerce-tm-extra-product-options.zip and click the Install Now button
  4. Once installation is complete, click Activate Plugin to activate it and enable its features.

Install by FTP Manager

If you are have no previous web experience and have no idea what an FTP Manager is, then this option is not for you.

  1. Access your host through the FTP manager
  2. Access the plugins directory of your WordPress install /(WordPress directory)/wp-content/plugins/

    If WordPress is installed on the root folder the directory is /wp-content/plugins/

  3. Find the directory titled woocommerce-tm-extra-product-options and upload it and all files within to the directory from the previous step.
  4. From your WordPress dashboard, choose Plugins > Installed Plugins
  5. Locate the newly added plugin and click on the Activate link to enable its features.

Quick Start Guide

Adding extra options to your products is really easy. Below we describe the required steps for creating your fields.

Basic plugin usage

The basic usage of the plugin assigns option fields to a specific product.

Step 1

Add or edit a WooCommerce product.

Step 2

Make sure your product type is either Simple, Variable, Composite, Bookable or Subscription product.

Step 3

Locate the sub-section TM Extra Product Options in the product data panel and click it. You should now be presented with the plugin interface. If you haven't set extra options before for that product you will be presented with two choices modes for creating your options: Builder and Local mode.

Builder mode

On this mode you are presented with with Form Builder that you will use to create your options. Click the Add section button to create a section where the options must placed in. Click the Add item button (cross button) located on the section to select the option field type.

For better understanding of the Form Builder see the section Form Fields Builder.

This is the preferable way of creating options.

Local mode

On this mode you will use the product attributes that are not used for variations to populate your fields.

Step 3a

If you haven't done yet add some product Attributes from the product data panel.

Make sure that at least one Attribute is NOT used for variations. The plugin utilizes all the the Attributes NOT used for variations. It doesn't matter if those Attributes are allready predefined or custom.

After you have finish enter your attributes locate the sub-section TM Extra Product Options in the product data panel and click it. You should now be presented with the plugin interface.

Step 3b

From the Attribute dropdown select an attribute and then click the Add Extra Option button.

Step 3c

From the type dropdown choose your desired field type.

This method of creating your options currently supports only check boxes, radio buttons and select boxes.

For information on the various field settings see the section Local mode.

Advanced plugin usage

This method uses the Form Builder to create options that can be to all of the products, products that belong to specific categories or alternatively to specific products.

Step 1

From the WordPress dashboard choose Products > TM Global Extra Product Options.

Step 2

Click the Add Global Form button at the top of the screen.

Step 3

Add title and description for your reference only, so that you can distinguish the different forms.

Step 4

Select the Product Categories that you want your form to be applied on. Choose no categories to apply the form to all products (even to products that don't belong to any category). Clicking the Disable categories checkbox will make the plugin disregard selected categories. You can assign specific products to the form by selecting them on the Products meta box.

Step 5

Add your fields on the Form Fields Builder.

For information on the form settings see the section Global Extra Product Options. For help creating a field on the Form Fields Builder see the section Form Fields Builder

Panel settings

Clicking the settings tab while on the product panel you can override some global settings.

Include additional Global forms

This list contains all of the global forms and checking one will include it on the global. The forms you choose will be displayed alongside with the forms that the product already has. This setting will also override the next one.

Exclude from Global Extra Product Options

This will exclude any global forms assigned to this product except those defined in the previous setting.

Override global display

This overrides the global display setting for the display of the fields on the front-end for the current product only. The default value is Use global setting which uses whatever you have chosen on the global settings (see below). Always show will always show the fields assigned to the current product and Show only with action hook will only show the fields for the current product by using action hooks (see below).

Override Final total box

This will override the global totals box display for this product. The default value is Use global setting which uses whatever you have chosen on the global settings (see below).

Override enabled roles for this product

This will override which roles can see the options for this product.

Override disabled roles for this product

This will override which roles cannot see the options for this product. This setting has priority over the enabled roles one.

Local mode

On Local mode the only way to create options is to use product attributes that do not belong to any variations. Please note that you can only use one attribute per option. You cannot use one attribute as a base to create multiple options. The benefit of using this mode is that on variable products you can assign prices to your options depending on the selected variation. The downside is that you can only create radio buttons, checkboxes and select boxes.

TM Extra Product Options

Activating the panel

To activate the panel you must add at least a one product Attribute that is not used for variation. The values of that attribute (or attributes) will be used to create the extra option.

Note that on Local mode you can only create checkboxes, radio buttons and select boxes due to the way attributes work.

Adding an option

Select the attribute you want to create an option for and the click the Add Extra Option button. This will add your option and show the option properties on the panel.

TM Extra Product Options

Type

Determines the type of your option. On per-product basis this can only be checkbox, radio button or select boxes. On the other hand, you can change the type any time you want without having to re-write the other properties.

Hide price

Hides the price on the front-end.

Required

Forces the user to select an option for that field.

Enabled

Enables the display of that field. If you uncheck this the field will be ignored.

Variation

It's enabled only if the product type is variation. It corresponds to the variations ids that you have created. If you choose "Any" that tells the plugin to match any variation

Attribute

Corresponds to the attribute values that you have chosen. If you choose "Any" that tells the plugin to match any values.

Price

This is where you enter the custom price for the attribute value.

Price type

This is the price type. It will determine the actual price that will be assigned and displayed.

You can make combinations of variations and attribute values. In that way you can have different prices depending on the variation selected.

Global Extra Product Options

Global Extra Product Options are applied to all products, products belonging to a specific category or categories or specific products. To gain access to Global Extra Product Options interface from the WordPress dashboard choose Products > TM Global Extra Product Options.

Any existing Global Extra Product Options created are displayed in the familiar WordPress table view.

TM Extra Product Options

To add a new Global Product Options form click the Add Global Form button. This will bring you to the add screen.

TM Extra Product Options

Title and Description

These are for your reference only and are not currently being used anywhere in the front-end.

Priority

This is used to determine in which order multiple forms that apply to a specific product are being displayed in the front-end.

Please note that, the "Priority" is not used to determine if your form will show up before or after the local (per-product) prices. This is done in the form editor.

Product Categories

They are used to limit the display of your current global product option form on the products that belong to the selected categories. Selecting no categories means that the form will be applied to ALL products.

Disable Categories

Checking this will disable the categories.

Search for a product

This where you type the individual products to assign the product to.

Form Fields Builder

The Form Fields Builder is where you actually create your options. It operates as a regular form builder. The concept behind the builder is that you create sections and inside the sections you put the fields.

The major difference between creating a field with the builder and creating a field on the product is that with the builder you can choose between all available fields, but you cannot dynamically change the type of the field. Furthermore, creating a field on the builder does not require creating attributes on the products. What's more, fields created with the builder have a variety of options you can use to better customize them.

TM Extra Product Options

Sections

TM Extra Product Options

MOVE

Click and drag to re-order the section.

MINUS

Decreases the size of the section.

PLUS

Increases the size of the section.

DUPLICATE

Duplicates the section (including all its fields).

EDIT

Shows this section's settings

DELETE

Deletes the section and all its fields.

Adding a section

Click the Add section button. This will add a new section to the form.

Section settings

To gain access to the section settings click the edit button at the section's toolbar. Doing this will open a pop up where you can edit the settings for that section.

TM Extra Product Options

Section style

Determines the style of that section on the front-end.

Section placement

Determines where this section will appear compare to local (per-product) options. You can place it before or after the local options.

If you have multiple sections, the priority of the section determines the display order either before or after local options.

Section type

Determines if the section will be a pop up (the section's title will be used as a the link title to open the pop up) or a wizard slider.

Section class name

This will add a custom class name to the section. You can use this to style the section.

Fields

TM Extra Product Options

DRAG HANDLE

Click and drag to re-order the field.

MINUS

Decreases the size of the field.

PLUS

Increases the size of the field.

DUPLICATE

Duplicates the field.

EDIT

Shows this field's settings

DELETE

Deletes the field.

Adding a field

Clicking the cross button will display a pop up of the available elements. If you have more than one sections and you want your element to appear on a specific section you can instead drag the item placeholder to the desired section.

Field settings

To gain access to the field settings click the edit button at the field's toolbar. Doing this will open a pop up where you can edit the settings for that field.

Please remember that currently you cannot change a field's type after you have placed it inside a section.

Depending on the field you choose you can edit different settings.

Label options for all fields

TM Extra Product Options

Label type

Here you can choose the type of the field's title.

Label

Here you enter the title of the field.

Label color

This changes the default color for the title.

Subtitle

Here you can enter a subtitle for the field's title.

Subtitle Subtitle position

This changes the displayed location of the subtitle.

Subtitle color

This changes the color for the subtitle.

Divider type

Here you can choose to show a divider between the field title and the actual field.

General options

TM Extra Product Options

Required

Choose whether the user must fill out this field or not.

Price

Here you enter the price for the field.

Text before Price

Text entered here will be displayed before the price. Leave the setting blank for no text.

Text after Price

Text entered here will be displayed after the price. Leave the setting blank for no text.

Price type

Here you can choose how the price is calculated. Depending on the field there various types you can choose.

Fixed amount

This is an flat increase or decrease added to the product price.

Percent of the original price

This is a percentage increase or decrease of the initial product price.

Percent of the original price + options

This is a percentage increase or decrease of the initial product price plus all of the other options that are not of this type.

Fee

This a fee added to the cart line item.

Current value

This will add a price the current value of the field.

Step * price or Quantity

This will multiply field's value by the Price you set.

Price per char

This will multiply the field's number of characters by the Price you set.

Hide price

Choose whether to hide the price on the front-end or not. This just hides the price. It doesn't disable it. If you want your field to not have a price leave the price field blank.

Checkboxes specific settings
Limit selection

Enter a number above 0 to limit the checkbox selection or leave blank for default behavior.

Exact selection

Enter a number above 0 to have the user select the exact number of checkboxes or leave blank for default behavior.

Minimum selection

Enter a number above 0 to have the user select at least that number of checkboxes or leave blank for default behavior.

Use image replacements

This lets you display images in place of the checkbox.

Changes product image

This will let you change the product image with a custom one.

Enable Swatch mode

This will show the option label on a tooltip when Use image replacements is active.

Items per row

Use this setting to make a grid display. Enter how many items per row for the grid or leave blank for normal display.

Populate options

Here you add the labels and their prices for the field choices.

Mass add

To mass add option use the following format:

Option 1 | 10
Option 2 | 20

and press the Populate button. Please note that this method only adds options, it doesn't replace existing ones.

Radio button specific settings
Use image replacements

This lets you display images in place of the radio button.

Changes product image

This will let you change the product image with a custom one.

Enable Swatch mode

This will show the option label on a tooltip when Use image replacements is active.

Items per row

Use this setting to make a grid display. Enter how many items per row for the grid or leave blank for normal display.

Use URL replacements

This will enable you to redirect to a url when a radio option is clicked.

Populate options

Here you add the labels and their prices for the field choices.

Mass add

To mass add option use the following format:

Option 1 | 10
Option 2 | 20

and press the Populate button. Please note that this method only adds options, it doesn't replace existing ones.

Select boxes specific settings
Changes product image

This will let you change the product image with a custom one.

Use URL replacements

This will enable you to redirect to a url when a radio option is clicked.

Placeholder

This will add an option to the select box that will act as a placeholder. Use this to instruct the user to select something.

Populate options

Here you add the labels and their prices for the field choices.

Mass add

To mass add option use the following format:

Option 1 | 10
Option 2 | 20

and press the Populate button. Please note that this method only adds options, it doesn't replace existing ones.

Text area and Text field specific settings
Placeholder

Here you may enter a placeholder for the field.

Maximum characters

Enter a value to limit the maximum characters the user can enter.

Conditional logic

With Conditional Logic you can apply rules to your fields in order to control their display. Not all fields can be used as rules to the logic. Only fields that have a way of showing a value are valid. An example of a field that cannot be used as a logic rule is the upload field. All fields though can have logic applied on them.

TM Extra Product Options

ACTION

This controls the display of the field if the conditions are met. You can either hide or show the field.

CONDITION

This controls how the logic is applied. You can either select to have the applied when ALL rules are me or when ANY of the rules are met.

FIELD NAME

This is the field that you want to check its value.

OPERATOR

This determines how the field's value is evaluated.

VALUE

This describes the value of the field you want to check. When the FIELD NAME is a select box, checkbox, radio button or a customized variation you will see the list of the available values. If it's a text field or a textarea you will need to type the value to check.

Settings

You can find the settings of the plugin under the Extra Product Options tab in the main WooCommerce settings.

General

Enable for roles

Here you can choose the roles which the plugin will be displayed for.

Final total box

Here you can set when the total box is being displayed.

Enable Final total box for all products

This will enable Final total box even when product has no extra options.

Strip html from emails

This will strip html code such as image tags from the field values whenever an email is sent.

Disable lazy load images

This will disable the lazy load image feature. Disable this if you are mostly dealing with mobile sites.

Enable plugin for WooCommerce shortcodes

Activating this setting will show the fields when using native WooCommerce shortcodes. Enabling this will load the plugin files to all of your pages.

Display

Display

This controls how your fields are displayed on the front-end.

Normal

This is the normal setting that displays the fields automatically

Show using action hooks

Setting this means that you have to manually write the code to your theme or plugin to display the fields and the placement settings will not work.

If you use Composite Products extension you must leave this setting to "Normal" otherwise the extra options cannot be displayed on the composite product bundles.

Action hooks
woocommerce_tm_epo

This displays both the fields and the extra total options box on the frontend

woocommerce_tm_epo_fields

This displays only the fields

woocommerce_tm_epo_totals

This displays only the extra options box on the frontend

Example usage
    function my_custom_function(){
        do_action("woocommerce_tm_epo");
    }

    add_action( 'woocommerce_before_add_to_cart_button','my_custom_function');
Extra Options placement

Here you can select where you want the extra options to appear.

Totals box placement

Here you can select where you want the Totals box to appear.

Floating Totals box

This will enable a floating box to display your totals box.

Force Select Options

This is a setting for shop and archive pages. This changes the add to cart button to display select options when the product has extra product options. Enabling this will remove the Ajax functionality.

Remove Free price label

The will remove the Free price label when product has extra options.

Hide uploaded file path

This hides the uploaded file path from users.

Show quantity selector only for elements with a value

Self-explanatory. The quantity selector refers to the quantity of the created options and not the native product quantity.

Hide add-to-cart button until an option is chosen

Enabling this will show the add to cart button only when at least one option is filled.

Auto hide price if zero

This hides the displayed price of an option if it is zero.

Use translated values when possible on admin Order

Please note that if the options on the Order change or get deleted you will get wrong results by enabling this!

Cart

Clear cart button

Enables or disables a clear cart button.

Cart Field Display

Select how to display the fields in the cart. You can choose the normal display or in a pop up.

Hide extra options in cart

This will hide or show the extra fields from the cart.

Hide extra options prices in cart

This will hide or show the extra fields price from the cart.

Prevent negative priced products

This will prevent the product being added to the cart if its calculated price is less than zero.

Strings

Final total text

This changes the Final total text of the totals box. Leave blank for default.

Options total text

This changes the Options total text of the totals box. Leave blank for default.

Free Price text replacement

Enter here a replacement text for the Free price label when product has extra option.

Reset Options text replacement

Enter here a replacement text for the Reset options text when using custom variations.

Edit Options text replacement

Enter here a replacement text for the Edit options text on the cart.

Additional Options text replacement

Enter here a replacement text for the Additional options text when using the pop up setting on the cart.

Close button text replacement

Enter here a replacement text for the Close button text when using the pop up setting on the cart.

Style

Enable checkbox and radio styles

This enables or disables extra styling for checkboxes and radio buttons.

Style

Here you can select the extra styling type.

Select item border type

Here you can select the style for the selected border when using image replacements or swatches.

Global

Enable validation

This enables the validation features.

Input decimal separator

Determine the decimal separator for user inputs.

Displayed decimal separator

This changes the decimal separator on currency prices.

Radio button undo button

This globally changes the undo button for all radio buttons.

Required state indicator

This changes the default * displayed when an option is required.

Required state indicator position

This changes the position of the indicator.

Include tax string suffix on totals box

This will include the tax string as a suffix on the totals box.

Datepicker theme

This changes the theme of the datepicker globally.

Datepicker size

This changes the size of the datepicker globally.

Datepicker position

This changes the position of the datepicker globally.

License

On this section you will activate the plugin to enable access to the support forum and access to the automatic update feature.

Activation

You cannot activate the plugin on localhost. Be sure that you are activating for an actual online site

Deactivation

Be sure to deactivate the license if you are moving servers or changing sites. You can only activate once per domain.

Loading outside WooCommerce

It is possible to use the provided action hooks outside of WooCommerce product screen. A typical scenario is when you develop a custom plugin or theme and you want to use the fields you have created.

Required steps

1. Load the required javascript files.

To correctly do this make sure that somewhere in the code, preferably before the header is rendered place the following code.

function tm_epo_js_loader(){
  do_action( 'woocommerce_tm_epo_enqueue_scripts');
}
add_action( 'wp_enqueue_scripts', 'tm_epo_js_loader' );

2. Displaying the fields.

This step requires that somehow you know the id of your WooCommerce product. Make sure you put the action somewhere after the 'init' hook if you want the fields to be displayed, like inside a template file.

Now it is time to display your fields. Find out where on your code you want to display them and use one of the provided action hooks. For example:

if (isset($post) && is_object($post) && ($post instanceof WP_Post )){
    do_action("woocommerce_tm_epo",$product_id);
}

Translation with WPML

To get started, you will need WPML and add-on Plugins i.e. the core WPML Multilingual CMS which is always required and the String translations add-on.

Guide for installing & activating WPML is available on the WPML getting started guide.

WooCommerce Multilingual

Please note that while WooCommerce Multilingual is not conflicting with the plugin you cannot use it to translate the extra options.

Product Translation Interface

It is essential to use the "Go to the native WooCommerce product editing screen" on "Product Translation Interface" setting else you will not be able to translate the options inside a product.

Translating global forms

1. Go to to the "TM Global Extra Product Options" list interface.

Here you can see all the translation of global form just right to the form's name. If a translation is not present you will see a cross (+) link to add the translation to the corresponding language else you will see the edit (pencil) icon indicating that a translation is already created.

2. Click the cross (+) link of the language you want to add.

3. Go to the form editor to edit the strings.

Please note that in this interface not all builder elements are activated. Only translatable strings are enabled.

Missing translations

If a translation is not created for a language then when viewing the product in that language the global form of the default language is used (or the language of the initial created form).

Translating extra options in products

1. Make sure the product in the original language has a builder you want to translate.

Translated products use the form builder of the original created product.

3. Translate the product first.

You can use the the WooCommerce Multilingual to do the translation but for the next step you must set the "Product Translation Interface" to "Go to the native WooCommerce product editing screen".

4. Go to the form editor to edit the strings.

After you have translated the product edit it again and the builder will be available. Please note that in this interface not all builder elements are activated. Only translatable strings are enabled.

Missing translations

If a translation is not created for a language then when viewing the product in that language the strings of the default language is used (or the language of the initial created product).