Checkout Widget — BlockUI Bug

Meanwhile, I have updated the BlockUI element to display:none. Let me know if this workaround has any negative impact?

Hey there! Thanks for contacting us. I’m happy to help you.

It sounds like you’re experiencing a hiccup with the BlockUI element on your local checkout page. That can be a bit frustrating, but let’s dive in and get this sorted out for you.

First off, kudos for identifying that hiding or deleting the BlockUI element allows you to proceed with the order. That indicates the specific culprit causing the obstruction.

To further troubleshoot, here are a couple of areas to explore:

1. Theme or Plugin Conflict: Sometimes, certain themes or plugins can conflict with the BlockUI element, causing it to persistently display.
   
   To test, you’ll first want to change the theme on your site to Storefront, then check to see if the issue is still present. If that resolves the issue, you’ll want to get in touch with your theme’s developer and see if they have an update or fix for you. If changing the theme doesn’t help, you’ll want to deactivate all plugins except for WooCommerce and take a look. If that fixes the problem, re-enable the other plugins one by one (gradually), checking after each, to see where the issue is coming from. You can find more about this in this guide.
2. Console Errors: Open the browser’s developer tools (usually by pressing F12) and navigate to the Console tab. Any errors displayed there, particularly related to JavaScript or the BlockUI element, might offer clues about what’s causing the persistent display.

If you face any issues or have any questions, please let us know so we can assist you further.

Have a wonderful day!

Hey @carolm29,

Thanks for the prompt response — been hectic so haven’t got the chance to respond.

I have tried all 3 items that you mentioned. But still am unable to resolve the issue

Plugins

I have disabled all plugins except for the following

• Elementor
• Elementor Pro
• Woocommerce

The above plugins are required for my pages to load so that I can load the shop page and the woocommerce widgets (that was inserted using the elementor page builder)

However, when going through the purchase flow:

• Add item to cart
• Proceed to view cart, and then proceeed to checkout
• Try to complete checkout, unable to — because UI blocks the purchase order button

Theme

I have re-enabled all my plugins

Installed and activated the shopfront theme

You can see that the shopfront theme is activated because the UI is also different in my local test page.

However, the UI Block issue continues to persist:

Console Log Error

There are no errors logged to the console

Thanks again in advance, do let us know if further information is required to investigate this mind boggling issue lolol. Thanks!!

Hey, @walakaka!

Thanks for the information.

Just to confirm, you also tried changing the theme to Storefront, correct?

While it is possible that Elementor is causing the issue, let’s try to investigate other fronts first, okay?

Can you please clear cache and cookies to make sure they are not interfering with anything?

Furthermore, I’d like to understand your site properly. Please share with us the System Status Report which you can find via WooCommerce > Status > Get system report > Copy for support.

Thank you!

Looking forward to your reply.

Have a wonderful day!

Hey @carolm29,

Yeap — we changed the theme to storefront, as per displayed in the screenshots in the trailing comments (under the Theme header). Resharing the screenshot here for ease of reference:

We can confirm that cache cookies — in the browser, and server side has been fully cleared. On client side, we also tested in incognito..

These are the screenshot for my woocommerce system status, hope this is sufficient information. Do let me know if there is more information required!

Note: I have switched back to the Astra Theme because the Storefront theme did not fix the issue. The exact same UI block issue persists even when using the Storefront theme

Hello walakaka

Thank you for your reply and providing SSR.

Could you please share a link to any product that I can use to go through the checkout process? I visited your website but could not find any Shop or Product page. I only see the Booking button for appointments.

Once I can replicate the issue on my end, I will be able to diagnose the issue and find a solution.

Looking forward to your response. ??
Have a great day!

Edit:

• I have removed the workaround
• You can replicate the issue by following the steps below:
  • Access https://staging.petcoach.sg
  • Hover your mouse over the Explore navigation menu. This will list out several options in a dropdown
  • In the dropdown, select Shop. This will take you to the product list page.
  • In the product list page, select Add To Cart for any of the products. This will take you to the cart page
  • In the cart page, hit the Proceed to Checkout button. This will bring you to the checkout page.
  • Here, in the checkout page, you will be able to see that the block UI element does not disappear

___

Hey @doublezed2,

Yes — I think you were on our PROD site. We received the test booking.

The shop page is not yet live, hence you can find it at our staging site here: https://staging.petcoach.sg — Please note that we have hidden the UI block element using CSS.

But you should still be able to see it in the html. Do let me know if you want me to remove the workaround so that you can replicate the issue?

Thank you.

• This reply was modified 11 months ago by walakaka.

Hey @doublezed2,

I have removed the workaround. You can refer to my previous message for more details on how to replicate the issue.

Thank you

Hey walakaka

Thank you for providing the correct URL for the shop page.

I am now able to replicate the error on my end and can see the problem.
However, there is a lot of code coming from Astra and Elementor which is making the inspection process difficult.

Make make things simpler could switch to the Storefront theme once again? This way I can compare your site with my Testing site and find out from there this issue is stemming.

I appreciate your patience while I look into this problem and find a solution. ??

Hey hey @doublezed2,

Noted with thanks — we have reverted the theme to use the storefront theme.

Do let us know if there are any other items we could help you with ??

Thank you in advance, and look forward to hearing your updates soon!

Hello @walakaka,

Thank you for sharing the screenshot!

I checked the page and seems like there’s a problem with the initial AJAX call when the page loads. If you try switching countries, shipping or anything else to trigger ?wc-ajax=update_order_review and everything will start working as expected.

Link to image: https://d.pr/i/JSRJui

This usually happens if the URLs in Settings > General don’t match.

Link to image: https://d.pr/i/CMRgYw

If they already are, I suggest disabling all plugins, including Elementor, and Elementor Pro and trying again.

Let us know how it goes!

Hi @babylon1999,

Wanted to share with you that the issue has strangely fixed itself, without any updates made to any themes or plugins.

The issue was resolved both on my local and the staging site.

You may proceed to check it

Do let me know if there is anything else we should be concerned about.

Else will mark this as resolved.

Hello,

I’m glad to hear that your issue has resolved itself.

If you encounter any further issues, or if you have any other questions or concerns, please don’t hesitate to reach out.

Cheers!