woocommerce product gallery flex-control mobile - css

I have a problem in mobile display for the photo gallery of product pages.
I don't know why from the 2nd line it no longer works properly.
gallery product
Thank you
I find this css :
css
Thank you

Related

How to add an embed code as a last image of woocommerce gallery

we want to integrate AR files into Woocommerce product gallery.
Similar like here: https://www.carltonfurniture.co.uk/holcot-coffee-table-grey-finish/p638
AR (GLB and USDZ files) plugins don't seem to accomplish this, they just add a button to view in AR on mobile device. I want to integrate with woocommerce product gallery so the last image is the AR.
I have the embed code
<model-viewer src=" ...
..... 
But I struggle to find how can I include it to woocommerce gallery as the last gallery image. Maybe there's a plugin to add a code as a gallery item?
Thanks for your help.

Variation image or Another Image as Woo Feature Image

Really appreciate your help this one...
How can I display a woocommerce product variation's image as the featured image on the woocommerce single product page?
Alternatively how can I use another image as the product page featured image?
Here's why I need that:
WooCommerce with OceanWP has a neat slider feature that appears on hover over each product listing on the shop page that allows users to cycle through the product's gallery images. It's like a preview and is exactly the user experience I want as the product that I'm selling comes in a variety of colors.
When a user selects a product in the shop archive and clicks-through to the single product page though, I need to display the featured image as a mockup of the product. It's a better user experience because it shows the user already the design they selected on the shop archive page as a product mockup. This helps to visualize and clarify what they're getting.
So I've hidden the thumbnail gallery using CSS and set the woo product variation images to an image of the mockup in the right colour. When the user selects a 'colour' option, the woo gallery slider changes accordingly and that's the right user experience too.
My problem is simply when the user first clicks-through from the shop archive to the single product page, instead of showing the product's default featured image, show one of the product variation images, which are mockups...or at least show another image altogether so the user sees the mockup, selects the color option and the user experience is simple.
Any ideas on how I can do this?
Thanks a mil for any help :)

Woocommerce 2nd image on hover not working

We have a problem with a new webshop we want to put online. We want to display the 2nd image on a hover on desktop for our store. It works on the default shop page (https://www.festivalapparel.nl/shop/) but not on our homepage (https://www.festivalapparel.nl/). It has been created with the building block from woocommerce: featured item. It looks like it does not load two images per item, so it can't switch it.
In summary: it works on the preset shop page but not on the homepage using their building block, we also want it to help there. Thanks!
Replace your page builder block with this shortcode bellow:
[products limit="10" columns="5" best_selling="true"]
If you want to display best sellers manually you could use featured function with shortcode bellow. To set featured products there is a star icon in your woocommerce admin products list so you could just click on it and product will be featured.
[products limit="10" columns="5" visibility="featured" ]

Woocommerce Product Gallery Lightbox and static main product image

I'm a little bit stuck with woocommerce product gallery.
Is it possible to make main product image constant, and remove changing of this image by clicking other product gallery images? Instead of this, when clicking product gallery images - lightbox with clicked image appears.
thanks in advance!

woocommerce product gallery image spacing not

I'm working on a Woocommerce site build with the Divi theme. I have issues with the spacing between the images in the product gallery. If there are 9 images shown on a page, then the spacing on the second and third row is not correct. Does anyone know how to resolve this?? thanks in advance!
regards,
Gerry
product gallery woocommerce

Resources