Support Forum

Hi Aurelle,

Could you send me the link of solution you found on our forum?

I will check and help you apply for your site.

Kind regards

Hi Aurelle,

Please download new attach file.

Kind regards

Hi,

1. Please remove your code in Theme Option > General Settings > Custom CSS use the code in gecko-child > style.css do not use code for both Custom CSS and style.css

2. Please change code to

.header__search {
height: 100%;
width: 45%;
left: auto;
right: 0;
}

3. I remove redundant code in gecko-child > functions.php and it now work ok

4. Please copy file related.php and up-sells.php in gecko > core > libraries > vendors > woocommerce > templates > single-product to gecko-child > woocommerce > single-product and change code https://prnt.sc/zlm6kq https://prnt.sc/zlmha1

“slidesToShow”: 2

5. Please add custom CSS code

.btn-atc .cart:not(.variations_form) {display: inherit}

6. Our theme work well with WP 5.6.1 and WC5.0

Kind regards

• This reply was modified 3 years, 10 months ago by Harry.

Yes, i change to show thumbnail on bottom on mobile to easy for user can swipe the thumbnail. If you want keep vertical, please go to gecko-child > woocommerce > single-product > product-thumbnails.php and change to true https://prnt.sc/zlwo1l

Kind regards

Hi,

Please add more code to gecko-child > functions.php

add_action( 'wp_head', 'remove_my_action' );
function remove_my_action(){
	remove_action( 'wp_footer', 'jas_gecko_wcvs_modify_images', 1000 );
}

if ( class_exists( 'WPA_WCVS' ) && class_exists( 'WooCommerce' ) && ! class_exists( 'ColorSwatch' ) ) {
	/**
	 * Change the HTML when click to color swatch.
	 *
	 * @since 1.0.0
	 */
	function jas_gecko_child_wcvs_modify_images() {
		global $post, $product;

		if ( ! is_woocommerce() && isset( $post->post_content ) && ! ( has_shortcode( $post->post_content, 'claue_addons_product' )
			|| has_shortcode( $post->post_content, 'claue_addons_products' )
			|| has_shortcode( $post->post_content, 'product_page' ) ) ) return;

		// Get image zoom
		$zoom = '';
		if ( cs_get_option( 'wc-single-zoom' ) ) {
			$zoom = ' jas-image-zoom';
		}
		?>
			<script>
				(function( $ ) {
					"use strict";
					
					$( document.body ).off( 'wpa_wcvs_update_html' ).bind( 'wpa_wcvs_update_html', function( event, data ) {
						var productId     = data.pid,
							galleries     = $( '.variations_form' ).data( 'galleries' ),
							formData      = $( '.variations_form' ).data( 'product_variations' ),
							galleryKey    = '',
							selectedAttr  = {},
							usedImages    = [],
							output_gal    = [],
							output_thumb  = [],
							images;

						// Get selected size and color
						$( '#product-' + productId + ' .swatch select' ).each(function () {
							if ( $( this ).parent().parent().hasClass( 'is-color' ) ) {
								galleryKey = '_product_image_gallery_' + $( this ).data( 'attribute_name' ).replace( 'attribute_', '' ) + '-' + $( this ).val();
							}
							selectedAttr[$( this ).data( 'attribute_name' ).replace( 'attribute_', '' )] = $( this ).val();
						});

						if ( typeof( galleries[galleryKey] ) !== 'undefined' && galleries[galleryKey] !== null ) {
							images = galleries[galleryKey];
						} else {
							images = galleries['default_gallery'];
						}

						// Get variation image
						$.each( formData, function ( index, variation ) {
							if ( Object.keys( variation['attributes']).length === Object.keys( selectedAttr ).length ) {
								// Flag to check right or wrong variation
								var chooseThisVariation = true;

								$.each( selectedAttr, function ( attrName, attrValue ) {
									if ( variation['attributes']['attribute_' + attrName + ''] !== '' && variation['attributes']['attribute_' + attrName + ''] !== attrValue) {
										chooseThisVariation = false;
									}
								});

								if ( chooseThisVariation ) {
									var image = variation['image'];

									if ( $.inArray( image['thumb_src'], usedImages ) === -1 ) {
										output_gal += '<div class="p-item woocommerce-product-gallery__image<?php echo $zoom; ?>">';
										output_gal += '<a href="' + image['full_src'] + '">';
										output_gal += '<img width="' + image['src_w'] + '" height="' + image['src_h'] + '" src="' + image['src'] + '" class="attachment-shop_single size-shop_single" alt="" title="" data-src="' + image['full_src'] + '" data-large_image="' + image['full_src'] + '" data-large_image_width="' + image['full_src_w'] + '" data-large_image_height="' + image['full_src_h'] + '" />';
										output_gal += '</a></div>';

										output_thumb += '<div>';
										output_thumb += '<img src="' + image['thumb_src'] + '" />';
										output_thumb += '</div>';

										usedImages.push( image['thumb_src'] );
										return true;
									}
								}
							}
						});

						// Get image gallery
						$.each( images, function ( index, image ) {
							if ( image['single'] == undefined ) {
								var img_single = image['thumbnail'];
							} else {
								var img_single = image['single']; 
							}

							if ( $.inArray( img_single, usedImages ) === -1 ) {
								output_gal += '<div class="p-item woocommerce-product-gallery__image<?php echo $zoom; ?>">';
								output_gal += '<a href="' + image['data-large_image'] + '">';
								output_gal += '<img width="' + image['data-large_image_width'] + '" height="' + image['data-large_image_height'] + '" src="' + img_single + '" class="attachment-shop_single size-shop_single" alt="" title="" data-src="' + image['data-src'] + '" data-large_image="' + image['data-large_image'] + '" data-large_image_width="' + image['data-large_image_width'] + '" data-large_image_height="' + image['data-large_image_height'] + '"/>';
								output_gal += '</a></div>';

								output_thumb += '<div>';
								output_thumb += '<img src="' + image['thumbnail'] + '" />';
								output_thumb += '</div>';

								usedImages.push( img_single );
							}
						});

						if ( $( '.jas-wc-single' ).is( '.wc-single-1, .wc-single-3' ) || window._inQuickview ) {
							var data_slick = '{"slidesToShow": 1,"slidesToScroll": 1,"asNavFor": ".p-nav","fade":true,"adaptiveHeight":true}';
						} else if ( $( '.jas-wc-single' ).is( '.wc-single-2' ) ) {
							var data_slick = '{"slidesToShow": 3,"slidesToScroll": 1,"centerMode":true, "responsive":[{"breakpoint": 960,"settings":{"slidesToShow": 2, "centerMode":false}},{"breakpoint": 480,"settings":{"slidesToShow": 1, "centerMode":false}}]}';
						}

						var output = '<div class="p-thumb images jas-carousel" data-slick=\'' + data_slick + '\'>' + output_gal + '</div>';

						if ( $( '.jas-wc-single' ).hasClass( 'wc-single-1' ) ) {
							output += '<div class="p-nav oh jas-carousel" data-slick=\'{"slidesToShow": 4,"slidesToScroll": 1,"asNavFor": ".p-thumb","arrows": false, "focusOnSelect": true, "vertical": true, "responsive":[{"breakpoint": 736,"settings":{"slidesToShow": 4, "vertical":true}}]}\'>' + output_thumb + '</div>';
						}

						$( '#product-' + productId + ' .single-product-thumbnail' ).html( output );

						setTimeout(function() {
							$( '.jas-carousel' ).not( '.slick-initialized' ).slick();

							if ( $( '.jas-image-zoom' ).length > 0 ) {
								$( '.jas-image-zoom' ).zoom({
									touch: false,
								});
							}

							// Reset the index of image on product variation
							$( 'body' ).on( 'found_variation', '.variations_form', function( ev, variation ) {
								if ( variation && variation.image && variation.image.src && variation.image.src.length > 1 ) {
									$( '.jas-carousel' ).slick( 'slickGoTo', 0 );
								}
							});
						}, 10);

						// Trigger gallery
						if ( $( '.woocommerce-product-gallery' ).length > 0 && ! window._inQuickview ) {
							$( '.woocommerce-product-gallery' ).each( function () {
								$( this ).wc_product_gallery();
							});
							$( 'body' ).on( 'click', '.pswp__container, .pswp__button--close', function() {
								$( '.pswp' ).removeAttr( 'class' ).addClass( 'pswp' );
							});
						}
					});
				})( jQuery );
			</script>
		<?php
	}
	add_action( 'wp_footer', 'jas_gecko_child_wcvs_modify_images', 1000 );
}

Kind regards