Frequently Asked Questions

the logic of openswatch is when you click to colorswatch image, there are 1 call back to server to get html string , this is type of galery html and replace to your current product gallery.
So, to change this html format, please hook a filter to hook "openswatch_image_swatch_html"

this is sample:

function your_openswatch_image_swatch_html($images,$productId,$attachment_ids)
{
  //you can modify html string return here 
   // images is html string return by server
   // $attachment_ids is list of thumnails images with current colorswatch item
   // $productId is current product id 
    return $images;
}
add_filter('openswatch_image_swatch_html','your_openswatch_image_swatch_html',10,3);
	

after get html string from server , openswatch trigger a javascript callback, you can call it with those code :

$( document.body ).bind( 'openswatch_update_images',function(event,data){
    var data_html = data.html;
    var productId = data.productId;
    //your call back event
});

with this callback event, you can reload the javascript function to replace html data return by server to your image gallery and reload your gallery effect.
Normally, we are make default callback in /wp-content/plugins/openswatch/assets/js/openswatch_custom.js 
to change this , you only copy this file to /wp-content/themes/YOUR-THEME-DIR/openswatch/assets/js/openswatch.js
and you can change the javascript event by your self.