Having problems with X Pro and Woocommerce product gallery

Hi!
We are having problems with the product gallery and Woocommerce. Woocommerce, Wordpress and X Pro is the latest version.

Our problem is that the product gallery changed with the last update and now it is really bad with really small thumbnails in the top right corner instead of the new good product gallery that should be available in Woocommerce 3.

You see the problem here:

How do I fix this?
Best regards
Andreas

Hey,

Thank you for writing in!

To check this better, could you post some logins details in a secure note and we`d be happy to take a look.

P.S: You can search by “secure note” on this article if you don`t know about this: https://theme.co/apex/forum/t/themeco-support-overview/288

Sure. Please see attached.

Hi there,

Please kindly add the CSS code below to X > launch > options > CSS:


.single-product .flex-control-nav.flex-control-thumbs {
    float: none;
    position: relative;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}

.single-product .flex-control-nav.flex-control-thumbs img {
    min-height: 60px;
}

.flex-control-nav.flex-control-thumbs li {
margin: 10px;
}

.woocommerce-product-gallery__trigger img {
    visibility: hidden;
}

.woocommerce-product-gallery__trigger:before {
    font-family: "FontAwesome";
    content: "\f065";
    color: white;
}

That will do the trick.

1 Like

Hi!
Thank you! It did! Why do we need to do that? Shouldn’t it work without CSS modifications? Do we have any blocking CSS?

Hi there,

The problem is that in Woocommerce new version all the stuff we did to overwrite the normal thumbnail functionality of the plug-in is not working anymore because Woocommerce deprecated some filters. Also in the new version, the gallery is completely different as you see and it is not compatible with the previous code.

We did some changes in the latest version of their theme which you can read in details here:

https://theme.co/changelog/

Thank you.

This was one year ago. We still need to have custom CSS and have a very ugly magnifier icon. Is this not fixed?
Best regards
Andreas

Hi Meetio,

Please kindly read the article below to know how you set things correctly:

Please open up a separate thread if you need to follow up the case.

Thank you.