You may add a multiple mix of options to each product.<\/p>\n\n\n\n
Installation<\/h2>\n\n\n\n
The installation procedure is very much similar to most other Prestashop modules. No core changes required therefore installation is straight forward, be sure to follow the instructions below to ensure a successful installation.<\/p>\n\n\n\n
- \n
- Upload the module folder to your stores
{root}\/modules<\/code> folder<\/li>\n\n\n\n- Once uploaded, login to your Prestashop Back Office and head over to the Modules<\/strong> section<\/li>\n\n\n\n
- Search for the module and click Install<\/strong><\/li>\n\n\n\n
- After a successful installation, the module configuration screen is presented to you. More details on this in the next section.<\/li>\n<\/ul>\n\n\n\n
Configuration<\/h2>\n\n\n\n
![\"Configuring](\"\/blog\/wp-content\/uploads\/documentation-images\/productcustomoptions\/configuration-installation.webp\")
<\/figure>\n\n\n\nOptions Tab<\/h3>\n\n\n\n
Open the module configuration and you will be presented with the options tab. Here you can create new fields which will be then made available to your products in the back office where you can manage them further. To get started, click the new option<\/strong> button located in the top right hand corner of the screen:
![\"New](\"https:\/\/www.prestafusion.com\/blog\/wp-content\/uploads\/2024\/03\/configuration-button-new-option.webp\")
<\/p>\n\n\n\nYou will now be presented with the following form options:<\/p>\n\n\n\n
Internal Name<\/strong><\/p>\n\n\n\n
Internal name for the field, without any punctuations or accented characters.<\/p>\n\n\n\n
Option Title<\/strong><\/p>\n\n\n\n
The name of the fields as it will be displayed in the store front on the product pages, checkout pages etc. This is a multi-language field, therefore if your store offers more than one language then you can provide a Display Name for each language.<\/p>\n\n\n\n
Option Hint<\/strong><\/p>\n\n\n\n
This will display a information icon next to the option title and the hint will appear when the customer clicks or moves the cursor over the icon.<\/p>\n\n\n\n
Option Type<\/strong><\/p>\n\n\n\n
Choose the type of option that will be presented to the customer on the product page. Your options are:<\/p>\n\n\n\n
Drop down<\/strong> – A simple drop down list of options from which the customer can select a single option
Checkboxes Multi-select<\/strong> – Display options as checkboxes from which the customer may select a single or multiple options
Radio Inputs<\/strong> – This will display all options as radio inputs from which the customer may select a single option.
Images<\/strong> – Allows you to define an image for your options to provide the customer with a visual representation of each option.
File:<\/strong> Allows you to add file upload fields to your products
Colors<\/strong> – Allows you to define colors for your options which will be presented to the customer as swatches for selection on the product page.
Date – <\/strong>Allows the customer to enter or select a date from a date field (with a pop out calendar)
Textfield<\/strong> – Allows the customer to enter some text into the field which will be added together with the product in the cart<\/p>\n\n\n\nRequired<\/strong><\/p>\n\n\n\n
Set this to yes to make the option mandatory on the product page for the customer to select from. The customer will now be able to add the product to the cart if a option value is not selected.<\/p>\n\n\n\n
Option Values<\/h3>\n\n\n\n
After adding a new option, you can start adding option values for the option. For example, if you created an option called Size<\/strong>, you would now start adding option values such as \u201cSmall, Medium\u201d<\/strong> etc.<\/p>\n\n\n\n
To start adding option values, simply click the add a option value<\/strong> button from he section show below:<\/p>\n\n\n\n
![\"Viewing](\"https:\/\/www.prestafusion.com\/blog\/wp-content\/uploads\/2024\/03\/configuration-option-values-1024x338.webp\")
<\/figure>\n\n\n\nDepending on the type of option you selected in the step earlier, you will be presented with a different set of properties to populate such as the Label or color properties. If you have a multi language store then don\u2019t forget to populate the label property in all languages.<\/p>\n\n\n\n
Now that you have created your first option and it\u2019s associated option values you can add additional options which you will use across your products. In the next section we\u2019ll take a look at how we can start assigning these options to individual products in your store.<\/p>\n\n\n\n
Steps<\/h3>\n\n\n\n
Steps allow you to organise options into steps. This will provide a walk through for the customer on the product page, allowing them to navigate and through the steps to help them customize their purchase.<\/p>\n\n\n\n
Steps make complex products with many options easier to navigate by presenting options gradually instead of all at once.<\/p>\n\n\n\n
To add steps, open the steps tab and then press the New step button from the top right. You can assign options to steps when assing options to products which we shall explore next.<\/p>\n\n\n\n
Mass Assign Tab<\/h3>\n\n\n\n
The mass assign tab allows you to copy the module configuration from one product in your store (we will configure a product later in this user guide) to multiple categories and \/ or products across your store.<\/p>\n\n\n\n
First start by typing in the name of the product you wish to copy the configuration from into the product search field and then select the product which appears in the search results dropdown.<\/p>\n\n\n\n
Next, select the category or categories you wish to the copy the configuration across to. If you select a single category you can also select individual products in that category you wish to copy to. Alternatively you can select multiple categories and the settings will be applied to all products in those categories.<\/p>\n\n\n\n
Assigning Product Options to Products<\/h2>\n\n\n\n
Adding options<\/h3>\n\n\n\n
To start assigning options and option values to products navigate to
Catalog > Products<\/code> andEdit<\/code> the product in question. Open up theModules tab<\/code> andconfigure<\/code> the Product Custom Options module as shown below:<\/p>\n\n\n\n![\"Assigning](\"https:\/\/www.prestafusion.com\/blog\/wp-content\/uploads\/2024\/03\/product-setup-configure.webp\")
<\/figure>\n\n\n\nYou should now see the following:<\/p>\n\n\n\n
![\"Group](\"https:\/\/www.prestafusion.com\/blog\/wp-content\/uploads\/documentation-images\/productcustomoptions\/configuration-steps.webp\")
<\/figure>\n\n\n\nEnsure that Enabled for Product<\/strong> is set to yes.<\/p>\n\n\n\n
Next select the option you wish to add to the product from the Add new a option<\/strong> dropdown. This will create a new group where you can add option values. Click the
add a option value<\/code> button which will reveal option values available for the new option you are adding. You can populate properties such as the price and weight; other properties may also exist for other option types such as images where you can also upload an image to associate with the option value.<\/p>\n\n\n\nThe option value entry should look similar to what is shown below:<\/p>\n\n\n\n
![\"Adding](\"https:\/\/www.prestafusion.com\/blog\/wp-content\/uploads\/2024\/03\/product-setup-option-value-add.webp\")
<\/figure>\n\n\n\nThe Price type property allows you to choose if the impact should be a fixed impact (this will add the option price to the base price of the product) or a percentage based impact (based on the base price)<\/p>\n\n\n\n
Click add to commit the change and add additional option values if you need to. You can delete or rearrange the position of both option values and options by dragging the position handle
![\"Drag](\"https:\/\/www.prestafusion.com\/blog\/wp-content\/uploads\/2024\/03\/product-setup-drag-option.webp\")
<\/p>\n\n\n\nContinue to add additional options and option values as described until you satisfied, after which you should press the
Save changes<\/code> button to permanently save the options you have assigned.<\/p>\n\n\n\nSteps<\/h3>\n\n\n\n
If you wish to organise options into steps, then add a step from thew left hand panel. This will then appear on the options stage. From here you
can add options to different steps by simply dragging them onto the appropriate step.<\/p>\n\n\n\nConditional Options and steps<\/h3>\n\n\n\n
The conditional options feature allows you to hide an entire step, entire options or specific option values when certain option values are selected by the customer. Some examples of how conditions can be used are:<\/p>\n\n\n\n
- \n
- When customer selects a small size, hide the color blue under the color option.<\/li>\n\n\n\n
- When customer selects a small size, hide all color options.<\/li>\n\n\n\n
- When customer selects a small size or a medium size, hide Step 3.<\/li>\n\n\n\n
- etc<\/li>\n<\/ul>\n\n\n\n
Each step, or options has the following icon:
![\"Conditional](\"https:\/\/www.prestafusion.com\/blog\/wp-content\/uploads\/2026\/05\/product-setup-condition-option.webp\")
Cliking it will display the following popup:<\/p>\n\n\n\n![\"Applying](\"https:\/\/www.prestafusion.com\/blog\/wp-content\/uploads\/documentation-images\/productcustomoptions\/product-setup-popup-conditions.webp\")
<\/figure>\n\n\n\nLeft hand side<\/strong><\/p>\n\n\n\n
The left hand side allows you to select whether the entire option you are configuring will be hidden or specific option values within the option; when the conditions are satisfied.<\/p>\n\n\n\n
Right Hand Side<\/strong><\/p>\n\n\n\n
The right hand side allows you to choose when the option or option values selected on the left hand side will be hidden. If the customer selects any of the option values you select on the right hand side, then the options \/ option values on the left hand side will be hidden for the option you are configuring.<\/p>\n\n\n\n
Front End<\/h2>\n\n\n\n
After you have finished assigning options and option values to your products, they should be visible on the product page<\/strong> for the customer to select before they purchase an item:<\/p>\n\n\n\n
![\"Product](\"\/blog\/wp-content\/uploads\/documentation-images\/productcustomoptions\/front-end-product.jpg\")
<\/figure>\n\n\n\nThe options will also be displayed in the customer shopping cart and you’ll be able to see the options selected from the back office when the customer places their order.<\/p>\n\n\n\n
Get Product Custom Options on Prestashop Addons site<\/a><\/p>\n
- Once uploaded, login to your Prestashop Back Office and head over to the Modules<\/strong> section<\/li>\n\n\n\n