Here are the server requirements that must be met to use this plugin:

• Wordpress 5.7+
• Woocommerce 5.0+

Simply upload the file "WooInfiniteOptions.zip" from the plugins panel of Wordpress then activate it clicking the link "Activate" under the name of the plugin.

Otherwise, you can also extract the plugin zip file and directly upload its content in the /wp-content/plugins/ folder of the website, before activating it from the Wordpress plugins page.

Click on the "Infinite options" menu link to open the customizers list panel :

From this panel, you can create, edit, duplicate, delete, import and export your customizers.
Simply click the button "Create a customizer" above the table to create a new customizer.

To edit an existing customizer, simply click the pencil icon displayed in the row of the target customizer.

Once on the customizer panel, simply click the "Settings" button in the footer to edit the options of the current customizer :

Options tab

From the Options settings tab, you can configure the main options :

• Title : This option defines the name of the current product customizer. This name is only visible from you on the backend side of the plugin.
• Modify the product price : Enabling this option allows you to assign price to the different options of the customizer, to modify the final price of the Woo product where it is applied.
• Show options price next to the product price : When this option is enabled, the options cost will be displayed next to the main product price. If it is disabled, the plugin will directly modify the main product price displayed on the page.
• Show prices in the resume : When the customizer is finished, a resume of the selected options is displayed in the product description. Enable this option to show the options prices in this resume.
• Show total price in the resume : This option allows you to show or hide the total cost of the selected options in the final resume.

Texts tab

You can define all the texts used in the customizer buttons nd resume from this panel .

Design tab

These options allow you to configure the colors and styles used in the customizer.

• Google font : Simply fill the name of a Google Font in this field to load it and use it as text font in the customizer. Leave this field empty to use the default theme font .
  
• Main button icon & Next step icon : Fill the classes names of any free icon from FontAwesome to add the corresponding icon in the button.
  Example: "fas fa-rocket" .

The other fields allows you to change the colors and font-size of the different elements of the customizer.

Custom code

This tab allows you to add your own custom JS and CSS code.

Click the button "Add a step" in the top menu to create a new step :

It will add a step block in the steps manager panel.
Simply click a minified step to open it and set it as active step.
To define a step as start step of the customizer, simply click its flag icon :

All the fields of the step are visible in the step block, and can be sorted simply by ordering them by using drag & drop.

Click the target step block to open it then click the "Add a new field" button to create a new field :

To edit an existing field, simply click the pencil button on the target field row :

It will open the field edition window, allowing to choose the field type and configure its options :

If you enabled the "Modify the product price" option in the customizer settings, you can define a cost for some types of field (like checkbox, radio buttons, buttons, number fields ...).
When it is a number field, this price is automatically multiplied by the filled quantity.
You can simply fill the wanted price in the "Price<" option if the field to assign it a static price.

But if the price of this field must change depending on different conditions, or if it results of a calculation based on the other fields of the form, you need to use the "Price calculation" option :

The price calculations use Javascript language, and can run any Javascript function, like the Math object ones : https://www.w3schools.com/js/js_math.asp To use the value of a field or the total cost of the options in your calculation, simply click the "Add a value" button above the calculation field and select the target element.
The plugin will automatically generate the corresponding shortcode (ex: [field-1_value] ) in the calculation field.

To change the price depending on conditions, click the button "Add a condition" above the caculation field.
The condition panel allows you to visually create the wanted conditions based on any field of the customizer :

You can freely define conditions and group of conditions, choosing if one of them must be filled only (OR) or all of them (AND) :

Then click the button "Insert" to automatically generate the corresponding code in the calculation field :

if (([field-1_value] == [field-2_value]) && ([field-3_isSelected])) { [price] = 5 }

In this example, the price of the current field will become $5 when the value of the field 1 and 2 are equal, and when the field 3 is selected .

Once the steps created, you need to link them to allow the plugin to show them successively and conditionally show the wanted ones.
Move the mouse cursor over a step and click its button "Start a link" to create a new link that starts from this step :

Then click the target step to finish the link creation:

Each step can be linked to several other steps, and you can define different conditions on each one by clicking the pencil icon on the link :

It will open the link condition panel :

You can freely define conditions and group of conditions, choosing if one of them must be filled only (OR) or all of them (AND) :

The target step of the link will be called by the plugin only if the configured conditions are filled.

You can choose to dynamically change the main image of the woo products that use the current customizer depending on the options selected by the customer.
To configure it, simply click the "Dynamic image" button in the footer of the customizer panel :

Create a new image by clicking the button "Add an image", click the image thumbnail to modify it, and click the "Visibility conditions" button to edit the visibility conditions of each image :

The plugin will verify the visibility conditions of each image on each user inetraction in the customizer, and will replace the Woo product image by the valid one.

You can assign a same customizer to different Woo products. To do that, simply edit the wanted Woo product from the Products > All Products Wordpress menu link.
Click the "Customization" tab link in the "Product data" panel from the Woo Product edition page to see :

Use the "Customizer" dropdown to select the wanted customizer that must be assigned to the current product.

The "Mandatory" checkbox allows you to force the customers to use the customizer to be able to add the woo product to the cart.
If it is enabled, the customizer button will replace the default "Add to cart" button. Otherwise it will be displayed next to it.

If your theme uses an Ajax cart system, you need to leave this option disabled .