[Support request] BLOCKUI not showing up correctly when WooCommerce checkout is button is clicked

[Domain]

I would expect that blockui would overlay just about everything on the page as soon as the checkout button is clicked but that is not happening in my case. I click the button and the only thing that blockui is acting on is the alert at the top of the page. This would no doubt lead to double submits, etc.

I tried to see if the same thing is happening on the demo site but the checkout is disabled.

I’m also not seeing any console errors.

Are you able to replicate this issue in your environment?

[Tom]

I’m not sure I understand. Are you initiating BlockUI (http://malsup.com/jquery/block/) when the checkout button is clicked manually using your own jQuery?

[Domain]

Hey Tom! No I am not triggering or modifying it at all. I would expect that it would automatically be triggered and would overlay the “Your order” section, including the “Place Order” button as soon as the “Place Order” button is clicked. But that is not happening in my case.

So I would think that it would look something like this: https://transfer.sh/1XVM7/Screen-Shot-2017-11-01-at-1.23.15-PM.png (which I only got to happen by accident when restarting my browser)

But as it stands, when I click “Place Order” there is no indication in the UI that it is thinking, except at the top of the screen which is out of sight.

EDIT: Also, I have deactivated all plugins except for WooCommerce, ACF and GP Premium and this is still happens.

Hope that helps.

Dustin

[Tom]

This might be something you need to bring up with WooCommerce, as the checkout page is handled by their code 100%. If there’s something not working on their end, they’ll definitely want to know about it.

[Rado]

Hi Tom,

same problem here. When I deactivate GP-Premium, BlockUI works as expected. When I activate GP-Premium, BlockUI does not block anything. Same problem btw. with CSS Hero 3. If either of these plugins are active, BlockUI does not work after pressing the submit order button. I made a short screen-video, so that you can see for yourself.
Any ideas on how to proceed?

Thanks for your input, Rado

[Tom]

Hi there,

Your video isn’t working – can you double check?

[Rado]

My fault, sorry. Set it to private accidently. Should work now…

[Tom]

Can you deactivate modules in “Appearance > GeneratePress” one by one to check which module is causing issues?

[Rado]

It’s the Woocommerce module. I can send you login credentials for my test site if that helps.
Best regards, Rado

[Tom]

Hmm, what’s going on here..

I wonder if it’s something in the javascript.

What happens if you add this function?:

add_action( 'wp_enqueue_scripts', 'tu_disable_wc_script', 101 );
function tu_disable_wc_script() {
    wp_dequeue_script( 'generate-woocommerce' );
}

[Rado]

ok, I put that in my functions.php, but that has no effect, sorry.

[Rado]

The error must be somewhere inside woocommerce.min.css. If I rename it, BlockUI works when submit is pressed. As I’m not a Pro in debugging, I don’t know how to debug the scenario, because when I press submit, the BlockUI jscript injects lots of css into the page, but just for a short period of time. I don’t know how to freeze that, so that I could debug it.
You probably know how to do that.
Best regards, Rado

[Rado]

Ok, I was able to pin down the problem. Inside woocommerce.min.css is the definition

#customer_details+#wc_checkout_add_ons,#order_review,#order_review_heading {
 width:41.1764705882%;
 float:right;
 margin-right:0
}

If one deactivates the float:right; statement, blockUI works (but the layout will be broken). Looks like BlockUI does not like the float:right statement for some reason…

[Rado]

I did compare that css statement to the changes I made with CSS-Hero. The problem is the selector #order_review with the float:right statement. If I change that in both css files, blockUI is back on track.
Don’t know why that causes problems with BlockUI…

[Tom]

That’s super strange. You could try adding this custom CSS so you don’t need to edit files:

#customer_details + #wc_checkout_add_ons,
#order_review , #order_review_heading {
    float: none !important;
}

[Author]

Posts