Documentation for Custom Option Image

Custom Option Image for Magento 2 extension allows admins to add images/colors to custom options of products. It supports uploading unlimited images and assigning to custom options of different types, such as drop-down, multiple select, checkbox, radio button.

Add image to Custom Options

• Easily assign, edit and remove particular image for different custom options of select type.
• Admin can set different height and width of the image to be displayed for options of different input types.

There are two ways of installing extension in magento2.

1. Using COMMAND LINE.
   
2. Manually Install extension.
   

Option 1: Magento 2 install extension using COMMAND LINE (Recommended)

Follow below steps to install extension from the command line.

Step 1: Download the extension and unzip it.

Step 2: Upload it to code directory in your magento installation’s app directory. If code directory does not exists then create.

Step 3: Disable the cache under System → Cache Management.

Step 4: Enter the following at the command line:

 php bin/magento setup:upgrade php bin/magento setup:static-content:deploy

Step 5: Once you complete above steps log out and log in back to the admin panel and switch to Stores → Configuration → Mageants → Custom Option Image, The module will be displayed in the admin panel.

Option 2: Magento 2 install extension manually

Step 1: Download the extension and unzip it.

Step 2: Upload it to code directory in your magento installation’s app directory. If code directory does not exists then create.

Step 3: Disable the cache under System → Cache Management Edit app/etc/config.php file and add one line code: ‘Mageants_Customoptionimage’ → 1

Step 4: Disable the cache under System → Cache Management

Step 5: Once you complete above steps log out and log in back to the admin panel and switch to Stores → Configuration → Mageants → Custom Option Image, the module will be displayed in the admin panel.

• After Installation of Extension login to magento admin panel to set configuration of the extension.

• As per below screen shot you can set all the settings here.

Enabled : Set the option to Yes if you want to display custom options image on the product detail page.

Drop-down Option View : Choose the options for show the all image or dropdown option select after show image.

Multiple Select Option View : Choose the options for show the all image or multiple option select after show image.

Show image when selected: Image is only displayed when the custom option is selected.

Show all images: All images are displayed in each custom option. If a customer selects an option, its image will be highlighted.

• Unordered List ItemAdmin can also set the height and width of the image to be displayed for all custom options having 'Display Mode' as Image.

Then, expand the Image size settings section:

Drop-down Option Image Height — set image height for drop-down option type.

Drop-down Option Image Width — set image width for drop-down option type.

Radio Buttons Option Image Height — set image height for radio buttons option type.

Radio Buttons Option Image Width — set image width for radio buttons option type.

Checkbox Option Image Height — set image height for checkbox option type.

Checkbox Option Image Width — set image width for checkbox option type.

Multiple Select Option Image Height — set image height for multiple select option type.

Multiple Select Option Image Width — set image width for multiple select option type.

• Add option in Product Clicked Menu CATALOG  PRODUCT  EDIT  CUSTOMIZABLE OPTIONS.

• Create new options and list of All created options will be displayed in the grid. Click the Add Value button to create an options or select the one to edit it.

• Now click the “Save” button to save the product.

• Go to systemCache Management and click to “flush cache”.

Frontend Custom Option Image Type — choose the appropriate option type for an options. It’s possible to choose among various option types depending on your specific needs:

• Dropdown
• Radio Buttons
• Checkbox
• Multi-Select

See the example of custom options image with different input types (Dropdowns, Radio buttons,Checkbox Multiple select).

• Dropdown options view in frontend and show all options images.

• User can select at a time one radio button option.
• Radio Button options view in frontend and show all options images.

• User can checked one or more checkbox options.
• Checkbox options view in frontend and show all options images.

• User can select multiple option Multiple Select options view in frontend and show all options images.

• Frontend order view display all options in item grid.