WooCommerce Additional Variation Images

WooCommerce Additional Variation Images allows you to add additional gallery images per variation.

Demo ↑ Back to top

Live Demo

Installation ↑ Back to top

  1. Download the .zip file from your WooCommerce account.
  2. Go to: WordPress Admin > Plugins > Add New and Upload Plugin with the file you downloaded with Choose File.
  3. Install Now and Activate the extension.

More information at: Install and Activate Plugins/Extensions.

Setup and Configuration ↑ Back to top

  1. Go to: WooCommerce > Products.
  2. Select one of your Variable products.
  3. Select the Variations tab in the Product Details box.
  4. Find the Add Additional Images link and click. This link allows you to add any number of additional images for each variation.
Add multiple images to a variation.
Add multiple images to a variation.

Delete or order images ↑ Back to top

  • Delete an image by clicking on it.
  • Reorder images by clicking and dragging it to the desired location.
Be sure to have a default set of gallery images for your product or else it won’t work.

Troubleshooting ↑ Back to top

First check if it is a theme compatibility issue. Switch to a WordPress default theme such as the Twenty Twelve or Twenty Fifteen theme and re-test. It should be working. If not, try disabling all plugins except WooCommerce and Additional Variation Images and re-test.

Be sure to have a default set of gallery images for your product or else it won’t work.

Be sure you've set up a product image gallery, for this extension to work.
Be sure you’ve set up a product image gallery, for this extension to work.

Third-Party Theme Support ↑ Back to top

Note: This is a Developer level section. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer for assistance. We are unable to provide support for customizations under our  Support Policy.

Themes that follow the default WooCommerce lightbox implementation will usually work with this plugin.

However, some themes use an unorthodox method to add their own lightbox/slider, which breaks the hooks this plugin needs. Third-party theme authors can make this plugin work together by using the hooks and triggers available within the plugin.

In addition, this plugin has incorporated its own lightbox so you can always choose to use it and turn off any lightbox options that are coming from your theme. Please consult with your theme author on how to disable the lightbox.

While this plugin has incorporated as many hooks as possible for third-party themes to integrate and work together, sometimes it doesn’t work. For these cases, please contact Support and we’ll see if we can help.

Neighborhood Theme Support ↑ Back to top

To add support for this particular theme, set lightbox option to default. Then please add the following code into a child theme’s functions.php file. ( Tested with Neighborhood version 2.05 )

And then in your child theme’s functions.php add the following code:

Lastly create a file called wcavi-custom-script.js and put into your child theme’s root folder. And paste the following code into the file you just created.

Third-Party Plugins Support ↑ Back to top

Product CSV Import Suite ↑ Back to top

Using this plugin, you can bulk update/import/export your product variation images. If you’re interested in using this plugin, here is the link WooCommerce Product CSV Import Suite

The best way to do it is to create one product with variation images and then export it first so you have a map structure to work with.

To import additional variation images, you will need to add the column “meta:_wc_additional_variation_images”. For the value, enter a comma separated list of IDs of the images on your site. You can obtain these IDs when you bulk add the images to your site via the media library.

Hooks ↑ Back to top

Many hooks are available for you to manipulate the plugin to your requirements. While this section is mostly for developers, you can learn how to use hooks at: http://codex.wordpress.org/Plugin_API/Hooks

Below is a list of hooks and a short description of what they do.

  • apply_filters( ‘wc_additional_variation_images_get_first_image’, boolean ) – set whether to get the first image as some sliders will need this.
  • apply_filters( ‘wc_additional_variation_images_gallery_images_class’, string ) – set the class name of the container of your gallery thumbnails.
  • apply_filters( ‘wc_additional_variation_images_main_images_class’, string ) – set the class name of the anchor container of the main featured image.
  • apply_filters( ‘wc_additional_variation_images_custom_swap’, boolean ) – set if you want to use your own custom swap JS logic.
  • apply_filters( ‘wc_additional_variation_images_custom_original_swap’, boolean ) – set if you want to use your own custom original swap JS logic.
  • apply_filters( ‘wc_additional_variation_images_custom_reset_swap’, boolean ) – set if you want to use your own custom reset swap JS logic.
  • trigger( ‘wc_additional_variation_images_frontend_lightbox’ ) – JS event trigger right before the lightbox is fired.
  • trigger( ‘wc_additional_variation_images_frontend_on_reset’ ) – JS event trigger to apply custom reset logic.
  • trigger( ‘wc_additional_variation_images_frontend_image_swap_callback’ ) – JS event trigger to apply custom image swap logic.
  • trigger( ‘wc_additional_variation_images_frontend_ajax_default_image_swap_callback’ ) – JS event trigger to apply custom default image swap logic.
  • trigger( ‘wc_additional_variation_images_frontend_before_show_variation’ ) – JS event trigger that fires right before show variation starts.
  • trigger( ‘wc_additional_variation_images_frontend_ajax_response_callback’ ) – JS event trigger that fires right after image swap AJAX.

Languages ↑ Back to top

This plugin is fully translatable, and the POT is located within the plugin’s folder/languages. Place your translated MO file in

wp-content/languages/woocommerce-additional-variation-images/
folder.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top