Extra Product Options & Add-Ons for WooCommerce

Create extra options on your products!

epo.themecomplete.com

Thank you for choosing our plugin. Should you have any inquiries beyond the contents of this documentation, we encourage you to visit our support forum for further assistance. We appreciate your support!

Overview

With Extra Product Options, you can effortlessly generate additional fields for your WooCommerce products either locally on the edit product page or globally. The latest version provides support for various field types including checkboxes, radio buttons, select boxes, textareas, input boxes, upload, date, range picker, and color picker. These custom options are prominently displayed above the add to cart form, enhancing the flexibility and functionality of your product pages.

Minimum requirements

  • PHP 7.4
  • WordPress 5
  • WooCommerce 5
  • JavaScript / jQuery

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 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 (or create if not present) 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 subsection Extra Product Options in the product data panel and click it. You should now be presented with the plugin interface. If you haven't created extra options before for that product you will see the Builder mode.

Note that the Normal mode previously used in the plugin is deprecated and unsupported. It will eventually be removed from the plugin.

Builder mode

This is the preferable way of creating options.

In this mode you are presented with a Form Builder that you will use to create your options. Click the Add section button to create a section where the options must be placed in. Click the Add element 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.

Advanced plugin usage

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

Step 1

From the WordPress dashboard choose Products > Global Forms.

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 Forms. 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 Forms

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 an 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.

Global Forms

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

Any existing Global Forms created are displayed in the familiar WordPress table view.

TM Extra Product Options

To add a new global form 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.

The priority of the options created directly on the product is 1000.
Please note that the "Priority" alone is not used to determine if your form will show up before or after the local (per-product) options. The section setting Section placement is also used for that purpose. This way you can have complex setups.
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.

TM Extra Product Options

Sections

The section is where you put all of the form elements. You can have multiple sections and each section can vary in width.

Overview

TM Extra Product Options

MOVE

Click and drag to reorder 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.

CHANGE WIDTH

Drag to change the section width.

ADD ELEMENT

Click to add a new element to that section.

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 compared 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

The fields are the elements that you can add in order to present the user with a choice or give some sort of information.

Overview

TM Extra Product Options

DRAG HANDLE

Click and drag to reorder the field.

MINUS

Decreases the size of the field.

PLUS

Increases the size of the field.

DUPLICATE

Duplicates the field.

CHANGE ELEMENT TYPE

Changes the element to another element.

EDIT

Shows this field's settings

CHANGE WIDTH

Drag to change the section width.

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 section 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.

You can change a field's type after you have placed it inside a section by using the double arrow icon.

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.

Set to Fee

This makes the option to be a fee added to the cart line item.

Price type

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

  • Fixed amount

    This is a 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 or the "Fixed amount + options" type.

  • Fixed amount + options

    This is a fixed increase or decrease of the initial product price plus all of the other options that are not of this type or the "Percent of the original price + options" type.

  • Current value

    This will set the price to the current value of the field.

  • Price per Interval

    This will multiply the field's value by the price you set and will deduct the minimum price. This price type is exclusive to the range picker element.

  • Step * price or Quantity

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

  • Price per row

    This will multiply the field's text rows by the Price you set. This price type is exclusive to the textarea element.

  • Price per char

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

    This price type has several variations like Price per char (no spaces), Price per char (no first char), Price per char (no n-th char), Price per char (no n-th char and no spaces), Percent of the original price per char, Percent of the original price per char (no first char), Percent of the original price per char (no n-th char), Percent of the original price per char (no n-th char and no spaces)

  • Price per word

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

    This price type has several variations like Price per word, Price per word (no n-th char), Percent of the original price per word, Percent of the original price per word (no n-th char)

  • Math formula

    This will set the price of the field based on a mathematical formula.

  • Lookup table

    This will set the price of the field based on a lookup table.

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 then 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.

Textarea 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 Conditional 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.

Math Formula

The math formula price type can be used to set the price of an option based on a mathematical formula. This formula can be based on other options and mathematical operations that are supported by both PHP and JavaScript languages.

Supported functions

The following is a list of all the supported functions:

  • abs

    Returns the absolute value of a number.

  • acos (arccos)

    Returns the arc-cosine of a number.

  • acosh

    Returns the hyperbolic arc-cosine of a number.

  • arcctg (arccot, arccotan)

    Calculates the inverse cotangent of a value.

  • arcsec

    Calculates the inverse secant of a value.

  • arccsc (arccosec)

    Calculate the inverse cosecant of a value.

  • asin (arcsin)

    Returns the arcsine of a number

  • atan (atn, arctan, arctg)

    Returns the arctangent of a number.

  • atan2
    atan2(x, y)

    Calculates the arc tangent of the two variables x and y.

  • atanh

    Returns the hyperbolic arctangent of a number.

  • avg (average)

    Calculate the average of the given arguments.

  • bindec

    Returns the decimal equivalent of the binary number.

  • ceil

    Returns the next highest integer value by rounding up if necessary.

  • cos

    Returns the cosine of the specified angle, which must be specified in radians.

  • cosec (csc)

    Calculate the cosecant of a value.

  • cosh

    Returns the hyperbolic cosine of a number.

  • ctg (cot, cotan, cotg, ctn)

    Calculate the cotangent of a value.

  • decbin

    Returns a string containing a binary representation of the given argument.

  • dechex

    Returns a string containing a hexadecimal representation of the given unsigned argument.

  • decoct

    Returns a string containing an octal representation of the given argument.

  • deg2rad

    Converts the number in degrees to the radian equivalent.

  • exp

    Returns ex, where x is the argument, and e is the base of natural logarithms.

  • expm1

    Returns ex - 1, where x is the argument, and e is the base of natural logarithms.

  • floor (int)

    Returns the next lowest integer value (as float) by rounding down if necessary.

  • fmod
    fmod(num1, num2)

    Returns the floating point remainder of dividing the dividend (num1) by the divisor (num2).

  • hexdec

    Converts a hexadecimal string to a decimal number.

  • hypot
    hypot(x, y)

    Returns the length of the hypotenuse of a right-angle triangle with sides of length x and y.

  • intdiv
    intdiv(num1, num2)

    Returns the integer quotient of the division of num1 by num2.

  • log (ln)

    log(num, base)
    Returns the logarithm of a number. If the optional base parameter is specified, log() returns logbase num, otherwise log() returns the natural logarithm (base e) of num.

  • log10 (lg)

    Returns the base 10 logarithm of a number.

  • log1p

    Returns the natural logarithm (base e) of 1 + x, where x is the argument.

  • octdec

    Returns the decimal equivalent of the octal number represented by the argument.

  • pi
    pi()

    Return the Pi constant.

  • pow
    pow(base, exponent)

    Given two arguments, base and exponent, returns baseexponent

  • rad2deg

    Converts the radian number to the equivalent number in degrees.

  • round

    Returns the value of a number rounded to the nearest integer.

  • sec

    Returns the secant of a number.

  • sin

    Returns the hyperbolic sine of a number.

  • sinh

    Returns the hyperbolic sine of a number.

  • sqrt

    Returns the square root of a number.

  • tan (tn, tg)

    Returns the tangent of a number.

  • tanh

    Returns the hyperbolic tangent of a number.

  • if

    The if function is used to return a result based on a condition. See below.

  • max

    Returns the lowest-valued number passed into it. See below.

  • min

    Returns the largest of the numbers given as parameters. See below.

  • lookuptable

    This is used to return a result based on a lookup table. See below.

  • concat

    This is used only to join strings. See below.

You can use the normal mathematical operators like -, +, /, *

You can also use logical operators like &&, ||, <, >, <=. >=, !=, ==. The result of those operators is either 1 or 0.

Special functions

There are four special functions: if, min, max and lookuptable.

If function

The if function has the following format:

if(condition, true, false)

The condition can be condition which can contain global variables or the variables for the current element. The true and false are what the function should output depending on the condition.

min and max functions

The min and max functions has the following format:

min(value1, value2, ...)
max(value1, value2, ...)

The values can contain global variables or the variables for the current element.

lookuptable

This function is used to calculate the value for a lookup table and you can see how you case use it below.

concat function

The concat function has the following format:

concat(value1, value2, ...)

The values can contain global variables or the variables for the current element. If you need to enter a raw string add it in quotes.

Product variables

Below are the predefined product variables you can use.

{quantity}

Product quantity

{product_price}

Original product price

{dynamic_product_price}

The Dynamic product price is the calculted price for the product from the dynamic element when using the Action mode Set native product Price.

Variables for the current element

Below are the predefined variables for the current element.

{this.value}

The value of this element converted to a float

{this.text} or {this.rawvalue}

The raw value of this element

{this.value.length} or {this.text.length}

The value length of this element

{this.count}

The number of options the user has selected

{this.count.quantity}

The total quantity of this element

{this.quantity}

The quantity of this element

Variables for other elements

To target other elements you will need to know the element id or you can just click on the buttons that represent the element.

You will find a selector to choose between the Price of the element, the Value of element, the Quantity of element and the Selected options of element

The format that you enter to target other elements is:

{field.ID.TYPE}

where ID is the element id and TYPE one of the following:

price {field.ID.price}

The price of the targeted element

You cannot target elements that their price type depends on the element that has the math formula. This includes elements that have the price type Percent of the original price + options and Fixed amount + options.
value {field.ID.value}

The value of the targeted element converted to a float

text {field.ID.text} or rawvalue {field.ID.rawvalue}

The raw value of the targeted element

value.length {field.ID.value.length} or text.length {field.ID.text.length}

The text length of the targeted element

count {field.ID.count}

The number of options the user has selected on the targeted element

count.quantity {field.ID.count.quantity} or quantity {field.ID.quantity}

The total quantity of the targeted element

Special variables

Below are the special variables you can use.

{options_total}

This is what you would expect to get as an option total when using price types like the percent of price + options. So, that would be the + options part. This total basically includes all options that are not percent of price + options, fixed price + options and don't use a math formula with any of the special variables.

{product_price_plus_options_total}

This is the sum of {options_total} plugin the original product price.

{cumulative_total}

The {cumulative_total} is the total of all other selected options that don't use the {cumulative_total} or {product_price_plus_cumulative_total} variable. However, when multiple addons employ the mathematical variable {cumulative_total} or {product_price_plus_cumulative_total} then each one includes the cost of the preceding ones, but not the subsequent ones.

{product_price_plus_cumulative_total}

This is the sum of {cumulative_total} plugin the original product price.

Math Formula Constants

You can create constants by going to the plugin settings->Math Formula Constants

Click the Add Constant button to create a new constant. Enter the name of the constant in the CONSTANT NAME field and the value of the constant to the CONSTANT VALUE field.

The constant name should only have latin characters without spaces and the value should only contain a number without any letters.

To access a constant in the formula use the following format:

{CONSTANT_NAME}

Math Formula and Currency

In general the result of the math formula will not be converted to any currency. Instead the formula results will be the same on any currency used.

However, if you want a number to be converted to converted to the current currency you can enter it in curly braces.

For example the following code will replace {10} with the current currency for 10

{10}/{quantity}

Lookup tables

The lookup table price type is used to set the price of an element based on a lookup table.

You can use tables with one or two dimensions. When using a table with one dimension only the x axis of the table is used to determine the value.

The usual scenario when using a lookup table is when you want to attach two elements to the x and y axis of the lookup table and have the result as the price of a third element.

Creating a lookup table

To gain access to the Lookup table interface from the WordPress dashboard choose Extra Product Options > Lookup tables.

Any existing Lookup tables created are displayed in the familiar WordPress table view.

Lookup tables

To add a new table click the Add Lookup table button. This will bring you to the add screen.

Add Lookup table

Click the Import CSV button to import a csv file.

After selecting a valid csv file you should be seeing the importable table.

Add Lookup table

Clicking the Import CSV button again will override the current table.

CSV file format

The CSV file has some specifications in order to work with the plugin.

  • The top left cell is reserved for the table name and should contain at least one character that is not a number. Table names are case-sensitive.
  • After the table name the rest of the first row is for the values of the X axis.
  • The first column after the table name is for the Y axis values.
  • You can add more lookup tables on a single csv file. You can add the next table following the same formatting rules after the table is finished.

Here is CSV with one table:

CSV file format

Here is CSV with two tables:

CSV file multiple tables

How to use a lookup table

Lookup tables can be used directly as a price type on the supported elements or as a function for the math formula price type.

Using as a price type

You will need to create one element where you will apply the price of the lookup table. Depending on how you want to use the lookup table you will need two more fields, one more or none.

Using two fields for X and Y axis

After you create the two fields you want to use for the X and Y axis find and write down their unique ids. Those can be found when you edit the element on the top right conrner.

Edit the element you want to apply the pricing for the lookup table and set its price type to "Lookup table".

You should now see three more fields below the price types: "Lookup table", "Element ID for x" and "Element ID for y".

Lookup table

This is a list of all the lookup tables you have imported. The number next to the table name inside the parenthesis is the table index in case you have multiple tables with the same name.

Element ID for x

This is where you will paste the id of the element you want to use for the X axis.

Element ID for y

This is where you will paste the id of the element you want to use for the Y axis.

Using one field only for the X axis
This will only use the value for the first row after the X axis no matter how many the table has

After you create the field you want to use for the X axis find and write down its unique id. This can be found when you edit the element on the top right conrner.

Edit the element you want to apply the pricing for the lookup table and set its price type to "Lookup table".

You should now see three more fields below the price types: "Lookup table", "Element ID for x" and "Element ID for y".

Lookup table

This is a list of all the lookup tables you have imported. The number next to the table name inside the parenthesis is the table index in case you have multiple tables with the same name.

Element ID for x

This is where you will paste the id of the element you want to use for the X axis.

Element ID for y

Leave this setting blank.

Using no fields

Edit the element you want to apply the pricing for the lookup table and set its price type to "Lookup table".

You should now see three more fields below the price types: "Lookup table", "Element ID for x" and "Element ID for y".

Lookup table

This is a list of all the lookup tables you have imported. The number next to the table name inside the parenthesis is the table index in case you have multiple tables with the same name.

Element ID for x

Here you can add any math formula variables like {quantity} or {product_price}. You can also target fields like {field.ID.TYPE} where ID is the element id and TYPE is text, value, value.length, count or count.quantity just like in the math formula.

Element ID for y

Leave this setting blank if you want to use one the X axis or fill it in the same as the previous setting.

Using on the math formula

The function of the math formula to use the lookup table is lookuptable.

lookuptable(field, lookupTable)
field

This is used to target the field for the X axis or the fields for X and Y axis.

You can use any variables that you can use in the formula eg {field.ID.TYPE}.

If you want to set both X and Y axis you must use the array format eg [{field.ID1.text}, {field.ID2.text}].

lookupTable

This is to select the lookup table you want to use.

You should enter the table name in quotes eg 'Table 1'

If the table is not unique you should use the array format and indicate the index of the table eg ['Table 1', 0] where 0 in this case is the table index. Indexes always start with the 0 as the first one. If you have 3 tables with the same name the first one has index 0, the second 1 and the third 2.

A random example:

lookuptable([{field.62e7147c6016e3.03696600.text}, {field.62e714816016f8.90822228.text}], ["table 1", 0])

This example uses the text of the element with ID 62e7147c6016e3.03696600 for the X axis, the text of the element with ID 62e714816016f8.90822228 for the Y axis and for the table it use the first one name table 1.

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 the 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 the 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

This will remove the Free price label when the 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 element is chosen

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

Hide add-to-cart button until all elements are chosen

Enabling this will show the add to cart button only when all visible elements are 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 options from the cart.

Hide extra options prices in cart

This will hide or show the extra option prices 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 the product has extra options.

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.

This procedure is not meant to be used for loading the plugin on a WooCommerce product that is being displayed on a custom page. This is meant to be use on custom plugin development only.

Required steps

1. Load the required javascript files.

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

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

Overview

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 the "Global Forms" list interface.

Here you can see the translations of all the global forms. 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.

2. Translate the product first.

You can use 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".

3. 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).