WooCommerce Extra Product Options

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

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.

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.

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.

Builder mode

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.

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.

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

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

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.

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.

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.

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

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.

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.

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.

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.

EDIT

Shows this field's settings

DELETE

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

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.

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

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.

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.

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.

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.

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.

Placeholder

Here you may enter a placeholder for the field.

Maximum characters

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

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.

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.

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 e^x, where x is the argument, and e is the base of natural logarithms.

• expm1

  Returns e^x - 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)

  Returns the natural logarithm (base e) of a number.

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

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.

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

Below are the predefined product variables you can use.

{quantity}

Product quantity

{product_price}

Original product price

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

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

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

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.

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

{CONSTANT_NAME}

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.

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

Click the Import CSV button to import a csv file.

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

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

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:

Here is CSV with two tables:

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

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.

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.

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.

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

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);
}

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.

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.

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.