SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

From our one of the recent WordPress website development project, we have noticed that WooCommerce outputs a notification that varies depending on the browser users use during the checkout process, which also logs the message “Unable to fix malformed JSON” in the console.

Details of the WooCommerce problem

The error messages displayed on the frontend

Chrome: SyntaxError: Unexpected token Y in JSON at position 0
chrome-woocommerce-error

Firefox: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
firefox-woocommerce-error

Internet Explorer (a.k.a. Internet Error) & Edge (a.k.a. Error) : SyntaxError: Invalid character
internet-explorer-woocommerce-error

Safari: SyntaxError: JSON Parse error: Unexpected identifier “You”
safari-woocommerce-error

In order to troubleshoot what is causing the issue, we have done some research and noticed that it is not just us, but many people are experiencing the same issue.

As a first step in WordPress troubleshooting, we started disabling all plugins installed, but WooCommerce, to find out whether it is a plugin issue, and yes, we did find the problem.

Two of our plugins, Background Slider WordPress plugin, and Post Ticker plugin are conflicting with WooCommerce.

We were very concerned to learn that it is our plugin, but with a little more research we found that many other plugins had the same issues with WooCommerce. We started back tracking the issue and found that it technically is not our plugins that are causing the problem, but WooCommerce may need to make an update to checkout function.

Our Findings and Solution

Problem:

Proceeding to WooCommerce checkout creates an error and outputs a notification message. This still records the order in the WordPress database, but it doesn’t get processed from the actual credit card processing or any checkout method the store owner has chosen.

Cause:

WooCommerce uses “save_post” hook when users checkout products via ajax call.

Why:

Some of our plugins adds custom metabox to the default WordPress post type and checks whether the person trying to save the post has permission to edit the post. When the WooCommerce object, wc_checkout_form, processes the order via ajax, it triggers save_post action which interferes with our plugins using save_post hook. Due to the security feature that our plugins check for edit permission when save_post action is triggered, it denies saving the post then WooCommerce sees it as an issue.

Test:

When you login to WordPress with an account with “edit” privilege, the error is not detected and finishes the checkout process normally.

Solution:

We have updated our plugins to check for permission only when it is updating the data from the custom metabox when our plugins add to the default WordPress posts.

Conclusion

It is still safe to use our plugins and the issue has been fixed without sacrificing the security features that confirms the permission of the user who edits the post.

If you are experiencing the same issue, it is highly likely that you are also running a plugin that checks for user’s permission. If it is a plugin you must use, you can use Notepad++ or any other code editor to open all php files of the plugin and search for “save_post” string and move the function to check for the permission to execute only when a relevant data is updated.