[Resolved] Woocommerce pages on GP not displaying properly

[Stefan]

Dear GP,

I noticed that some of the Woocommerce elements are not displaying properly on Google Chrome.

You can see that when using product page and then the cart and checkout pages, there are these “-OR-” fields that are appearing instead of the appropriate payment symbols for Stripe and so forth.

I was wondering if you could help me fix this issue? I noticed that the view is best on Firefox, but on Google Chrome and Edge there are glitches.

Looking forward to your help.

Regards,
Stefan

[Fernando]

Hi Stefan,

I can’t seem to replicate the issue on my end using Google Chrome: https://share.getcloudapp.com/YEuk8eNo

Can you try using a different device and check if the issue also exists there? Can you also try viewing them using a different network/internet connection?

Kindly let us know how it goes.

[Stefan]

Hi Fernando,

I’ve accessed the web page from two different devices in Google Chrome and I get the same issue as shared in the screenshots.

What could be causing this issue?

Regards,
Stefan

[David]

Hi there,

i cannot replicate the issue either, the only -- OR -- separator appears on Safari.
See here:

If you look at the HTML i highlighted there are two -separator elements added by the Woo payment gateways. It uses Javascript to hide the ones not required, as you can see the one with the display: none style i highlighted.

So somewhere between Woo, the optimizations on your website and probably an extension, cookie or cached style on your browser you are seeing many.

First check the site from a device on a different network using a Private/Incognito browser.
If the issue persists disable the Optimization plugins on your site and retest.

[Stefan]

Hi David,

Thanks for the tip. I followed your instructions, disabled the optimization plugins, connected to a different network using an incongnito (Chrome) browser, but the issue still persists.

I had a friend report this issue to me as I had only been using Firefox. I’m not sure if the issue appears on Safari.

Does the issue appear for you on your Chrome browser?

[Fernando]

Hi Stefan,

I see. I still can’t replicate the issue on Chrome on Desktop but I can replicate the issue from my end on my personal Phone using Chrome.

Can you try disabling Jetpack as well?

If that doesn’t work, can you try #1 here leaving WooCommerce plugins active along with GP products: https://docs.generatepress.com/article/debugging-tips/

Kindly let us know how it goes.

[Stefan]

Hi Fernando,

Thanks for the tip and for double checking the issue. I found the culprit(s).

It is WooCommerce Payments and WooCommerce Stripe.

Any suggestions how to make it work with the GP theme?

Regards,
Stefan

[David]

In the screenshot i provided above, i pointed out that the element is given an inline style to hide it ( display: none ). That inline style gets added ( or not ) by the payment gateway plugins scripts. The Theme has no control over it.

Those plugins may be conflicting with each other, or as Fernando hinted at, another plugin may be causing an issue ( eg. Jetpack ).

I would recommend speaking with the Plugin Author(s), or Woocommerce Support as they may have come across this kind of issue before

[Stefan]

Dear David,

Thanks for your response. I’ll contact the plugin authors.

Regards,
Stefan

[David]

Let us know how you get on!

[Author]

Posts