WooCommerce Additional Variation Images are not showing properly

I am using the WooCommerce Additional Variation Images by Woocommerce (https://woocommerce.com/products/woocommerce-additional-variation-images/) for adding addtional images for variable products. But the theme seems to break when I use this plugin. Instead of showing images in horizontal box, all the images are showing horizontally. I have added two screen shot. Please have a look.

Hi,

Please, provide us a link where we can take a look at the problem?

Thank you

This is the link

We see that the plugin replaces our theme images gallery with its own and that is why breaks our layout. You need to contact plugin’s developers in this situation. If there are some requirements for the theme to make it work, we will help you to implement them.

Kind Regards

Thank you

Contact us if you will have additional questions about this topic.

Hi, I mailed the support and they told me that they do not provide support for third-party themes. They also told me to disable the lightbox of the theme. How do I that?

Yes, we don’t ask them to fix the problem in our theme. But they should at least give us some requirements what should be done in the theme to make it work.
Theme gallery and lightbox scripts may be disabled in the file js/functions.js. Method name – productImages. You will need to disable JS minification in Theme Settings -> Performance to make changes in that file.

I have no previous experience with Javascript. So I do not know what types of changes should I do in the js/functions.js file.

Please have a look at this link https://docs.woocommerce.com/document/woocommerce-additional-variation-images/#section-9

Please, provide us your admin access and FTP so we can check it.

I can give you the ppk file to access my server via scp if you want.

Try to add the following PHP code snippet to the child theme functions.php file to do this

add_filter( 'woocommerce_single_product_flexslider_enabled', '__return_true' );

add_theme_support( 'wc-product-gallery-slider' );
add_theme_support( 'wc-product-gallery-lightbox' );

add_action( 'wp_enqueue_scripts', 'woodmart_enqueue_scripts', 10000 );

function woodmart_enqueue_scripts() {
	
	$version = woodmart_get_theme_info( 'Version' );
	
	/*
	 * Adds JavaScript to pages with the comment form to support
	 * sites with threaded comments (when in use).
	 */
	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply', false, array(), $version );
	
	wp_register_script( 'maplace', get_template_directory_uri() . '/js/maplace-0.1.3.min.js', array('jquery', 'google.map.api'), $version, true );
	
	if( ! woodmart_woocommerce_installed() )
		wp_register_script( 'jquery-cookie', get_template_directory_uri() . '/js/jquery.cookie.js', array('jquery'), $version, true );

	wp_enqueue_script( 'woodmart_html5shiv', get_template_directory_uri() . '/js/html5.js', array(), $version );
	
	wp_script_add_data( 'woodmart_html5shiv', 'conditional', 'lt IE 9' );

	// wp_dequeue_script( 'flexslider' );
	// wp_dequeue_script( 'photoswipe-ui-default' );
	// wp_dequeue_script( 'prettyPhoto-init' );
	// wp_dequeue_style( 'photoswipe-default-skin' );

	wp_enqueue_script( 'fastclick', get_template_directory_uri() . '/js/fastclick.js', array( 'jquery' ), $version, true );

	if( woodmart_get_opt( 'image_action' ) != 'zoom' ) {
		wp_dequeue_script( 'zoom' );
	}

	wp_enqueue_script( 'isotope', get_template_directory_uri() . '/js/isotope.pkgd.min.js', array( 'jquery' ), $version, true );
	wp_enqueue_script( 'waypoints', false, array(), $version );
	wp_enqueue_script( 'wpb_composer_front_js', false, array(), $version );

	$suffix = (woodmart_get_opt( 'minified_js' )) ? '.min' : '';

	wp_enqueue_script( 'imagesloaded', false, array(), $version );
	wp_enqueue_script( 'woodmart-device', get_template_directory_uri() . '/js/device' . $suffix . '.js', array(), $version );

	if( woodmart_get_opt( 'combined_js' ) ) {
		wp_enqueue_script( 'woodmart-theme', get_template_directory_uri() . '/js/theme.min.js', array( 'jquery', 'jquery-cookie' ), $version, true );
	} else {
		wp_enqueue_script( 'woodmart-magnific-popup', get_template_directory_uri() . '/js/jquery.magnific-popup.min.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-owl-carousel', get_template_directory_uri() . '/js/owl.carousel.min.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-photoswipe', get_template_directory_uri() . '/js/photoswipe.min.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-photoswipe-ui', get_template_directory_uri() . '/js/photoswipe-ui-default.min.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-slick', get_template_directory_uri() . '/js/slick.min.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-justifiedGallery', get_template_directory_uri() . '/js/jquery.justifiedGallery.min.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-pjax', get_template_directory_uri() . '/js/jquery.pjax.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-countdown', get_template_directory_uri() . '/js/jquery.countdown.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-packery-mode', get_template_directory_uri() . '/js/packery-mode.pkgd.min.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-autocomplete', get_template_directory_uri() . '/js/jquery.autocomplete.min.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-threesixty', get_template_directory_uri() . '/js/threesixty.min.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-TweenMax', get_template_directory_uri() . '/js/TweenMax.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-nanoscroller', get_template_directory_uri() . '/js/jquery.nanoscroller.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-panr', get_template_directory_uri() . '/js/jquery.panr.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-parallax', get_template_directory_uri() . '/js/jquery.parallax.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-vivus', get_template_directory_uri() . '/js/vivus.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-fastclick', get_template_directory_uri() . '/js/fastclick.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-moment', get_template_directory_uri() . '/js/moment.min.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-moment-timezone', get_template_directory_uri() . '/js/moment-timezone-with-data.min.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-tooltips', get_template_directory_uri() . '/js/jquery.tooltips.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-sticky-kit', get_template_directory_uri() . '/js/jquery.sticky-kit.js', array( 'jquery', 'jquery-cookie' ), $version, true );
		wp_enqueue_script( 'woodmart-theme', get_template_directory_uri() . '/js/functions' . $suffix . '.js', array( 'jquery', 'jquery-cookie' ), $version, true );
	}
	wp_add_inline_script( 'woodmart-theme', woodmart_settings_js(), 'after' );

	// Add virations form scripts through the site to make it work on quick view
	if( woodmart_get_opt( 'quick_view_variable' ) || woodmart_get_opt( 'quick_shop_variable' ) ) {
		wp_enqueue_script( 'wc-add-to-cart-variation', false, array(), $version );
	}

	$translations = array(
		'adding_to_cart' => esc_html__('Processing', 'woodmart'),
		'added_to_cart' => esc_html__('Product was successfully added to your cart.', 'woodmart'),
		'continue_shopping' => esc_html__('Continue shopping', 'woodmart'),
		'view_cart' => esc_html__('View Cart', 'woodmart'),
		'go_to_checkout' => esc_html__('Checkout', 'woodmart'),
		'loading' => esc_html__('Loading...', 'woodmart'),
		'countdown_days' => esc_html__('days', 'woodmart'),
		'countdown_hours' => esc_html__('hr', 'woodmart'),
		'countdown_mins' => esc_html__('min', 'woodmart'),
		'countdown_sec' => esc_html__('sc', 'woodmart'),
		'wishlist' => ( class_exists( 'YITH_WCWL' ) ) ? 'yes' : 'no',
		'cart_url' => ( woodmart_woocommerce_installed() ) ?  esc_url( wc_get_cart_url() ) : '',
		'ajaxurl' => admin_url('admin-ajax.php'),
		'add_to_cart_action' => ( woodmart_get_opt( 'add_to_cart_action' ) ) ? esc_js( woodmart_get_opt( 'add_to_cart_action' ) ) : 'widget',
		'added_popup' => ( woodmart_get_opt( 'added_to_cart_popup' ) ) ? 'yes' : 'no',
		'categories_toggle' => ( woodmart_get_opt( 'categories_toggle' ) ) ? 'yes' : 'no',
		'enable_popup' => ( woodmart_get_opt( 'promo_popup' ) ) ? 'yes' : 'no',
		'popup_delay' => ( woodmart_get_opt( 'promo_timeout' ) ) ? (int) woodmart_get_opt( 'promo_timeout' ) : 1000,
		'popup_event' => woodmart_get_opt( 'popup_event' ),
		'popup_scroll' => ( woodmart_get_opt( 'popup_scroll' ) ) ? (int) woodmart_get_opt( 'popup_scroll' ) : 1000,
		'popup_pages' => ( woodmart_get_opt( 'popup_pages' ) ) ? (int) woodmart_get_opt( 'popup_pages' ) : 0,
		'promo_popup_hide_mobile' => ( woodmart_get_opt( 'promo_popup_hide_mobile' ) ) ? 'yes' : 'no',
		'product_images_captions' => ( woodmart_get_opt( 'product_images_captions' ) ) ? 'yes' : 'no',
		'ajax_add_to_cart' => ( apply_filters( 'woodmart_ajax_add_to_cart', true ) ) ? woodmart_get_opt( 'single_ajax_add_to_cart' ) : false,
		'all_results' => esc_html__('View all results', 'woodmart'),
		'product_gallery' => woodmart_get_product_gallery_settings(),
		'zoom_enable' => ( woodmart_get_opt( 'image_action' ) == 'zoom') ? 'yes' : 'no',
		'ajax_scroll' => ( woodmart_get_opt( 'ajax_scroll' ) ) ? 'yes' : 'no',
		'ajax_scroll_class' => apply_filters( 'woodmart_ajax_scroll_class' , '.main-page-wrapper' ),
		'ajax_scroll_offset' => apply_filters( 'woodmart_ajax_scroll_offset' , 100 ),
		'infinit_scroll_offset' => apply_filters( 'woodmart_infinit_scroll_offset' , 300 ),
		'product_slider_auto_height' => ( woodmart_get_opt( 'product_slider_auto_height' ) ) ? 'yes' : 'no',
		'price_filter_action' => ( apply_filters( 'price_filter_action' , 'click' ) == 'submit' ) ? 'submit' : 'click',
		'product_slider_autoplay' => apply_filters( 'woodmart_product_slider_autoplay' , false ),
		'loading' => esc_html__( 'Loading...', 'woodmart' ),
		'close' => esc_html__( 'Close (Esc)', 'woodmart' ),
		'share_fb' => esc_html__( 'Share on Facebook', 'woodmart' ),
		'pin_it' => esc_html__( 'Pin it', 'woodmart' ),
		'tweet' => esc_html__( 'Tweet', 'woodmart' ),
		'download_image' => esc_html__( 'Download image', 'woodmart' ),
		'cookies_version' => ( woodmart_get_opt( 'cookies_version' ) ) ? (int)woodmart_get_opt( 'cookies_version' ) : 1,
		'header_banner_version' => ( woodmart_get_opt( 'header_banner_version' ) ) ? (int)woodmart_get_opt( 'header_banner_version' ) : 1,
		'header_banner_close_btn' => woodmart_get_opt( 'header_close_btn' ),
		'header_banner_enabled' => woodmart_get_opt( 'header_banner' ),
		'pjax_timeout' => apply_filters( 'woodmart_pjax_timeout' , 5000 ),
	);

	wp_localize_script( 'woodmart-functions', 'woodmart_settings', $translations );
	wp_localize_script( 'woodmart-theme', 'woodmart_settings', $translations );
	
	if( ( is_home() || is_singular( 'post' ) || is_archive() ) && woodmart_get_opt('blog_design') == 'masonry' ) {
		// Load masonry script JS for blog
		wp_enqueue_script( 'masonry', false, array(), $version );
	}

}

And this part to the custom CSS

.woocommerce-product-gallery {
  position: relative;
  margin-bottom: 3em;
}
.woocommerce-product-gallery figure {
  margin: 0;
  padding: 0;
}
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  margin: 0;
  padding: 0;
}
.woocommerce-product-gallery .zoomImg {
  background-color: #fff;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
  width: 25%;
  display: inline-block;
}
.woocommerce-product-gallery .flex-control-thumbs li {
  list-style: none;
  float: left;
  cursor: pointer;
}
.woocommerce-product-gallery .flex-control-thumbs img {
  opacity: .5;
}
.woocommerce-product-gallery .flex-control-thumbs img:hover, .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
  opacity: 1;
}
.woocommerce-product-gallery img {
  display: block;
}

.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
  width: 33.3333%;
}
.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n+1) {
  clear: left;
}

.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
  width: 25%;
}
.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
  clear: left;
}

.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
  width: 20%;
}
.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1) {
  clear: left;
}

.woocommerce-product-gallery__trigger {
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 99;
}

Hi, Thank you so much for the code. It works! 😀

My shop now looks like this – https://gyazo.com/658885eb9c858d716d60d8853a54c576
The thumbnails are now showing in two row. Is it possible to show them in one row?

Also, there is a small magnifying glass icon on the top right of the image. https://gyazo.com/bd0d65b876fa2f869017bc661a141171

This icon is visible not only on the variational product but also on images of all the simple product.

Sorry, but it is how the plugin works. We just disabled our them lightbox as they recommended.

Thank you so much again for the support you just provided.

Is it possible to show the product label on the left side of the image? https://gyazo.com/1f9009a66e7da3345a9c67c1993d6a25

Hi you.

How to display price savings like you
http://prntscr.com/i4472f

I can only do this.
http://prntscr.com/i447sh

Hi,

As we can see you have already moved your labels to the left side of the images. https://gyazo.com/eeb881fbf9c66b4cfb5c15fcb8437733

Regards

Yeah, I did that. Thank you

Great, you are welcome!

Hi penguined.

Help me.

Hello @penguined,

Are you able to write here the name of the plugin that you use to show your product prices?

Regards

oh. thanks you, Artem Temos

Always glad to help you.

Hi. thanks
I can not do it like him.
I do not get this help.
Currently I’m using a script in (functions)

http://prntscr.com/i4ukbk

Sorry, but we can’t help you since there is no such ability in our theme.

Regards

[Author]

Posts