0

This is probably one of the strangest and most frustrating issues I've come across. We have a website that is an online shop using, WordPress and WooCommerce.

A lot of their marketing is done via their Instagram page. When the website is opened from the Instagram app it opens in Instagram's in-app browser. Everything seems to work fine until you get to the checkout. The payment options section is greyed out and the card fields are squashed. If you open the same page on desktop browsers or mobile browsers this section is fine and works as it is supposed to.

Greyed out payment options

I have tried moving this to staging and disabling all of the plugins except WooCommerce and also with the Twentynineteen and Storefront themes and the issue occurs with all of these configurations.

I know that other WordPress and WooCommerce website don't experience this issue so I am at a bit of a loss trying to find out what is causing it.

0

I contacted WooCommerce support and they told me to go to Utilities (my hosting is through WPEngine) and disable 'Redirect Bots'. That instantly fixed the issue for me.

I then contacted my hosting to make sure that was safe for the site and they instead created a rule on their end so that all bots weren't being allowed to hit the real site rather than a cached version. This is what they said they created if this helps you in any way.

if ($http_user_agent ~* "Instagram") { break; } 

is what I set up on our end for your Nginx config - basically it causes the current rule we have for Instagram to be ignored.

Hopefully, this helps you!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.