Blank button shapes under footer

Hi, I have same issue, don’t see anymore on your site, how did you fix it?

Anyone else had same issue?

Hi Alex,

I just used some css to make them disappear:

.pswp { display: none; }

You should check to see if you have the .pswp class enclosing what you are seeing before using this.

@irishetcher @allextreme the reason why this happened (it’s more common than you might expect) is because you unloaded the CSS that was behind that content. So, on one page you might not need PhotoSwipe at all. You decide to unload everything related to it, including its CSS. However, there are situations when HTML content is also printed by the plugin behind PhotoSwipe. In this case, it was hidden, as long as its CSS was loaded which instructed the browser to have it hidden when necessary. When you unloaded that CSS, there was no rule such as the one you used – .pswp { display: none; } – to instruct the browser to also hide the content.

It looks like WooCommerce is loading it. Usually, the whole plugin is unloaded to avoid any HTML printing. But, if you need WooCommerce on the homepage for any other reason, then this is not an option to unload the whole plugin via “Plugins Manager”.

The best bet would be to unload all the assets related to PhotoSwipe, except the one that has the rule to make that content hidden which is located in the following CSS: /wp-content/plugins/woocommerce/assets/css/photoswipe/photoswipe.min.css – to be more precise, that’s the CSS that should be kept loaded (you can locate it inside the file): .pswp{display:none;position:absolute;width:100%;height:100%;left:0;top:0;overflow:hidden;-ms-touch-action:none;touch-action:none;z-index:1500;-webkit-text-size-adjust:100%;-webkit-backface-visibility:hidden;outline:0}

So, what you did was good to apply the CSS rule to make it disappear. Or, you could have left /wp-content/plugins/woocommerce/assets/css/photoswipe/photoswipe.min.css to be loaded, which is the easier option if you don’t have access to SFTP or can’t insert custom CSS through the Dashboard via a certain plugin or by editing the theme.

I hope it makes sense! Let me know if I can further assist you! Happy winter holidays!

Thanks Gabe, you hit the nail on the head. I removed the unload on the photo swipe and that resolved the issue. My display: none; solution was a stopgap, long hours and brain not functioning etc…but all good now.

So.. The problem is partially resolved with CSS tag .pswp { display: none; } that I’ve added in custom CSS on my theme, that part for Photoswipe, as PS itself is showing like 3 or for rows of those buttons.
Now I’m left with only one button which is showing also on pages where Photoswipe has not been unloaded.

Any idea how to work around it? I’m using Elementor Pro and Kandece theme.
My only idea is to load one by one of unloaded assets and see which one is causing it?

Also (not sure should I make another post) I would like to unload all Elementor editor and WP dashboard scripts for users that are not logged in, but not sure which .js and .css I can, as every time I unload some, pages break…

Thanks for your help guys, you rock

Hi Alex,

So, first go to edit the page and then open Asset Managers rules for loading and unloading. Scroll down to the WooCommerce section and check to see if you have opted to unload for photo swipe dependencies. Might be wise just to remove any unloads for WooCommerce at this stage. Save and then remove my suggested css to see if the issues is resolved.

Thanks again! I have found another Woo plugin adding one of those ugly things. /woolentor-addons/assets/css/woolentor-widgets.css Woo Lentor custom pages builder for Woo Commerce in case anyone else run into same issue…

Cheers!