product thumbnails vertical besides mail product image

[aurellle]

Hi,

1- I would like to move the thumbnails to the left side of the image product in Gecko theme. I tried a solution that you provided in this forum but it didn’t work correctly. Please find SS attached, the thumbnails are really small and not vertical.

2- The search function on Gecko theme works well, however is working with a full screen black background. I found another solution in this forum but doesn’t look perfect on the main menu. Please find SS attached, the field search is too small.

Regards

 

Attachments:

You must be logged in to view attached files.

[Harry]

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

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Harry]

Hi Aurelle,

Please download new attach file.

Kind regards

Attachments:

You must be logged in to view attached files.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[aurellle]

Hi,

Thanks for your quick reply.

1 – I uploaded the Gecko Child file that you provided. However, there is a problem with duplication thumbnails. Please see screenshot attached.

The main reason I want to use vertical thumbnails is to minimise scrolling up and down in mobile view when viewing a product. I can see this option doesn’t work for mobile phone.

I tried this CSS code:

@media only screen and (max-width: 736px) {
.single-product-thumbnail .p-nav {
max-width: 100%;
position: absolute;
top: 10px;
}
.single-product-thumbnail .p-thumb {
margin-left: 0;
}
}

The thumbnails are on the left side of the product image but are shown on HORIZONTAL. (phone version)

 

***After uploading the Child theme, in my WordPress dashboard is showing a pop up saying that the Child theme version is obsolote and suggests to update my theme.

*************************

2 – Regarding the search option you provided, I prefer to keep the original version and just modify CSS.

I added the following CSS code but it shows to the left side of the screen instead of the right side as I would like. Please see SS attached.

.header__search {
height: 100%;
width: 45%;
top: 0;
right: 0;
background: rgba(0, 0, 0, .8);
}

*********************************

3 – After uploading Child theme, The product page doesn’t show the “RELATED PRODUCTS” on the bottom, only shows the “suggested products”

**************************

4 – In addition, which CSS code can I add to show “related products and suggested products” in 2 columns on PHONE ? Now it shows 1 product and is to big. I would like 2 columns like Product list page.

********************

5 – I realized that variable product page works perfect but the PRODUCT SIMPLE page doesn’t work correctly. Please see SS attached.

************************

6 – Please can you confirm if I can update WordPress to 5.6.1 version and Woocommerce to 5.0.0 version without having issues with your theme or WooCommerce Variation Swatch plugin?

Please note my page is still under construction, If you need to check one of the poducts I suggest to you the following one:

For Product variable: https://papalyne.fr/product/bavoir-bandana/
For Product simple: https://papalyne.fr/product/les-lingettes/
Thank you so much for you help

 

Regards

Attachments:

You must be logged in to view attached files.

[Harry]

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, 9 months ago by Harry.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[aurellle]

Hi,

Thank you so much, everything works perfect.

The only problem is the vertical thumbnails. I deleted the css code as you said but now when I select a different variation for the product, the thumbnails go back to horizontal to the left side of the image.

 

From phone screen the thumbnails are still below the image product and in horizontal. Please can you check that?

Thanks again.

Regards

 

 

 

[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

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[aurellle]

Hi,

I updated the child theme as you said replacing false to true. However, the product image is duplicated now and the thumbnails has been disapeared on the mobile phone.

The issue with variant product still persists. At the beginning it works on PC, but when I select a variant the thumbnails are back to horizontal. Pleasee see SS attached.

Thanks

Attachments:

You must be logged in to view attached files.

[Harry]

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

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts