1. How to install, plugin features and automatic updates?

Introducing the Improved Product Options, installation and registration!

1.1 Plugin Features

Provided information in this section and the documentation will help you understand your new plugin, and get the most out of it

The awesome product options plugin for your WooCommerce store, with eyecatching features for both you and your customers. Check plugin demo pages here!

• Attribute swatches and styles
• Extra product options
• Awesome user interface
• Unlimited terms customizer
• Never show Out of Stock option!
• Add swatches and extra product options in Shop/Archives with thmbnail support
• Backorder Support
• Automatic updates in single click inside WordPress Dashboard!
• Basic support for custom product attributes
• Translation ready! WPML is supported!
• and a lot more!

1.2 Plugin Installation

Provided information in this section covers the plugin installation.

To install this plugin you must have a working version of WordPress and WooCommerce plugin already installed. For information on installing the WordPress platform, please see the WordPress Codex - https://codex.wordpress.org/Installing_WordPress. Upon downloading the Improved Product Options for WooCommerce archive, extract the archive and inside you will find full contents of your purchase. In the main archive you will find improved-variable-product-attributes.zip file archive that contains the installable plugin files.

Please Note: You can install the plugin in two ways: inside WordPress, or via FTP. If you have trouble installing the theme inside WordPress, please proceed with installing it via FTP and you will be able to get around the issue

1.3 Automatic Updates

Plugin automatic updates are available! Just use Envato Market (https://envato.com/market-plugin/) plugin!

To get automatic updates within your website WordPress Dashboard use the Envato Market (https://envato.com/market-plugin/) plugin. This plugin, once installed, will allow you to update all plugins and themes purchased on CodeCanyon or Themeforest, so feel free to use this standardized solution! To get this to work, you need to navigate here → Envato Market (https://envato.com/market-plugin/) and install and activate this plugin. Once done, plugin will connect to the Envato platform and acquire your purchase information. Then you can update all plugins and themes directly in your WordPress Dashboard! Sounds awesome!

1.4 Theme Specific Installations

Some themes need custom settings!

After installation, navigate to WooCommerce > Settings > Improved Product Options > Register and Automatic Updates to setup your theme specific installation. If you find your theme in the list follow the installation instructions. To request a specific theme installation please check the support section.

1.4.1 X Theme

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION:
• SHOP PRODUCT JQUERY SELECTOR:
• SHOP PRICE JQUERY SELECTOR:

1.4.2 Avada

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION: woocommerce_after_shop_loop_item_title:20
• SHOP PRODUCT JQUERY SELECTOR:
• SHOP PRICE JQUERY SELECTOR:

1.4.3 BeTheme

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION: woocommerce_after_shop_loop_item_title:20
• SHOP PRODUCT JQUERY SELECTOR:
• SHOP PRICE JQUERY SELECTOR:

1.4.4 Bridge

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION: woocommerce_after_shop_loop_item
• SHOP PRODUCT JQUERY SELECTOR:
• SHOP PRICE JQUERY SELECTOR:

Additional! You might want to add this custom CSS to align your selectors in center and reduce a gap on the shop/archive pages.

.products .ivpa-content {text-align:center; margin-top:0; padding: 0 20px 10px;}

1.4.5 Divi

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION:
• SHOP PRODUCT JQUERY SELECTOR:
• SHOP PRICE JQUERY SELECTOR:

1.4.6 Enfold

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION: woocommerce_after_shop_loop_item:20
• SHOP PRODUCT JQUERY SELECTOR:
• SHOP PRICE JQUERY SELECTOR:

Additional! You might want to add this custom CSS to fix Add to cart button padding on single product pages as well as on shop/archive pages.

.single_variation_wrap {margin:10px 0px 20px 0px;}
body .ivpa_content {padding: 0 20px 10px; margin-top: 0;} 

1.4.7 Flatsome

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION: woocommerce_after_shop_loop_item_title:20
• SHOP PRODUCT JQUERY SELECTOR:
• SHOP PRICE JQUERY SELECTOR:

1.4.8 Legenda

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION:
• SHOP PRODUCT JQUERY SELECTOR: li
• SHOP PRICE JQUERY SELECTOR:

Additional! Make sure you've enabled the Add to cart button for your product archives. Navigate to Theme Options > Products Page Layout.

1.4.9 Listify

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION:
• SHOP PRODUCT JQUERY SELECTOR:
• SHOP PRICE JQUERY SELECTOR:

Additional! If you want selectors in archives then you'll need to disable the overlays in the Listify theme. You can do this with this custom CSS.

.type-product .product-clickbox,
.type-product .product-overlay {display:none;}

1.4.10 Salient

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION:
• SHOP PRODUCT JQUERY SELECTOR:
• SHOP PRICE JQUERY SELECTOR:

1.4.11 The7

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION:
• SHOP PRODUCT JQUERY SELECTOR: li
• SHOP PRICE JQUERY SELECTOR:

1.4.12 HandyStore

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION: woocommerce_single_product_summary:7
• SHOP INIT ACTION: woocommerce_shop_loop_item_title
• SHOP PRODUCT JQUERY SELECTOR:
• SHOP PRICE JQUERY SELECTOR:

Additional! On Shop/Product Archives the Add to Cart button will work but it will still be shown as search icon. This is just theme limitation, due to its use of filters. We cannot do anything about it at the moment.

1.4.13 Kallyas

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION: woocommerce_shop_loop_item_title
• SHOP PRODUCT JQUERY SELECTOR:
• SHOP PRICE JQUERY SELECTOR:

Additional! To improve look on your Shop/Product Archives use the following custom CSS.

body .ivpa-content {
	margin-top: 0;
	margin-bottom: 20px;
}

1.4.14 Porto

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION: woocommerce_after_shop_loop_item_title
• SHOP PRODUCT JQUERY SELECTOR:
• SHOP PRICE JQUERY SELECTOR:
• SINGLE PRODUCT IMAGE JQUERY SELECTOR: .product-summary-wrap .img-thumbnail .inner

Additional! To improve look on your Shop/Product Archives set the alignment to Center.

1.4.15 Royal Theme

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION: woocommerce_after_shop_loop_item
• SHOP PRODUCT JQUERY SELECTOR:.product
• SHOP PRICE JQUERY SELECTOR:
• SINGLE PRODUCT IMAGE JQUERY SELECTOR:

Additional! To improve look on your Shop/Product Archives set the alignment to Center.

1.4.16 Atelier

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION: woocommerce_after_shop_loop_item_title
• SHOP PRODUCT JQUERY SELECTOR:
• SHOP PRICE JQUERY SELECTOR:
• SINGLE PRODUCT IMAGE JQUERY SELECTOR:

1.4.17 Impreza

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION:
• SHOP PRODUCT JQUERY SELECTOR:
• SHOP PRICE JQUERY SELECTOR:
• SINGLE PRODUCT IMAGE JQUERY SELECTOR:

1.4.18 Camelia

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION:
• SHOP PRODUCT JQUERY SELECTOR:
• SHOP PRICE JQUERY SELECTOR:
• SINGLE PRODUCT IMAGE JQUERY SELECTOR:

1.4.19 The Gem

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:thegem_woocommerce_single_product_right:29
• SHOP INIT ACTION:
• SHOP PRODUCT JQUERY SELECTOR:
• SHOP PRICE JQUERY SELECTOR:
• SINGLE PRODUCT IMAGE JQUERY SELECTOR:

1.4.20 Unero

Please follow these instructions for proper plugin installation.

Set these settings to install the plugin properly. If the option is empty, just leave it blank as the default setting will work.

• SINGLE PRODUCT INIT ACTION:
• SHOP INIT ACTION:
• SHOP PRODUCT JQUERY SELECTOR:
• SHOP PRICE JQUERY SELECTOR:
• SINGLE PRODUCT IMAGE JQUERY SELECTOR:

2. Plugin Guide and Settings?

A complete guide to various features and settings included in Improved Product Options. Please browse this section to get familiar with the plugin.

2.1 Using the Improved Product Options for WooCommerce

Provided information in this section covers the Improved Product Options for WooCommerce basic features and use.

First of all, the basics. You will need Variable Products and assigned registered attributes from Products > Attributes! How to create great looking color swatches for your WooCommerce Variable Products? You can also use this plugin with simple products or other product types. Check this guide on how to do it WooCommerce Simple Products attribute selection and extra options? Is it possible?

Improved Product Options for WooCommerce will automatically replace current default select boxes in Single Product Pages with the customizations and configuration that is set in the Product Options Settings. The plugin also adds Variable Selectors to your Shop/Products archives and product loops, but this option needs to be activated. In order to configure the plugin navigate to WooCommerce > Settings > Improved Options. Use the attribute manager to add customizations to your attributes or add extra options to your products.

2.1.1 Attribute Swatches

Use the attribute manager to customize your registered attributes from Products > Attributes.

Example attribute swatch! Click + icon to edit style or Add Item + to create a new customization/swatch IMPORTANT

Click the Paint Bucker/Cogs Wheel Icon an attribute customization manager will appear! IMPORTANT

2.1.2 Attribute Swatches Syle Settings

2.1.3 Extra Product Option Settings

Use Custom option button to add new extra product option. Additional supported field types are Input Field, Checkbox, Textarea and System Select or even Plain Text, Color, Thumbnail, Selectbox and HTML!

Example extra product option! Click + icon to edit terms/style or Add Item + to create a new customization/swatch IMPORTANT

Click the Paint Bucker/Cogs Wheel Icon an attribute customization manager will appear! IMPORTANT

2.1.4 Extra Product Option Appearance

In addition to standard types(Plain Text, Color, Thumbnail, Select Box and HTML), there are more options available for Custom Option.

2.1.5 Product Page Settings

General plugin settings when used in Single Product pages.

2.1.6 Shop/Archive Settings

General plugin settings when used in Shop and Product Archive pages.

2.1.7 Installation

Sometimes your theme will not have the default classes for shop elements. If this is the case use these options to override default jQuery selectors.

2.1.8 General Settings

Miscellaneous advanced settings.

3. FAQ and How to?

This is the FAQ and How to section? If you are having issues check these guides!

Q: How to use the plugin properly?

This plugin is all about customizing your attribute selectors for your products, making them prettier and easier to use, significantly improving your shop's User Experience. Custom Product Attributes created via Edit Product page won't be used, but you can always compensate that with Custom Options. Do not use Custom Attributes added directly to products, but use the registered attributes from your Products > Attributes. Once you have setup everything you can navigate to the WooCommerce > Settings > Improved Product Options and setup and style your attributes. Some theme's we've tested will not work with default IVPA settings, so if you experience any issues, be sure to check the Theme Specific Installations for integration with your Shop/Product Archives.

Q: My variable images do change, but colors/images are not the ones that should be shown?

In the 3.0.2 version we have added the option Image Changing Attributes. This means that you can now select which attributes will change the image, so if your variable products are not set in the correct order you can use this quick fix. Just select which attributes, when selected, will change the image. A note that you can select multiple attributes in the multiselect option Image Changing Attributes by using CTRL+Click. If this does not solve your issue, because you have multiple image changing attributes, then your variable products are not set in the correct order and because of this it might seem buggy. Here is a screenshot of correctly set attributes for the product you can find here. What does the correct order means? It means that your default image should correspond to every first attribute term. So, in this case our first variations will be Polo and Blue as the first default product image is Blue and Polo, but when the Regular variations start we will also need Blue at first, so that wrong image will not be shown. Basically these are the simple rules, nothing else :)

Q: We have a stepped selection functionality, how do I enable it?

To enable the stepped selection you will just need to navigate to your IVPA options WooCommerce > Settings > Improved Product Options and under the Advanced Settings check the Step Attribute Selection option.

Q: Customers can add products without attributes, how can I fix this?

At first, you will need to check the option Disable Attribute Deselection in the Advanced Settings in your WooCommerce > Settings > Improved Product Options settings page. Then you will need to setup your default attributes for your products, then the attributes will be selected at first page load and the deselection will not be possible, because it was restricted in the IVPA settings.

Q: Translations, WPML and Improved Product Options

Improved Product Options supports WPML multi language plugin for WordPress. Using this plugin managing multilingual sites is easy. Before starting this procces make sure you have the WPML software installed on your WordPress installation. More on WPML ( WordPress Multilingual ) see at this link https://wpml.org/.

Make sure you have the following software installed before continue: WordPress, WooCommerce, WPML, WooCommerce Multilingual and the Improved Product Options.

• WPML - WordPress Multilingual get it here https://wpml.org/
• WooCommerce Multilingual - Plugin that enables full WooCommerce translation support for WPML get it here https://wordpress.org/plugins/woocommerce-multilingual/

First steps are to have a functional site in one language, then start with the translations. Install WPML and WooCommerce Multilingual. For step by step instructions on translating your shop with these two plugins please visit this link https://wpml.org/documentation/related-projects/woocommerce-multilingual/.

Translation files for the Improved Product Options are in the /translations/ folder in the full plugin archive you have downloaded from https://codecanyon.net. If your language does not exists in the folder follow next steps to translate the plugin. Also use Poedit to update your translations.

• 1. Get Poedit App. https://poedit.net/download
• 2. Run Poedit. Navigate File>New catalog from POT file. Fill in the basic fields, set your country, language.
• 3. Translate the strings by clicking on a sentance and filling in the textarea bellow. If strange characters accure like %1$d, just ignore them and make a translation in between including these strange characters.
• 4. Save your file as ivpawoo-**LANGUAGE**.po **LANGUAGE** represents your language code. For instance if you're translating to Italian your language code is it_IT and the file name should be ivpawoo-it_IT.po ( language codes: de_DE (Germany), fr_FR (France) etc.)
• 5. Upload the .po and the .mo file generated by Poedit to your WordPress installation in the /wp-content/languages/plugins/ folder If the folder does not exists create one.
• *** If you have already translated the file with the previous IVPA version, copy the .po file in your unzipped local copy of IVPA in the /lang/ folder (if it doesn't exsist just create one) and rescan the plugin for new and merging strings!
• WPML - WordPress Multilingual get it here https://wpml.org/
• WooCommerce Multilingual - Plugin that enables full WooCommerce translation support for WPML get it here https://wordpress.org/plugins/woocommerce-multilingual/

If the translation file in your language exists just copy it to your WordPress installation in the /wp-content/languages/plugins/ folder and the Improved Product Options will be automatically translated.

WPML and the Improved Product Options support one another and the full plugin translation is quite easy to achieve. If you have followed all previous steps and made your site multilingual then just a few special translations for the Improved Product Options need to be added. Just follow these guidelines to achieve the full translation.

• 1. Your attributes need to be translatable. To do this navigate Products > Attribute and check the translatable checkbox for the attributes that you need.

  

• 2. Use WooCommerce Multilingual to translate your attributes. When you do that click the Synchronize attributes and update product variations button.

  

• 3. Navigate to your IVPA options WooCommerce > Settings > Improved Product Options and set attribute customizations for the default language. When you use a language switcher from the admin bar, you will get customizations in different languages. All languages must be set separately. You do not need to set the other options for different languages, but the customizations are required for all languages. Use the switcher and save each language customization settings separately.

• 3.1 Set your default language settings

  3.2 Then switch the language and set them up again in different language.

• The common IVPA plugin settings that are not a part of the attribute customizer are not set when changing languages. It only affects the customizations.

When you have completed all these steps your customized attributes will fully support the WPML - WordPress Multilingual plugin. Thanks for using the WPML and the Improved Product Options!

Q: IVPA plugin common Admin Side issues?

If you are having issues with saving errors, 500 error pages or similar, you should navigate to your WooCommerce > System Status to check your settings for the php_memory_limit, here is a link https://docs.woocommerce.com/document/increasing-the-wordpress-memory-limit/ and max_input_vars. If these are low and you do have a lot of options saving might fail, and much more too!

Q: I am using caching option for better performance and I just want to clear the cache, how to do that?

All product caches are cleared on plugin updates, activation and deactivation. Also when you save the IVPA settings the caches will be cleared. When saving products, caches for the saved product will be cleared too!

Q: My option for Enable/Disable AJAX Variation Add To Cart on single product pages does not work, what is the problem here?

If your theme messes with the default WooCommerce structure this setting might not work. Sometimes it does not work with other custom plugins too. Usually disabling this option does resolve all issues. AJAX will not be supported then in this case, but at least everythinig will work as expected.

Q: I want center aligned attributes selectors. How do I do this?

We have added an option for that! Do not use any CSS codes and just go to the IVPA settings and set the Attribute Alignment in Archives to Center, Right or Left according to your preference.

Q: Can a backorder notification be shown on IVPA selectors?

Yes, of course, go to the IVPA settings and check the Backorder Notification Support. When this option is checked, all products that have their Allow Backorders? setting set to Allow, but notifiy customer will show a small (!) icon that will alert the customers about it. If you set the Allow Backorders? to Allow or Do not allow for your variable product, then the (!) will not be shown.

Q: How to force plugin installation in themes?

When everything fails and you cannot install it in any way. Find your your-theme/woocommerce/content-product.php and your-theme/woocommerce/content-single-product.php and insert following codes in those files where you would like the IVPA plugin to appear. While you are there, check the files for their structure as you might find already existing actions that are appropriate.

<?php do_action( 'my_ivpa_single_product_action' ); /* goes in your-theme/woocommerce/content-single-product.php file */ ?>

<?php do_action( 'my_ivpa_archive_product_action' ); /* goes in your-theme/woocommerce/content-product.php file */ ?>

Then set these IVPA installation settings in WooCommerce > Settings > Improved Product Options

• SINGLE PRODUCT INIT ACTION: my_ivpa_single_product_action
• SHOP INIT ACTION: my_ivpa_archive_product_action

Q: Thumbnails in tooltips, is it possible?

From version 3.2+ you are able to add HTML/Code to tooltips and improve your selectors. Titles and descriptions support this too. So, to make a tooltip that uses a thumbnail instead of text use this simple HTML code.

<img src="https://your-site.com/your-image-path/image.jpg" />

Q: IVPA Image Switcher shows broken links on some products? What is up with that?

If you have issues with this option on some products, like broken links appearing it is because your images are not uniform. If IVPA Image Switcher option is used product featured image and product variation images must be same resolution. So, make all your variation images uniform and the option will work. For example, set a 700x1024px image for your featured image and then use the same resolution for your variable images. This way the plugin can find needed image sizes and make proper image replacements. Thanks!

4. Support

If something goes wrong check this section. Contact the support and we will help!

4.1 Plugin Support?

If everything else fails you can surely get support!

If you need help, navigate here → Support Pages (https://mihajlovicnenad.com/support/). With every purchase, 6 months of Premium Support is included. To login to Premium Support click the Connect with Envato button. If you need to discuss something with the community use the Community Forum. Using these channels you can open tickets or topics, report problems with plugins, bugs and track important inofrmation too. Be a part of this community and join today! Thanks!

4.2 Plugin Author and Contact?

Something about the author and contact link

Improved Product Options for WooCommerce for WordPress was developed by Mihajlovicnenad.com. For support related questions please visit our item page on codecanyon.com.

4.3 Older Announcements and Change Logs

If you have missed some of these, please check now as it might be useful!