Issue with WooPayments and Woodmart Theme

link: https://woocommerce.com/payments/
Run your business and manage your payments in one place with the solution built and supported by Woo. Accept online and in-person payments, track revenue, and handle all payment activity from your WooCommerce store’s dashboard with WooPayments.

This plugin is specifically designed by WooCommerce for payment gateways.

I noticed that after installing and activating this plugin on my website, which uses the Woodmart theme, when I add an item to my cart and then empty it, the AJAX response confirms the item has been removed. However, the item remains visible in the mini cart displayed in the navigation bar until I manually refresh the page for it to update properly.

You can see the issue here: https://jmp.sh/cwixkrXB

When I disable the plugin, everything works perfectly! The mini cart updates automatically without requiring a page refresh.

You can see the difference here: https://jmp.sh/LK23AAlC

Your theme should be compatible with this plugin. I’ve tested multiple payment gateways, and the form that is usually embedded tends to disappear. This is why I’ve switched to using WooPayments, as it seems to work best. However, I need a fast solution for this issue. Additionally, the plugin is causing console errors, as shown in the attached screenshot for reference.

v3/?ver=3.0:1 Uncaught 
TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at product-details.js?ver=8.1.0:1:32581
    at v3/?ver=3.0:1:96826
    at Array.forEach (<anonymous>)
    at c._emit (v3/?ver=3.0:1:96767)
    at c._emitEvent (v3/?ver=3.0:1:351036)
    at v3/?ver=3.0:1:311866
    at v3/?ver=3.0:1:96884
    at Array.forEach (<anonymous>)
    at c._emit (v3/?ver=3.0:1:96767)
    at e._handleMessage (v3/?ver=3.0:1:90388)

Attachments:

You must be logged in to view attached files.

[leejay123]

Before you say “Please disable any plugins that are not directly related to our website’s theme, Please ensure that you only keep the following plugins that are necessary for our theme to work correctly”
I have already one this too! Issue still the same!
– WoodMart core
– WooCommerce
– Elementor/WPBakery Page Builder

• This reply was modified 3 months, 4 weeks ago by leejay123.

https://wordpress.org/support/?post_type=topic&p=17974223#new-topic-0

Hello,

Thank you for reaching out.

The issue you’re experiencing with the mini cart not updating automatically when using the WooPayments plugin seems to be a compatibility matter that may extend beyond the WoodMart theme. To help you troubleshoot further, I recommend testing this functionality with the WooCommerce Storefront theme, which is WooCommerce’s official theme. This will help determine if the problem is tied to the WoodMart theme or if it’s more likely an issue with the WooPayments plugin itself.

Here are the steps to follow:

1. Switch to the Storefront theme (temporarily).

2. Test the mini cart behavior with WooPayments activated.

3. If the issue persists with the Storefront theme, it suggests that the problem lies with the WooPayments plugin rather than WoodMart.

Additionally, the console error you provided may be a JavaScript issue related to how WooPayments interacts with themes. If this issue also happens in the Storefront theme, it would confirm that WooPayments is the source of the conflict.

Let us know the results of this test, and we’ll gladly assist you further in resolving this issue.

Best regards

[leejay123]

Thank you for your response!

I have temporarily installed and activated the Storefront theme as requested! After testing the mini cart behavior with WooPayments enabled, everything worked perfectly, and there were no console errors. Therefore, this issue seems to be related to the WoodMart theme and not the WooPayments plugin.

View video here of Woodmart (Activated)
https://jmp.sh/pu2x21kK

View video here of Storefront (Activated)
https://jmp.sh/vXEDEecT

Please note that the only plugins activated on my website during these two tests are:​
Woodmart Core
WooCommerce
WooPayments
Elementor

Additionally, while my site is currently in production mode, I have completely disabled Varnish, Cloudflare, and Object Cache. I have no caching plugins active, and I’ve cleared my browser cache and tested with different browsers.

Please also note that my theme and all plugins are fully up to date!

I have left the WP login details In the Private content area for you to check further!

• This reply was modified 3 months, 3 weeks ago by leejay123.
• This reply was modified 3 months, 3 weeks ago by leejay123.

Further to the above, you can check the support topic i created with WooPayments https://wordpress.org/support/topic/not-compatible-with-the-woodmart-theme/#post-17974876.

As you are aware I have done the conflict test mentioned above and It comes In relation to the Woodmart theme and not any plugins!

Please see there response below!

It sounds like the issue you’re experiencing may be due to a conflict with your theme or another plugin, rather than anything to do with WooPayments. The best way to determine this is to:

Temporarily switch your theme to Storefront or Twenty Twenty-Four
Disable all plugins except for WooCommerce and WooPayments
Repeat the action that is causing the problem

If you do not see the same problem after completing the conflict test, then you know the problem was with the plugins and/or theme you deactivated. To determine which plugin is causing the problem, reactivate your other plugins one by one, testing after each, until you find the one causing conflict. You can find a more detailed explanation on how to do a conflict test here.

I hope that helps! Let me know once you have done a conflict test!

Hello,

Thank you for the detailed follow-up. Since you’ve confirmed that the issue only occurs with the WoodMart theme and not with the Storefront theme, we will need to investigate this further ourselves.

Please keep all non-essential plugins disabled while we conduct tests on the site. We’ll look into the conflict between the WoodMart theme and WooPayments to pinpoint the cause of the issue.

Once this is complete, we will provide an update on how to resolve it.

Best regards

Thank you for your prompt response!

I will refrain from making any changes to the site or activating/disabling any plugins while you continue to investigate the issue. The following plugins will remain activated:

• WoodMart Core
• WooCommerce
• WooPayments
• Elementor

It looks like the password is wrong and we can’t enter your dashobard.

Please try again, I done password reset.

Hello,

Please send us your FTP access as well so we can check what is wrong.

Kind Regards

As requested, I’ve attached the FTP details. Could you please provide an estimated timeframe for completion? I initiated this topic on August 25.

Try to add the following PHP code snippet to the child theme functions.php file to fix this

add_filter( 'woodmart_update_fragments_fix', '__return_false' );

I’ve added the code to the functions.php file of the Woodmart child theme, cleared the cache, and tested again, but the issue persists.

[leejay123]

The issue seems to be related to the AJAX functionality.

When I remove an item from the checkout page, the page refreshes and redirects me directly to an empty cart and the mini cart updates, which works as expected.

However, when I remove an item from the cart page, the page does not refresh and instead uses AJAX to redirect to the empty cart page. The mini cart, however, does not update accordingly.

Please try it out yourself!

Additionally, I’ve noticed that the console errors on the cart page have disappeared. These errors were gone even before I added the following code to the child theme’s functions.php file:

add_filter( 'woodmart_update_fragments_fix', '__return_false' );

Could you let me know what steps you took to resolve the console errors? I’d like to have this information so that if the issue arises again, I can apply the same fix.

I’ve also noticed another issue related to the mini cart. Our website uses WooCommerce to display shipping costs. When a user adds an item to the cart, the shipping cost is automatically selected, as shown here: https://gyazo.com/5b152729b92a70530e7eb01012af31ef. However, the shipping cost does not appear in the mini cart.

Could you please advise on how to address this issue?

• This reply was modified 3 months, 3 weeks ago by leejay123.

[leejay123]

Apologies for the barrage of messages earlier. I realized that the child theme wasn’t activated, which is why the following code wasn’t working:

add_filter( 'woodmart_update_fragments_fix', '__return_false' );

Now that the child theme is active, the mini cart is correctly updating when an item is removed from the cart.

Additionally, I’ve noticed that the console errors on the cart page have disappeared. These errors were gone even before I added the following code to the child theme’s functions.php file.

Could you let me know what steps you took to resolve the console errors on the cart page, I’d like to have this information so that if the issue arises again, I can apply the same fix.

However, I’ve noticed another issue regarding the mini cart. Our site uses WooCommerce to display shipping costs. When a user adds an item to their cart, the shipping cost is automatically selected, as shown here: https://gyazo.com/5b152729b92a70530e7eb01012af31ef. Unfortunately, the shipping cost is not showing in the mini cart.

Additionally, I’m now seeing this issue on the checkout page: https://gyazo.com/053fe9f898424058d47bef29ddbab16b.

Could you please advise on how to resolve these issues?

• This reply was modified 3 months, 3 weeks ago by leejay123.

Hello,

Could you please test both issues with the default theme now?

Kind Regards

[leejay123]

As per your earlier request, I added the following code to the functions.php file of the Woodmart child theme:

add_filter( 'woodmart_update_fragments_fix', '__return_false' );

After implementing this code, the mini cart issue was successfully resolved on the Woodmart child theme. However, since I have not yet applied this snippet to the non-Woodmart child theme, the mini cart issue persists on that site, unless I switch to the child theme where the snippet has been implemented.

That being said, despite adding the code, I am still encountering the issue as shown in the following screenshot: https://gyazo.com/053fe9f898424058d47bef29ddbab16b
This error seems to come and go! I cannot make out why!

In addition, I’ve noticed that the shipping cost is not automatically added to the mini cart by default. While I mentioned this in my previous message, you can ignore it for now. However, it would be a valuable improvement if this functionality could be considered for a future update.

Finally, I observed that when removing an item from the cart on the checkout page, the entire page reloads, which differs from the cart page where Ajax is used for updates. Could you explain why Ajax isn’t being utilized on the checkout page for this functionality? It would provide a more seamless experience if the behavior was consistent between the cart and checkout pages.

Furthermore, as I’ve mentioned multiple times but still haven’t received a response on, I noticed that the console errors on the cart page have disappeared, as shown below. These errors were resolved even before I added the following code to the child theme’s functions.php file:

add_filter( 'woodmart_update_fragments_fix', '__return_false' );

Could you let me know what steps you took to resolve the console errors on the cart page, I’d like to have this information so that if the issue arises again, I can apply the same fix.

v3/?ver=3.0:1 Uncaught 
TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at product-details.js?ver=8.1.0:1:32581
    at v3/?ver=3.0:1:96826
    at Array.forEach (<anonymous>)
    at c._emit (v3/?ver=3.0:1:96767)
    at c._emitEvent (v3/?ver=3.0:1:351036)
    at v3/?ver=3.0:1:311866
    at v3/?ver=3.0:1:96884
    at Array.forEach (<anonymous>)
    at c._emit (v3/?ver=3.0:1:96767)
    at e._handleMessage (v3/?ver=3.0:1:90388)

• This reply was modified 3 months, 3 weeks ago by leejay123.

Hello,

We just tested your website and don’t see any errors in the console https://gyazo.com/6d0b20e58712480e25da87ad2997fe0a
As for the cart JS error, we have fixed it by adding additional class to the cart totals element cart-collaterals
https://gyazo.com/a0218f0b27d3ee2c0a82f899f980a5f1

Unfortunately, there is no option to make removing from cart with AJAX on the checkout page.

Kind Regards

As I’ve stated multiple times, this issue happens specifically on the Cart page. In the screenshot you provided, it seems you are on the homepage, which is not where the issue occurs – https://gyazo.com/6d0b20e58712480e25da87ad2997fe0a

The Cart page can be accessed at https://iblazevape.co.uk/cart/. I have retested, and the console errors are consistently appearing on both the Cart page and the Checkout page https://iblazevape.co.uk/checkout/

I understand that you added the code below to fix the console errors, and initially, the errors disappeared, but now they have reappeared even though the code is still in place in the “cart total element” – https://gyazo.com/a0218f0b27d3ee2c0a82f899f980a5f1

Relevant code in question:

cart-collaterals

I have created another video demonstrating the issues I am experiencing. This is clearly a conflict between your theme and WooPayments. As we have established from the beginning of this conversation, we have already conducted a conflict test which confirmed that this is a theme-related issue.

We previously resolved the mini cart issue by adding the following code into the PHP functions, but this does not resolve the other problems I am facing:

add_filter( 'woodmart_update_fragments_fix', '__return_false' );

Problem (1): Console errors on the Cart page

As demonstrated in this video https://jmp.sh/AsZscbNS, there are no console errors on the homepage. However, when navigating to the Cart page, the errors begin to appear. Additionally, as shown in this screenshot https://gyazo.com/122b2460161c059789168f9daee71e8e, there is unwanted space between the total £ amount and the “Proceed to Checkout” button. Upon inspecting the elements, I found that WooPayments is inserting code into the page, causing this issue. Please review this yourself by following the guidance provided in the video.

The solution I found to eliminate the errors on the Cart page and resolve the spacing issue between the total amount and the “Proceed to Checkout” button is to disable Klarna payments in the WooCommerce/WooPayments settings, as shown here: https://gyazo.com/628924b3ca4c1cfbe6c8da9c1500b18f. However, this should not be necessary, as I want to offer Klarna as a payment option to my customers.

Problem (2): Console errors on the checkout page
As shown in this video (https://jmp.sh/Hgb7vFcT), when accessing the mini cart and clicking on the checkout, no console errors appear. However, when navigating to the Cart page and clicking “Proceed to Checkout,” a different console error appears, separate from the previous ones. It seems that a script is not loading properly. I have enabled CORS (Cross-Origin Resource Sharing) settings through Cloudways and even tried disabling them to troubleshoot the cause of the issue!

Problem (3):
I have created a separate discussion for this issue: https://xtemos.com/forums/topic/issue-with-mini-cart-and-custom-empty-cart-layout/

As you are fully aware, I have tested this issue with a different theme while only having the following plugins activated: Woodmart Core, WooCommerce, WooPayments, and Elementor. Everything works fine with these settings, confirming that the problem is specific to your theme, as there are no issues when using the Storefront theme or others.

Please take the time to read this carefully, as I initially started this topic on August 25, and it seems there is some misunderstanding. I have detailed all the current issues in this topic, and I urgently need a complete solution to all the problems ASAP.

Hello,

1. We checked this on the cart page as well. Here is a screenshot https://gyazo.com/710af0ac704f94781efaed059edfe00a

2. Here is a screenshot from the Checkout page https://gyazo.com/03f53b26fbdbe99526179f1b7c43801a

3. Please continue the conversation about that issue on a separate topic with my colleague.

Kind Regards

[leejay123]

As I mentioned in my previous message, the solution I found to eliminate the errors on the Cart page and resolve the spacing issue between the total amount and the “Proceed to Checkout” button was to disable Klarna payments in the WooCommerce/WooPayments settings, as shown here: https://gyazo.com/628924b3ca4c1cfbe6c8da9c1500b18f. However, this should not be the case, as I want to offer Klarna as a payment option to my customers.

Please try again—log back in, enable Klarna, then disable it, and follow the steps I outlined above to observe the errors firsthand. Make sure to test both Problem 1 and Problem 2 as previously described.

• This reply was modified 3 months, 3 weeks ago by leejay123.

Hello,

Try to use the following custom CSS code to fix the first issue

.cart .quantity label {
	font-size: 16px!important;
}

As for the second one, we still can’t reproduce it even when the Klarna is enabled.

Kind Regards

Also, it doesn’t work with the custom layout because of the sticky container option. You need to disable it in order to make it work with the custom layout https://gyazo.com/f95db6ee1f598f2485b9b9a7f9099998

You’re absolutely correct; the sticky container is causing a conflict and leading to console errors on the cart page located at https://iblazevape.co.uk/cart/. Although I can still use the custom layout, I need to disable the sticky container to prevent these errors from appearing. Can you help identify the root cause of the conflict between the sticky container and the cart page/WooPayments, Ideally, I would prefer to keep the sticky container enabled.

I also tried adding the following CSS code, but it only changes the font size of the title for the cart/basket total and I still see the unwanted space between the total £ amount and the “Proceed to Checkout” button.

.cart .quantity label {
	font-size: 16px!important;
}

Have you found a solution for problem 2? We are still encountering this console error even when the sticky container is disabled and the above code is added to the global theme CSS within Woodmart. You mentioned that you couldn’t reproduce the issue even when Klarna is enabled, but the error is still appearing for me across all browsers.
– https://gyazo.com/84802f9ce26bf36cea7134a70d42904a

We implemented custom code that successfully resolved the console errors related to the paymentMethodMessaging element on the cart page, https://iblazevape.co.uk/cart/, specifically addressing the error: Uncaught IntegrationError: paymentMethodMessaging Element didn’t mount normally. This solution also fixed the spacing issue between the total amount and the “Proceed to Checkout” button, as described for problem one.

Furthermore, by not loading WooPayments on the cart page and only on the checkout page, it allows us to use a custom layout for the cart page and maintain the functionality of the sticky container without conflicts.​

What We Did:

(1) Disabled WooCommerce Payments Plugin on the Cart Page: We used code to temporarily disable the WooCommerce Payments plugin specifically on the cart page to prevent conflicts that were causing console errors.

(2) Dequeueing and Deregistering Scripts: We targeted and removed specific WooCommerce Payments and Stripe scripts that were causing the paymentMethodMessaging element to fail mounting properly. This helped prevent the associated errors from appearing in the console.

(3) Blocking External Stripe Scripts: Additional filtering was applied to block external Stripe scripts from loading on the cart page, further ensuring that the unwanted elements did not render and cause errors.
Suppressing Console Errors: We included a script to suppress any remaining Stripe is not defined errors, which improved the overall page performance and user experience by keeping the console clean.

Why We Did This:

Prevent Console Errors: The primary goal was to eliminate the console errors that were interfering with the functionality and display on the cart page.

Fix Spacing Issues: By removing the conflicting elements and scripts, we also resolved the spacing problem between the total amount and the “Proceed to Checkout” button.

This approach has stabilized the cart page, but we would appreciate your insight or any additional recommendations you might have to refine this further.

i tried to share the code but Wordfence blocks It!

Howver we still have issue with problem 2

Hello,

Regarding the sticky container option, it relies on a JavaScript library that duplicates the HTML content of the container to ensure smooth functionality. Unfortunately, this duplication triggers an error with the plugin because it affects the totals block, leading to a conflict. At the moment, there is no workaround for this issue, as it’s a limitation of how the sticky container operates with certain plugins.

As for the checkout error, we’ve thoroughly tested the scenario again and, despite multiple attempts, we have been unable to reproduce the issue on our end. Additionally, no errors are appearing in the console during our tests. This suggests that the issue might be specific to your environment or configuration.

Kind regards,

[Author]

Posts