WooCommerce Additional Variation Images are not showing properly

Hi,

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

Thank you

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

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

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.

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

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;
}

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

Hi you.

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

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

Hi penguined.

Help me.

oh. thanks you, Artem Temos

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