This topic has 2 replies, 3 voices, and was last updated 7 years by 
-
-
Hello!
Thank you very much for your wonderful product.
After updating woocommerce to version 3.0 has stopped working gallery on the product page.
I added code in the child theme functions.php
add_action( ‘after_setup_theme’, ‘yourtheme_setup’ );
yourtheme_setup function() {
add_theme_support( ‘wc-product-gallery-lightbox’ );
add_theme_support( ‘wc-product-gallery-slider’ );
}
and added some css codes
/* 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%
}
.woocommerce-product-gallery__trigger {
position: absolute;
top: 1em;
right: 1em;
z-index: 99;
}
a.woocommerce-product-gallery__trigger {
text-decoration: none;
}
.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 {
background-color: #169fda;
color: #ffffff;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
background-color: #1781ae;
border-color: #1781ae;
color: #ffffff;
}
.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;
}
But this is not enough, since the gallery is still not displayed correctly.
1. Additional images are not under the main image.
2.When you resize the window the visible part of the next image.
3. Not correctly displayed the picture after resizing the browser.
Still some minor bugs…
I understand some of the styles from the theme buddyapp override woocommerce styles, and I understand that I just need to work on css styles.
Unfortunately my level of knowledge does not allow me to do it yourself.
Could you please update this part of the template.
Or maybe you have some solution for me?
Thank you very much for your work.
Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Hi,
We already work on this, it’s added to our buglist, we will let you know when officially integrate this and we will provide you files until the update.
As temporary solution besides yours add this CSS
COPY CODE.woocommerce div.product div.images ol img { width: 100% !important; height: 100%;} .woocommerce div.product div.images ol { top:auto; bottom:-150px; width:100% !important;height: 200px !important;} .woocommerce div.product div.images ol li { width:25%; display: inline; height: auto;margin-bottom:20px;}Maybe will not be fitted on your site cuz the images ratios differs from my to yours
Cheers
RHi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
The forum ‘Bugs & Issues’ is closed to new topics and replies.
