Black Friday Sale! Get up to $40 off GP Premium!Learn more

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

Home Forums Support BLOCKUI not showing up correctly when WooCommerce checkout is button is clicked

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #413931
    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?

    GeneratePress 1.4
    GP Premium 1.4.3
    #414006
    Tom
    Lead Developer
    Lead Developer

    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?

    #414474
    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

    #414667
    Tom
    Lead Developer
    Lead Developer

    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.

    #543995
    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

    #544207
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    #544670
    Rado

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

    #544881
    Tom
    Lead Developer
    Lead Developer

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

    #544976
    Rado

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

    #545960
    Tom
    Lead Developer
    Lead Developer

    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' );
    }
    #546029
    Rado

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

    #546571
    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

    #546642
    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…

    #546666
    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…

    #546909
    Tom
    Lead Developer
    Lead Developer

    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;
    }
Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.