Home › Forums › Themes Support › Gecko › Help!
- This topic has 21 replies, 2 voices, and was last updated 5 years, 3 months ago by Harry.
-
AuthorPosts
-
-
December 24, 2018 at 10:08 pm #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!
-
December 24, 2018 at 11:20 pm #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 -
December 24, 2018 at 11:54 pm #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?
-
December 24, 2018 at 11:58 pm #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! 🙂
-
-
December 25, 2018 at 12:37 am #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.
-
December 25, 2018 at 9:23 am #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.
-
-
December 25, 2018 at 12:42 am #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.
-
December 25, 2018 at 9:37 am #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 -
December 28, 2018 at 11:49 am #27925
Hi, thank you!
-
December 28, 2018 at 12:23 pm #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-
December 28, 2018 at 1:40 pm #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! 🙂
-
-
December 28, 2018 at 4:55 pm #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 -
December 29, 2018 at 10:58 pm #27977This reply has been marked as private.
-
December 30, 2018 at 11:46 am #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-
December 30, 2018 at 1:47 pm #27979
It works well!!!
Thank you so much!!!
Best regards.
-
-
January 1, 2019 at 3:25 pm #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!
-
January 1, 2019 at 3:50 pm #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 -
January 1, 2019 at 4:33 pm #27997
Hi,
I see! Thank you so much for the fast response!
Happy new year!
Best regards.
-
January 1, 2019 at 10:50 pm #27998This reply has been marked as private.
-
January 2, 2019 at 9:35 am #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-
January 15, 2019 at 7:25 pm #28243This reply has been marked as private.
-
-
January 15, 2019 at 11:40 pm #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
-
-
AuthorPosts
You must be logged in to reply to this topic.