questionabout

Any luck with mystile?
I am trying to figure this out without any knowledge, I see the code:
.woocommerce-product-gallery–columns-x
but not really sure where to replace what in mystile. Any ideas would help a lot!

[EDIT!]
Found the solution:
add this to custom style sheet of your theme:
.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;
}
woocommerce.css?ver=4.7.3:1 .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 {
list-style: none;
margin-bottom: 1.618em;
cursor: pointer;
}
.single-product .pswp__button {
background-color: transparent
}
.single-product div.product {
position: relative;
overflow: hidden
}
.single-product div.product:after, .single-product div.product:before {
content: “”;
display: table
}
.single-product div.product .images, .single-product div.product .summary, .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;
text-decoration: none;
}
.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%; */
width: 18%;
float: left;
/*margin-right: 14.2857142857% */
margin-right: 8.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
}

source: https://wordpress.org/support/topic/css-to-fix-a-woocommerce-image-display-proble/#post-9004524

• This reply was modified 9 years, 1 month ago by questionabout.

+1 for this. I figure out that sometimes it is customers that press the button multiple times or Safari/Chrome on the phone re-loads the page submitting the question over and over again.