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: Managing WooCommerce.com subscriptions.

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. If it does not work still, try disabling all plugins except WooCommerce and Additional Variation Images and test again.

Read more about theme and plugin conflicts in our Self-Service Guide here.

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.

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 ) – Used to determine whether the first variation image should be used.
  • apply_filters( ‘wc_additional_variation_images_gallery_images_class’, string ) – Used to add additional classnames to the HTML container tag that wraps all of the variation images
  • apply_filters( ‘wc_additional_variation_images_main_images_class’, string )Used to add additional classnames to the HTML container tag that wraps the main image of the current active variation.
  • apply_filters( ‘wc_additional_variation_images_custom_swap’, boolean )
  • apply_filters( ‘wc_additional_variation_images_custom_original_swap’, boolean )
  • apply_filters( ‘wc_additional_variation_images_custom_reset_swap’, boolean )  Used in case you want to use custom Javascript-powered logic to change the default image changing behaviour.

Javascript Triggers

  • trigger( ‘wc_additional_variation_images_frontend_image_swap_callback’ )
  • trigger( ‘wc_additional_variation_images_frontend_ajax_default_image_swap_callback’ ) – Callback functions to run before a variation image swap has already taken place.
  • trigger( ‘wc_additional_variation_images_frontend_before_show_variation’ ) – A callback function to run when a variation change is triggered.
  • trigger( ‘wc_additional_variation_images_frontend_ajax_response_callback’ ) – A callback function to run after a variation image swap has already taken place.
  • trigger( ‘wc_additional_variation_images_frontend_init’) – A callback function to run as soon as the plugin Javascript has been initialised.

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/plugins/woocommerce-additional-variation-images/languages
folder.

Questions and Feedback ↑ Back to top

Have a question before you buy? Please fill out this pre-sales form.

Already purchased and need some assistance? Get in touch with a Happiness Engineer via the Help Desk.

Have a suggestion regarding a feature you’d like to see included in this product? Add it to our Ideas Board.

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

Back to the top