Control buttons displayed 2x and shifted

You have the lightbox of WooCommerce enabled as well (which also uses Photoswipe but the older version 4 and not 5). This displays the additional buttons. Lightbox with Photoswipe has nothing to do with that. Please disable the WooCommerce lightbox or make sure that on pages with WooCommerce product images you don’t use Lightbox with Photoswipe.

So the older version is located directly in the Woocommerce plugin? Why, when I deactivate your plugin, no lightbox is displayed, not even the older version? I tried to turn off the Woocommerce lightbox but so far without success, see this thread.

I think the problem is the stylesheet by WooCommerce which also contains styles for the PhotoSwipe 4 elements:

https://bhibu.com/wp-content/plugins/woocommerce/assets/css/photoswipe/default-skin/default-skin.min.css?ver=7.0.0

However PhotoSwipe 5 has its own styles:

https://bhibu.com/wp-content/plugins/lightbox-photoswipe/assets/ps5/styles/main.css?ver=5.0.18

So it seems, WooCommerce still adds its own styles for elements like .pswp__button, even if the internal lightbox is turned off. These get then mixed with the new styles for PhotoSwipe 5 so every button also contains the elements added by WooCommerce.

Unfortunately this is not easy to fix – the class names for PhotoSwipe can not be changed as they are created by the frontend code of PhotoSwipe itself and there is no option to change the classe names from .pswp__ to something else.

So what you need to to is to find the location where WooCommerce enqueues the CSS file https://bhibu.com/wp-content/plugins/woocommerce/assets/css/photoswipe/default-skin/default-skin.min.css?ver=7.0.0 and remove that or comment this out. Or ask the maintainers of WooCommerce that the stylesheet should not be added if the internal lightbox is disabled.

I created a Github issue to extend PhotoSwipe 5 so it may be possible to have custom prefixes for the CSS classes. However I can not tell you how long it will take to implement this or if this will even happen at all:

https://github.com/dimsemenov/PhotoSwipe/issues/1980

Thank you for your help and quick response. I’ll wait to see what they say in the Woocommerce thread about your comment.

I want to ask one more thing, in this post in the last sentence you write that: “Or ask the maintainers of WooCommerce that the stylesheet should not be added if the internal lightbox is disabled.”
However, I do not have the internal Woocommerce lightbox disabled, when I disable it according to the instructions written to me by Woocommerce support in the mentioned thread then only your lightbox is displayed, but without images, it’s just all black and only the controls can be seen. Here it is important to note again that I use the Image Carousel widget from the Elementor plugin to display the product gallery (slider).

Sorry, I don’t know how to solve your problem. I also don’t know what is wrong with the Image Carousel widget in combination with Lightbox with PhotoSwipe.

I changed the option “PhotoSwipe version to use” to 4 in your plugin settings and the problem is solved. I have no idea how to make it work with version 5, but I will figure it out in time. Thanks for help.

I already explained that:

The lighbox for WooCommerce will always include the PhotoSwipe 4 scripts and styles even if the lighbox is turned off. So the buttons and controls of PhotoSwipe 4 will always be used as well, no matter which version my plugin uses.

So when you select PhotoSwipe 4 instead of PhotoSwipe 5 you will still have both lightbox plugin scripts and styles included – but in this case this will not be visible any longer, since the the version from WooCommerce is more or less identical to the slightly updated version of PhotoSwipe 4 in my plugin.

However – this may not be the case in future. The longer you use that, the more likely you will have a problem in the future when my plugin gets updated and at some point the WooCoommerce lightbox code will cause a conflict.

The real fix is as I already suggested here – WooCommerce must not enqueue scripts and styles if the lightbox is disabled.

• This reply was modified 2 years ago by Arno Welzel.