![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: blurred, image, image quality, Product page, single product
-
AuthorPosts
-
May 3, 2017 at 10:39 pm #787452
Hello support team,
when browsing items in the shop, they have good quality. When moving to a single product page, the quality turns bad, until you click to open in a lightshow. When open in the lightbox, the quality is fine again. You can try yourself with the links provided in the private content.
Thanks in advance!
May 4, 2017 at 4:35 am #787548Hey tcadam0301,
Try adding this at the bottom of functions.php:
global $woocommerce; if( version_compare( $woocommerce->version, '3.0.0', ">=" ) ) { add_theme_support( 'wc-product-gallery-zoom' ); add_theme_support( 'wc-product-gallery-lightbox' ); function avia_woocommerce_gallery_thumbnail_description($img, $attachment_id, $post_id, $image_class ) { return $img; } function avia_woocommerce_post_thumbnail_description($img, $post_id){ return $img; } }
Let us know if this helps :)
Best regards,
NikkoMay 4, 2017 at 5:41 pm #787965Hello Nikko,
your solution works almost perfect. On the computer, we can zoom by hovering and open the lightbox by clicking.
However, on the smartphone, the user now has to click on the upper bar to open the lightbox and clicking on the image just results in zooming.
This seems not intuitive. Can you help us with that please?Thanks in advance!
May 6, 2017 at 6:38 am #788733Hey!
Please remove the filter then modify the config-woocommerce > config.php file, remove everything then replace it with the following.
// https://pastebin.com/rYaHKWBz
In the functions.php file, add this code.
add_action( 'after_setup_theme', 'ava_new_product_gallery_support_mod', 10); function ava_new_product_gallery_support_mod() { add_theme_support( 'wc-product-gallery-zoom' ); add_theme_support( 'wc-product-gallery-lightbox' ); add_theme_support( 'wc-product-gallery-slider' ); add_theme_support( 'avia-new-product-gallery-feature' ); }
Add this code in the Quick CSS field or the child theme’s style.css file:
.single-product div.product .woocommerce-product-gallery { margin-bottom:2.617924em; margin-top:0; } .single-product div.product .woocommerce-product-gallery { position:relative; } .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger { position:absolute; top:.875em; right:.875em; display:block; height:2em; width:2em; border-radius:3px; z-index:99; text-align:center; text-indent:-999px; overflow:hidden } .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before { font:normal normal normal 1em/1 FontAwesome; font-size:inherit; text-rendering:auto; -webkit-font-smoothing:antialiased;- moz-osx-font-smoothing:grayscale; display:block; content:"\f00e"; line-height:2; text-indent:0 } .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger img{ display:none!important } .single-product div.product .woocommerce-product-gallery img{ margin:0 } .single-product div.product .woocommerce-product-gallery .flex-viewport{ margin-bottom:1.618em } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs{ margin:0; padding:0 } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs:after,.single-product div.product .woocommerce-product-gallery .flex-control-thumbs:before{ content:""; display:table; } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li{ list-style:none; margin-bottom:1.618em; cursor:pointer; } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img { opacity:.5; -webkit-transition:all,ease,.2s; -moz-transition:all,ease,.2s; transition:all,ease,.2s } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img{ opacity:1 } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li{ width:42.8571428571%; float:left; margin-right:14.2857142857%; } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n){ margin-right:0 } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li{ width:23.8095238%; float:left; margin-right:14.2857142857%; } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n){ margin-right:0; } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li{ width:14.2857142857%; float:left; margin-right:14.2857142857%; } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n){ margin-right:0; } .single-product div.product .images .woocommerce-main-image{ margin-bottom:1.618em; display:block; } .single-product div.product .images .thumbnails a.zoom{ display:block; width:22.05%; margin-right:3.8%; float:left; margin-bottom:1em; } .single-product div.product .images .thumbnails a.zoom.last{ margin-right:0; }
Regards,
IsmaelMay 6, 2017 at 1:08 pm #788820Hey!
And don’t forget to adjust the size of the “Product thumbnails” in the WooCommerce > Settings > Products > Display > Product images section. After the size adjustment, regenerate or re-upload the thumbnails.
Cheers!
IsmaelMay 11, 2017 at 9:12 am #791550.
-
This reply was modified 7 years, 4 months ago by
L-mobileGroup.
June 2, 2017 at 3:05 pm #803053Hallo ich habe den Code nun wieder eingebaut.
Problem: Bild bleibt bei 358 x 368. (soll 370 x 370)
Die Lightbox geht nicht auf.
Das Single Produkt Bild wird im gleichen Fenster geöffnet, der Hintergrund des Bildes ist schwarz.
Das Bild wird in der Größe 370 x 370 angezeigt.
Ich habe den Code rausgenommen, da die Seite schon läuft.
Danke für die Rückmeldung.
Grüße DianaDiese Seite hat das gleiche Problem:
————————————————
global $woocommerce;if( version_compare( $woocommerce->version, ‘3.0.0’, “>=” ) ) {
add_theme_support( ‘wc-product-gallery-zoom’ );
add_theme_support( ‘wc-product-gallery-lightbox’ );function avia_woocommerce_gallery_thumbnail_description($img, $attachment_id, $post_id, $image_class ) {
return $img;
}function avia_woocommerce_post_thumbnail_description($img, $post_id){
return $img;
}}
-
This reply was modified 7 years, 3 months ago by
DianaFuetterer.
June 7, 2017 at 2:57 am #804780Hi,
Thank you for the update.
Please remove the previous modifications. Update the theme to the latest version then go to the Enfold > Shop Options panel then set the “Product gallery settings” to the second option (WooCommerce 3.0 Product Gallery).
Best regards,
Ismael -
This reply was modified 7 years, 4 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.