Tips for resolving the never-ending buffer issue during the checkout process on WooCommerce for WordPress

Currently facing a persistent issue with the Woocommerce checkout page where the order review section is continuously buffering and not loading as intended. Despite extensive research and attempts to troubleshoot, no resolution has been found yet.

https://i.sstatic.net/qmwMM.png

Many support threads suggest that identifying the cause of the problem can be done through Chrome/Firefox logs or console. However, thorough examination of these sources has yielded no significant insights for me.

Interestingly, removing the blockUI div resolves the buffering issue temporarily, allowing orders to be placed. Strangely, even though the order gets processed and notifications are sent out, various errors occur depending on the browser. Chrome shows 

SyntaxError: Unexpected token <
, Firefox displays 
SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 167 of the JSON data
, and IE indicates SyntaxError: Invalid character.

In an effort to isolate the problem, I have deactivated all other plugins except Woocommerce and switched to the default 2015 Wordpress theme. Some suggestions point towards AJAX causing issues - therefore, I am curious if there is a way to disable AJAX specifically for the Woocommerce checkout process without affecting its functionality (Unfortunately, I have not located a comprehensive guide on how to do this).

javascriptajaxwordpresswoocommerce

Answer №1

After some investigation, I was able to figure out the solution on my own.

While examining the GET/POST logs, I discovered that Woocommerce included a script named blockUI. To resolve the issue, I decided to alter the names of these scripts (including their minified versions) to prevent them from being invoked.

You can locate these scripts at 

/wp-content/plugins/woocommerce/assets/js/jquery-blockui/

By disabling these scripts, I successfully eliminated the infinite buffering and resolved the error. It's worth mentioning that this correction may have also been influenced by an error suppression method implemented by the Woocommerce author, as outlined in this post.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Objects cannot be rendered inside JSX. An error is thrown stating that Objects are not allowed as a React child, with the specific object being [object Promise]

Within my React project, I have a Class-based component that serves as a child component. The state it relies on is passed down from a parent component. Within the JSX of this component, there is a map function that iterates over a platformsList array. Whi ...

javascriptreactjspromise

The hierarchy of script loading in Angular applications

After years of working with MVC, I recently delved into Angular. Although I am well-versed in JavaScript and HTML, I'm still a beginner in the world of Angular. I spent hours troubleshooting my app only to realize that the problem was elusive. The a ...

javascriptangularjs

I aim to convert this code from a class component to a functional component within React

I need help merging two different JavaScript files, one in a functional component and the other in a class component. I am new to ReactJS and class components, so I am looking to convert the class component file to a functional component. Any assistance in ...

javascriptreactjs

Angular directive for displaying telephone numbers in the USA format

I recently came across a great solution for formatting USA telephone numbers on StackBlitz. However, I'm now wondering how to add the country code "+1" to the beginning of the telephone mask. Ideally, it should look like: +1(123) 234-2345. ...

javascriptregexangulartypescript

Creating a map with markers using the Google Maps API

I recently started working with the Google Maps API and wanted to add a marker to a specific location. I went through the documentation and attempted to implement it on my website, but encountered several undefined errors in the process. Here is the code s ...

javascriptgoogle-maps

How can I dynamically update the content of the right side of the side navbar by clicking on navbar links?

I have a side-navigation bar with content on the right side. How can I display specific content on the right side when clicking on a navigation link? For example, only show the name when clicking on the name link and only show the password field when click ...

javascripthtmlcssbootstrap-5

The item holds significance, but when converted to a Uint8Array, it results in being 'undefined'

Hey there! I have a Uint8Array that looks like this: var ar = new Uint8Array(); ar[0] = 'G'; ar[1] = 0x123; The value at the second index is a hexadecimal number, and I want to check if ar[1] is greater than zero. So I wrote this code: if(ar[1 ...

javascriptarraysbinaryhex

Adjusting the CSS for the navigation bar to make it fully cover the background with color

One of the challenges I'm facing is related to styling my webpage. I have created an inline navigation bar, but when I attempt to change its background color, it doesn't fill the height as desired. I am interested in finding a solution that will ...

javascripthtmlcssnavbarnav

Creating a dynamic duplication feature for a form's text area

As a newcomer to the world of Javascript, I am embarking on creating a review-writing page. However, I have hit a roadblock in my progress. The main issue I am encountering is implementing a button that allows users to add a new section by duplicating an ...

javascripthtmlckeditor

Sending an attribute to the Treeselect Vue component from a Laravel view

I want to encapsulate Vue-Treeselect link: within its own custom vue component. This way, I can easily use something like <tree-select></tree-select> in a Laravel view file where needed. However, the challenge I'm facing is figuring out ...

javascriptlaravelvue.js

CSS - Help! Seeing different results on Internet Explorer

I'm currently handling an OSCommerce website, and I'm trying to figure out why this issue is occurring. You can view the website at this link: The layout looks completely different on Internet Explorer, and I'm puzzled as everything should ...

javascripthtmlcssinternet-explorergoogle-chrome

The issue with updating state in React using dispatch within the same method is not working

Initially, I had a situation where the state was updating correctly with two separate methods (onClick). const sizesMeasureChoise = useSelector(getSizesMeasureChoise); const chooseMeasure = (measure) => { dispatch(setSizeMeasureChoise(measure)); ...

javascriptreactjsreduxdispatch

Utilizing Selenium for Form Submission in Python

Is there a way to extract data hidden behind hyperlinks on this website? These hyperlinks trigger JavaScript function calls that submit a form using the POST method. I've come across Selenium as a potential solution. My question is, how can I set a va ...

javascriptpythonformsselenium

Implementing React.JS to dynamically update a value from a websocket and store it within

I want to create a dynamic stock price table that updates with live stock prices using websockets. I have all the necessary data and need to update my stock price object with the live price. How can I access the variable and insert the value into the obj ...

javascriptreactjs

jQuery's load function isn't able to trigger actions on the DOM

Dealing with a straightforward page that dynamically loads content using jQuery's load function to append it to a div. The issue is arising after the loading process, as the jQuery functions I've implemented fail to respond to click events. In a ...

javascriptjquerydom

Displaying an Ajax progress bar during the page loading process

For my current project, I am required to implement a progress bar during the Page load event. The scenario involves receiving a request from another application, which triggers the creation of a PDF file on my page. Since this process can be time-consumi ...

c#jqueryajaxvisual-studio-2010

Display images in a rating system using Angular's ng-repeat directive

Need help with modifying star images based on ratings? I have two PNG files, one with an empty star and one with a full star. My goal is to dynamically adjust the number of stars displayed depending on the rating given, which ranges from 1 to 5. However, m ...

javascriptangularjs

Error encountered: Attempting to change the mode of THREE.TransformControls, but THREE.TransformControls is not defined

I've been working with the TransformControls package (you can find it here: https://github.com/lucascassiano/three-transform-controls). While the transform controls appear to be functioning mostly fine, they are causing two major issues in my applicat ...

javascriptthree.js

Tooltip Bootstrap timing

I am currently working on creating a navigation bar with icon-only buttons that display tooltips when touched or tapped. Here is the code I have implemented: $('a[rel="tooltip"]').tooltip({ animated: 'fade', placement: ' ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for showing only the date (excluding time) from a get operation in javascript (specifically using node js and mysql)

I recently built a CRUD application using Node.js and MySQL. However, I am facing an issue where I am unable to display the date without the time and in the correct format. { "id": 1, "name": "Rick Sanchez", "dob": & ...

javascriptmysqlnode.jsexpress