Tagged: , , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 3, 2017 at 10:39 pm #787452
    tcadam0301

    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 #787548
    Nikko

    Hey 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,
    Nikko

    May 4, 2017 at 5:41 pm #787965
    tcadam0301

    Hello 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 #788733
    Ismael

    Hey!

    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,
    Ismael

    May 6, 2017 at 1:08 pm #788820
    Ismael

    Hey!

    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!
    Ismael

    May 11, 2017 at 9:12 am #791550
    L-mobileGroup

    .

    • This reply was modified 7 years, 2 months ago by L-mobileGroup.
    June 2, 2017 at 3:05 pm #803053
    DianaFuetterer

    Hallo 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 Diana

    Diese Seite hat das gleiche Problem:

    Motiv-Karte (versch. Motive)

    ————————————————
    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;
    }

    }

    June 7, 2017 at 2:57 am #804780
    Ismael

    Hi,

    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

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.