Set/Update product gallery data
VARGAL stores variation gallery data as an array of attachment IDs under the product meta key vargal_params.
Example:
$product = wc_get_product( $product_id );
$product->update_meta_data('vargal_params', [123, 125]);
$product->save();
Enqueue VARGAL JS on Custom Pages
VARGAL enqueues its frontend scripts automatically on single product pages. If you’re showing product with galleries on custom pages (like quick views, shop loops, etc.) using a plugin/theme that is not on our list of compatible plugins, you must explicitly declare VARGAL’s js for compatibility
Use this filter: vargal-frontend-enqueue
Example:
add_filter('vargal-frontend-enqueue',function ($result){
// filter...
//if (is_shop()){$result = true; }
return $result;
},10, 1);
Customize gallery item properties
Use the filter vargal_get_attachment_props
Example:
add_filter('vargal_get_attachment_props',function ($props,$attachment_id){
// filter...
return $props;
},10, 2);
Customize HTML output of Gallery items
- Use this filter: woocommerce_single_product_image_thumbnail_html’
Example:add_filter('woocommerce_single_product_image_thumbnail_html',function ($html, $attachment_id){ // filter... return $html; },10, 2); - To display custom attributes in the HTML tags of the gallery, use this filter
vargal_filter_allowed_html
Example:add_filter('vargal_filter_allowed_html',function ($tags){ foreach ( $tags as $key => $value ) { if ( in_array( $key, array( 'img', 'video' ) ) ) { $tags[ $key ] = wp_parse_args( [ 'fetchpriority' => 1, 'loading' => 1, ],$value); } } return $tags; });
Access variation gallery data during variation selection
If you have a custom variation display tool (e.g. with custom swatches or quick view), you can use the vargal value to retrieve the variation gallery each time swatches are changed.
Example:
$(document).on('show_variation', '#your_id.variations_form', function (e, variation, purchasable) {
let gallery = [];
if (variation?.image && variation?.image_id) {
gallery = [variation.image];
}
if (variation?.vargal) {
gallery = gallery.concat(variation.vargal);
}
// handle your own custom design display or use event 'vargal-gallery-changing' to show selected variation's gallery
// $(document).trigger('vargal-gallery-changing', [$(this).data('product_id'), gallery, variation]);
});