Home Forums Themes Support Gecko Help!

Viewing 16 reply threads
  • Author
    Posts
    • #27887

      Hi, I have inquired you previously in the comment section about the following:

      2. Also, is it possible to make the product details layout in the product pages ( http://i64.tinypic.com/3025thy.png ) to be exactly the same as the layout in the ‘Quickview’ ( http://i66.tinypic.com/33yi0pw.png )? I prefer the multiple product images to be displayed with dots as shown in the ‘Quickview’ instead of with the images itself as shown in the current product pages. How can I achieve this?

      I have tried out your solution and it has been working well!

      However, now that I realised after adding variations to products, the variation product image gallery became appeared with images style instead of slick dots style.

      May I ask is it possible to also change the variation product image gallery to be displayed with slick dots, similar to the layout shown in the ‘Quickview’ function?

      Thank you!

    • #27888

      Hi,

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

      add_action( 'wp_head', 'remove_gallery_thumbnail' );
      function remove_gallery_thumbnail(){
      	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;
      		// 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];
      							// 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 );
          							}
          						});
      						} 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;
          									}
          								}
          							}
          						});
      						}
      
      						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, "dots": true ,"adaptiveHeight":true<?php echo ( is_rtl() ? ',"rtl":true' : '' ); ?>}';
      						} else if ( $( '.jas-wc-single' ).is( '.wc-single-2' ) ) {
      							var data_slick = '{"slidesToShow": 3,"slidesToScroll": 1,"centerMode":true<?php echo ( is_rtl() ? ',"rtl":true' : '' ); ?>, "responsive":[{"breakpoint": 960,"settings":{"slidesToShow": 2, "centerMode":false<?php echo ( is_rtl() ? ',"rtl":true' : '' ); ?>}},{"breakpoint": 480,"settings":{"slidesToShow": 1, "centerMode":false<?php echo ( is_rtl() ? ',"rtl":true' : '' ); ?>}}]}';
      						}
      
      						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<?php echo ( is_rtl() ? ',"rtl":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' );
      							});
      						}
      
      						<?php if ( isset( $options ) && ! empty( $options['wc-single-video-upload'] ) || ! empty( $options['wc-single-video-url'] ) ) : ?>
      							output += '<div class="p-video pa">';
      								<?php if ( $options['wc-single-video'] == 'url' ) { ?>
      									output += '<a href="<?php echo esc_url( $options['wc-single-video-url'] ); ?>" class="br__50 tc db bghp jas-popup-url"><i class="pe-7s-play pr"></i></a>';
      								<?php } else { ?>
      									output += '<a href="#jas-vsh" class="br__50 tc db bghp jas-popup-mp4"><i class="pe-7s-play pr"></i></a>';
      									output += '<div id="jas-vsh" class="mfp-hide"><?php do_shortcode( '"' ) . '" width="640" height="320"]' ); ?></div>';
      								<?php } ?>
      							output +=  '</div>';
      						<?php endif; ?>
      					});
      				})( 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

    • #27889

      Hi, thank you so much!

      However, I can’t test if the above code works well as I just realised my variation product image gallery is not showing up! Oh no! When I pick on a certain variation, the variation product image showed up but not the variation product image gallery!

      Do you know what is the issue here?

       

      • #27890

        Oh ! I figured it out ! The variation product image gallery will only show up when I pick all of the variation options!

        By the way, the code above works well!

        Thank you so much! 🙂

    • #27892

      Hi, but I have been experiencing some minor problems here and there with the product variations.

      As I only need the variations option function for customers to select and not necessary need the variation product image and variation product image gallery functions, is it possible to have the product image and product image gallery (before choosing variations options as shown here: https://ibb.co/TPTTmyN ) remains unchanged throughout even after any variations options are selected?

      Best regards.

       

      • #27896

        QUOTE: #27892 –> Hi, I have solved it myself! Thank you!

        You may want to put your attention on QUOTE: #27893 instead. Thank you!

        Kind regards.

    • #27893

      In addition, can I ask, if the video play button shown here ( https://ibb.co/TPTTmyN ) can be changed to the View Video button shown here ( https://ibb.co/Lgk2Rm6 ) ?

      Kind regards.

    • #27897

      Hi,

      Please change code to

      add_action( 'wp_head', 'remove_gallery_thumbnail' );
      function remove_gallery_thumbnail(){
      	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;
      		// 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];
      							// 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 );
          							}
          						});
      						} 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;
          									}
          								}
          							}
          						});
      						}
      
      						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, "dots": true ,"adaptiveHeight":true<?php echo ( is_rtl() ? ',"rtl":true' : '' ); ?>}';
      						} else if ( $( '.jas-wc-single' ).is( '.wc-single-2' ) ) {
      							var data_slick = '{"slidesToShow": 3,"slidesToScroll": 1,"centerMode":true<?php echo ( is_rtl() ? ',"rtl":true' : '' ); ?>, "responsive":[{"breakpoint": 960,"settings":{"slidesToShow": 2, "centerMode":false<?php echo ( is_rtl() ? ',"rtl":true' : '' ); ?>}},{"breakpoint": 480,"settings":{"slidesToShow": 1, "centerMode":false<?php echo ( is_rtl() ? ',"rtl":true' : '' ); ?>}}]}';
      						}
      
      						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<?php //echo ( is_rtl() ? ',"rtl":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' );
      							});
      						}
      
      						<?php if ( isset( $options ) && ! empty( $options['wc-single-video-upload'] ) || ! empty( $options['wc-single-video-url'] ) ) : ?>
      							output += '<div class="p-video pa">';
      								<?php if ( $options['wc-single-video'] == 'url' ) { ?>
      									output += '<a href="<?php echo esc_url( $options['wc-single-video-url'] ); ?>" class="br__50 tc db bghp jas-popup-url"><i class="pe-7s-play pr"></i></a>';
      								<?php } else { ?>
      									output += '<a href="#jas-vsh" class="br__50 tc db bghp jas-popup-mp4"><i class="pe-7s-play pr"></i></a>';
      									output += '<div id="jas-vsh" class="mfp-hide"><?php do_shortcode( '"' ) . '" width="640" height="320"]' ); ?></div>';
      								<?php } ?>
      							output +=  '</div>';
      						<?php endif; ?>
      					});
      				})( jQuery );
      			</script>
      		<?php
      	}
      	add_action( 'wp_footer', 'jas_gecko_child_wcvs_modify_images', 1000 );
      }

      and add more code in JanStudio > Theme Option > General Layout > Custom CSS

      .p-video a {
      	width: 180px;
      	padding: 0 20px;
      	height: 56px;
      	line-height: 56px;
      	text-align: left;
      	border-radius: 30px;
      	font-size: 35px;
      }
      .p-video a::after {
      	position: absolute;
      	content: "View video";
      	font-size: 18px;
      	top: 0;
      	right: 20px;
      	white-space: nowrap;
      }

      Regards

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

    • #27925

      Hi, thank you!

       

    • #27926

      Hi,

      I check your site, it now still work with boxed layout. Did you fix this?

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

      • #27931

        Hi! Yes, it has been working well! I realised actually I zoomed the website display at my browser by accident, so I was unable to view the boxed layout. But I have reset my broswer display and everything now is fine! Thank you so much for the help still! 🙂

    • #27935

      You’re welcome.

      Have a great day!

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

    • #27977
      This reply has been marked as private.
    • #27978

      Hi,

      please add below code to Janstudio > Theme Option > General Layout > Custom CSS

      .btn-atc .wccpf-fields-container + .cart:not(.variations_form) {display: inline-block;}

      Kind regards

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

      • #27979

        It works well!!!

        Thank you so much!!!

        Best regards.

    • #27994

      Hi, I need help on this but I am not sure if it is within your support!

      With reference to this image here ( https://ibb.co/j8JpGqj ), is it possible to add a new custom stock status called ‘Pre-Order’ and have it displayed on the product page as well?

      Unlike the ‘out of stock’ status, there is no add to cart button for customers to place order. However, I would need the new custom stock status ‘Pre-Order’ to allow customers to still able to add to cart (it would be best if the add to cart button text will become ‘Pre-Order Now!’ when status is set at ‘Pre-Order’ status), place order and checkout. It will be similar to the ‘In stock’ status.

      I have tried googling and found some php function codes to add new custom stock status. Though some coding works, the status displayed on the product page is not at the position I wanted as shown in the image above. Instead, they are mostly positioned after the product short description on the product page.

      Hence, I would like to ask if you are able to help me with this.

      Thank you and kind regards.

      Happy New Year!

    • #27995

      Hi,

      By default WooCommerce doesn’t support Pre-Order feature. You need a plugin to do this https://woocommerce.com/products/woocommerce-pre-orders/ or https://yithemes.com/themes/plugins/yith-woocommerce-pre-order/

      Kind regards

      Happy New Year to you and your family!

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

    • #27997

      Hi,

      I see! Thank you so much for the fast response!

      Happy new year!

      Best regards.

    • #27998
      This reply has been marked as private.
    • #28003

      Hi,

      Please add below code to JanStudio > Theme Option > General Layout > Custom CSS

      .woocommerce form .form-row-first#billing_first_name_field {
      	width: 100%;
      	float: none;
      }
      
      .woocommerce form #billing_country_field {
      	width: 100%;
      }
      .woocommerce-billing-fields {margin-bottom: 1.3em;}

      Kind regards

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

      • #28243
        This reply has been marked as private.
    • #28249

      Hi,

      Please add below code to JanStudio > Theme Option > General Layout > Custom CSS

      @media only screen and (max-width: 736px) {
      select#shipping_method_0.shipping_method {
      	width: 100% !important;
      }}

      Regards

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

Viewing 16 reply threads

You must be logged in to reply to this topic.