Promo popup not appearing on mobile anymore

Hello,
Until past week my promo popup was appearing on mobile, it doesn’t anymore.
– the option to deactivate it on mobile from Theme Settings is OFF
– I tried turning all the plugins OFF
– I tried removing any custom CSS, including the CSS applying to the popup
– I tried modyfing the html block, still the same
– when a small screen is simulated from a computer (right click / inspect) the popup appears
– on Android, tried with Chrome, Firefox, DuckDuckGo
– I have no adblocker on my phone / no particular settings (and it doesn’t appear either on my friends’ phones)

Any clue? Of course with the sales period starting today in France this is very urgent, I hope you can help. Thank you,
Maps

Hello,

Please update the theme up to 3.8.0 and deactivate all the plugins not related to the theme and switch the parent theme, check the issue, if the problem remains, leave the plugins not activated and provide the site admin access to the private area

Best Regards

Elise,
– Woodmart is 3.8.0
– Plugins are deactivated
– I just activated the parent theme, it didn’t help. In case this has importance in the fix you propose please note that I usually use the child.
– Site access : on my previous message
BR,
Maps

Hello,

Please deactivate the Maintenance mode. Please keep your site access valid till the problem has been solved.

Best Regards

Elise,
Done.

Thank you it solved my most urgent issue which was the popup, good catch.

It also showed that my Woodmart maintenance mode was not working for the past weeks, although I do have a page set as Maintenance in Page Attribude/Template.

It’s not urgent but if you could look into it when you have a moment in the upcoming days, I’d be grateful. I leave the access to the site.

Best,

M

Elise, much more importantly than the maintenance issue, still about the popup: 2 users reported this evening that they only saw “a grayed out screen with a cross” on mobile, like in the pic attached. This is because the popup doesn’t stay on the screen when the users scroll, it was in fact here but higher on the page, out of their screen.
In other words, if people swipe down with their finger, and the popup is set to appear on scroll, they may pass by it without seeing it.

Almost all websites have a popup that stays on the screen until closed, whether the user scrolls or not : is there a way to make that happen very soon (a CSS fix to use as a “quick solution” ufor now + a fix in a later update of Woodmart?)

I know I can set it as “appear after X seconds” instead of scroll but that’s only a temporary solution (more intrusive in my opinion, with uncertainty, lack of control and possibles issues if the website loads slowly).

Seems to me as a major feature for an ecommerce site.
Thanks a lot,
M

Attachments:

You must be logged in to view attached files.

Try to add the following code snippet to the Custom CSS area for mobile devices only in Theme Settings to fix this issue.

.promo-popup-wrapper .woodmart-promo-popup {
   position: fixed;
   top: 50%;
   left: 0;
   right: 0;
   transform: translateY(-50%);
}

Hello Artem,
Thank you for your reactivity, unfortunately so far it didn’t change the behavior of the popup at all (I cleared the cache after putting the code).
Best,
Paul

We don’t see the code added at all.

I tested it directly on my live site (the access you have is my staging site, they’re identical, except I deativated the plugins on the staging site).
On my staging site, it does make a change, it is not immobile indeed, but the popup is too low (see attached)

Best,
M

Attachments:

You must be logged in to view attached files.

Please, send us a link to the page where you have added the code.

Alright please see the link provided in the Privat area. It links to Theme Settings > Custom CSS > Custom CSS for mobile (& mobile landscape)
Screenshot of the code attached as well.

Attachments:

You must be logged in to view attached files.

Try to replace it with the following one

.promo-popup-wrapper .woodmart-promo-popup {
   position: fixed;
   top: 50%;
   left: 0;
   right: 0;
   transform: translateY(-50%)!important;
}

It does work with this second version, thanks a lot Artem.
Best regards,
M

You are welcome.

[Author]

Posts