Firefox doesn't display products images of gallery only for RTL languages

Support
#1

Hi,

I can’t see images of product gallery after switch to an RTL language in Firefox. I don’t face this issue in Chrome browser.

You may compare results with these 2 Urls:

gandom.vip/ar/product/african-woman-2/

gandom.vip/product/african-woman/

Also after click on magnifier the big image moves under header ( in all browsers ) which is not attractive:

Could you please guide me to resolve them?

#2

Hello Omid,

Thanks for writing in! I have checked your pages and I can confirm the issue. This is not suppose to happen. Do you have any other plugins installed? This could be caused by a 3rd party plugin. You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

#3

It seems it is not dependent to 3rd party plugins, anyway you may check my website settings.

#4

Hi Omid,

What plugin did you use for RTL language? It seems to be an issue with your plugin, not applying the float: left on the image on Firefox, Chrome does. Your 2FA password did not work.

Please add this to Theme Options > CSS

.rtl .woocommerce-product-gallery__image.flex-active-slide {
	float: left !important;
}

Please reminded that this is not a theme issue, please contact your RTL plugin author if you encounter other issues with Firefox.

Thanks,

#5

Hi @friech , It seems many themes have this issue with Woocommerce product slider and it is related to some conflicts in Flexslider update.

Anyway I used these modifications to have a better result in both Firefox and Chrome:

/*
Woocommerce Slider Display For RTL
*/


@-moz-document url-prefix() {
    
.rtl .flex-viewport {
    
    direction:unset !important;

 } 
    
}

.rtl ul:not(.x-nav):not(.x-comments-list):not(.products), 
 .rtl ol:not(.x-nav):not(.x-comments-list):not(.products) {
    
    direction: ltr !important;
}


/*
Woocommerce Image Slider Full Size Photo
*/
.pswp--open {
    z-index: 99999;
}

Sincerely

#6

Hi Omid,

Thank you for sharing your solution.

1 Like
#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.