Woocommerce 3.0 and Gallery Space below Main product image

[sddarkman619]

I've been scouring all the css files and using firebug to try to find the problem but am at a lose of 2 days now.
I'm attching 2 images of the issue. product page main image and the gallery below it, sometimes has a space below the main image area, and sometimes does not, it's pushed up against the bottom of the main image. ANY help pointing me in the right direction would be appreciated. please see photos.
I've also looked at documentation at woo and such
site: http://www.passionflowervine.com

http://www.passionflowervine.com

[Victor Font]

I don't have a solution for you, but I can explain what appears to be happening. Maybe it will point you in the right direction. Some script is incorrectly calculating the min-height for the primary product image and injecting it as inline CSS. For the first image that has the space, you source code includes this:

<div data-thumb="http://www.passionflowervine.com/wp-content/uploads/2017/06/T2eC16JHJF8E9nnC6U7kBQZoDtgdb60_12-180x180.jpg" class="woocommerce-product-gallery__image flex-active-slide" data-thumb-alt="" style="width: 346px; margin-right: 0px; float: left; display: block; min-height: 461px;">

For the other images without the spacing, they all have this:

<div data-thumb="http://www.passionflowervine.com/wp-content/uploads/2017/06/81gJLKzcavL._SL1500_-180x180.jpg" class="woocommerce-product-gallery__image flex-active-slide" data-thumb-alt="" style="width: 346px; margin-right: 0px; float: left; display: block; min-height: 346px;">

The last element in the div is min-height. Since the CSS is inline, I assume there's a jQuery script calculating the min-height.

Since this is a WooCommerce question, I can't help you further than that. As a community volunteers, we're focused on the Genesis Framework and Studio Press related questions. You may have to find a WooCommerce forum to receive more detailed help.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[carasmo]

The args for Flexslider that come with WooCommerce is smoothHeight: false. All your images are not the same size in this product:

Passiflora Edulis – Frederick – Edible Purple Passion Fruit Plant

So it calculates height of the tallest image and leaves a gap. It's crappy, I know.

When you turn smoothHeight to true using the php filter woocommerce_single_product_carousel_options this issue may resolve for most users (some browsers get 0px height). Flexslider since version 2 has had issues as they were trying to cater to all situations.

See example here:

http://selmantunc.com/post/159453196812/woocomemrce-3-flex-slider-filter

Anyway, as Victor stated, this is a WooCommerce (really Flexslider) issue.

---

Genesis Theme Customization and Help

[carasmo]

Another alternative is to find something like this in your functions.php file, the function name will be different.

function yourtheme_setup() {
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
}

Change ONLY the single line (not the function name) for wc-product-gallery-slider to this which is adding a single line php comment before it. I believe that now your single product gallery will behave like the good old days, before the slider.

function yourtheme_setup() {
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
   // add_theme_support( 'wc-product-gallery-slider' );
}

Don't change the function name. Just add a couple forward slashes before the theme support line for the slider.

---

Genesis Theme Customization and Help

[sddarkman619]

thanks for teh replies folks.

@Carasmo, I actually like the slider so I don't want to comment it out. that code you linked to, where does that go? I might try that and see what happens?

thanks
Larry

[carasmo]

In your functions.php file. Use a code editor and ftp or if you miss a single anything in code, you could mess up your site and not be able to fix it unless you have ftp access in the first place.

---

Genesis Theme Customization and Help

[sddarkman619]

Yes I've edited the functions file before.
I alreadyahve this in the functions file:
function yourtheme_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
// add_theme_support( 'wc-product-gallery-slider' );
}

but that code in the link you posted that goes there as well?

[sddarkman619]

well that didn't do anything but give me a Next and Previous link, hahahaha

[Robert]

Ok, I think this might point you in the right direction, it's a quick fix, so it's not perfect. Seems like that white space is bothering you a lot though 🙂

I was looking and it is all inline css styling so there is a line of code in here you can add to get the result you want. You should play with other percentages and ways of sizing elements (here's a guide on some different ways to size elements with css https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Rems)

The line you need to add is:margin-bottom: -9%;

<div data-thumb="http://www.passionflowervine.com/wp-content/uploads/2017/06/alba-1-180x180.jpg" class="woocommerce-product-gallery__image flex-active-slide" data-thumb-alt="" style="float: left;clear: both;width: 346px;min-height: 346px;/* max-height: 1px; */margin-bottom: -9%;"> <-----

worked for me on a cursory glance.

The overall code for that div is below:

<div data-thumb="http://www.passionflowervine.com/wp-content/uploads/2017/06/alba-1-180x180.jpg" class="woocommerce-product-gallery__image flex-active-slide" data-thumb-alt="" style="float: left;clear: both;width: 346px;min-height: 346px;/* max-height: 1px; */margin-bottom: -9%;"><a href="http://www.passionflowervine.com/wp-content/uploads/2017/06/alba-1.jpg"><img width="596" height="566" src="http://www.passionflowervine.com/wp-content/uploads/2017/06/alba-1.jpg" class="attachment-shop_single size-shop_single wp-post-image" alt="Passiflora Edulis Alba" title="" data-src="http://www.passionflowervine.com/wp-content/uploads/2017/06/alba-1.jpg" data-large_image="http://www.passionflowervine.com/wp-content/uploads/2017/06/alba-1.jpg" data-large_image_width="596" data-large_image_height="566" srcset="http://www.passionflowervine.com/wp-content/uploads/2017/06/alba-1.jpg 596w, http://www.passionflowervine.com/wp-content/uploads/2017/06/alba-1-300x285.jpg 300w" sizes="(max-width: 596px) 100vw, 596px" draggable="false"></a></div>

---

-Robert McMillin
RobertMcMillin.com

[carasmo]

Robert: The html can't be adjusted. It's generated by WooCommerce. There are also no CSS fixes, since the height is calculated in jQuery.

Regarding the filter:

With a code editor and FTP, go to the very bottom and outside of all other brackets (all functions), you can paste in this filter that turns on SmoothHeight.

 
// Woocommerce Flex Slider Filter Config

function sddarkman619_single_product_carousel_options_callback( ) {
   return array(
         'rtl'            => is_rtl(), //rtl 
         'animation'      => 'slide',
         'smoothHeight'   => true,
         'directionNav'   => false, 
         'controlNav'     => 'thumbnails',
         'slideshow'      => false,
         'animationSpeed' => 500,
         'animationLoop'  => false, // Breaks photoswipe pagination if true.
   );
}
add_filter( 'woocommerce_single_product_carousel_options', 'sddarkman619_single_product_carousel_options_callback', 10, 3 );

---

Genesis Theme Customization and Help

[Author]

Posts