Wrong product image gallery image order

[simonwr1976]

The product gallery images on the products on the site I’m developing are in the right order, but they appear to be starting from image three instead of image 1 on the left. An example product is https://wordpress-1368127-5047106.cloudwaysapps.com/product/gigantes-trestle-table-2/, the image that is appearing in third position should be the first image of the left.

[Ismael]

Hello @simonwr1976,

Thank you for the inquiry.

You can manually adjust the order of the images in the Product Gallery meta box – simply drag and drop the images to change their position in the gallery.

Let us know if you need more info.

Best regards.

[simonwr1976]

ah ok, thought they were in the right order, I’ll double check

[Ismael]

Let us know if you need more info.

[simonwr1976]

I checked again and I thought you were right, but I’m now not sure it’s the case. I had a look at a couple of products and the first image in the back end is the third image on the from end, see screenshots below

I think this is only happening when there are more than 4 images, when there’s less than 4 they display in the right order starting on the left

[Ismael]

Thank you for the update. We checked the product gallery markup and noticed that it’s different from the default WooCommerce gallery, so we checked the plugin list and found the Additional Variation Images Gallery for WooCommerce plugin. This plugin doesn’t follow the actual sorting of the images in the Product Gallery metabox. Sorting works fine when the plugin is deactivated. Please contact the plugin developers for additional assistance.

When plugin is deactivated:

[simonwr1976]

ok, great, thanks for this. Just one small thing, The magnifying glass is now appearing in the same location as the wishlist icon, how can I change the magnifying glass to top right, instead of top left?

[Ismael]

We added this css to move the magnifying glass icon to the right of the product gallery. Again, if you need more help with this type of change, you can avail our One service.

[simonwr1976]

thanks. Where have you added that? I can’t find it I’ve tried looking at the section (product detail) magnifying glass > customize and then element css. I’ve tried the same for the row, column and product gallery, but can’t find it anywhere

[Ismael]

It’s in the Custom Code > WooCommerce Single CSS field. Please check this link: https://theme.co/docs/code-editors

[simonwr1976]

brilliant thank you. Just one final thing on this one please.

Can you point me in the direction of where I can change the magnifying glass icon?

[Ismael]

Looks like the zoom icon is hard coded in the following container, but there is no built-in option to change it.

<a href="#" role="button" class="woocommerce-product-gallery__trigger" aria-haspopup="dialog" aria-label="View full-screen image gallery"><span aria-hidden="true">🔍</span></a>

Let us know if you need more info.

[simonwr1976]

thanks for the reply. I didn’t understand which container you’re referring to? will I be able to use an icon to replace it with? I’m basically trying to use the same magnifying glass that’s in the header

[ruenel]

Hello @simonwr1976,

This is a default WooCommerce product gallery JS coding. You can only change the magnifying glass with an icon using a custom coding.

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.