Community Forums › Forums › Archived Forums › General Discussion › Woocommerce 3.0 and Gallery Space below Main product image
Tagged: product gallery, WooCommerce
- This topic has 9 replies, 4 voices, and was last updated 7 years, 7 months ago by
carasmo.
-
AuthorPosts
-
June 21, 2017 at 11:38 pm #208052
sddarkman619
ParticipantI'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.comJune 22, 2017 at 5:38 am #208066Victor Font
ModeratorI 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?June 22, 2017 at 7:48 am #208068carasmo
ParticipantThe 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 filterwoocommerce_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.
June 22, 2017 at 8:00 am #208070carasmo
ParticipantAnother 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.
June 22, 2017 at 2:53 pm #208118sddarkman619
Participantthanks 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
LarryJune 22, 2017 at 4:48 pm #208133carasmo
ParticipantIn 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.
June 22, 2017 at 5:41 pm #208139sddarkman619
ParticipantYes 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?
June 22, 2017 at 5:44 pm #208140sddarkman619
Participantwell that didn't do anything but give me a Next and Previous link, hahahaha
June 22, 2017 at 11:17 pm #208152Robert
MemberOk, 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.comJune 23, 2017 at 5:59 am #208155carasmo
ParticipantRobert: 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 );
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.