WooCommerce Checkout Issue specific to Instagram In-App Browser

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.

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.

Topic woocommerce-offtopic e-commerce plugins Wordpress

Category Web

1
answered at

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!

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.