Gallery Pro and Woocommerce's New Gallery Fix

[Ben Siegfried]

Gallery Pro with Woocommerce’s new gallery causes the main single product image to shift to the right. After poking around CSS, I added the following for it and checked it out on both desktop and mobile and it appears to be the fix:

Providing you are adding the Woocommerce's new gallery like this in the functions.php file:

add_action( 'after_setup_theme', 'yourtheme_setup' );

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

Add this to the stylesheet to correct for the main single product image shifting to the right:

.woocommerce-product-gallery__image.flex-active-slide {
    left: -40px;
}

https://coronadosurfdesigns.com/product/t-shirts/coronado-island-tuberider-mens-t-shirt/

[Ben Siegfried]

Here's a better fix than the previous CSS rule, disregard that one, use this one:

/* WooCommerce 3.0 Gallery
 * ======================================================================= */

.woocommerce-product-gallery {
position: relative;
margin-bottom: 3em
}

.woocommerce-product-gallery figure {
margin: 0
}

.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
width: 25%;
display: inline-block
}

.woocommerce-product-gallery .flex-control-thumbs li {
list-style: none;
float: left;
cursor: pointer
}

.woocommerce-product-gallery .flex-control-thumbs img {
opacity: .5
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,.woocommerce-product-gallery .flex-control-thumbs img:hover {
opacity: 1
}

.woocommerce-product-gallery img {
display: block
}

.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
width: 33.3333%
}

.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
width: 25%
}

.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
width: 20%
}

a.woocommerce-product-gallery__trigger {
text-decoration: none;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
overflow: hidden;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
background-color: #b89a7b;
border-color: #b89a7b;
}

[Susan]

Thanks for sharing...

[Ben Siegfried]

You're welcome!

[Author]

Posts