Conflict with WooCommerce and Elementor Cart Widget

[olegdksn]

• [x] I've read and understood the contribution guidelines.
• [x] I've searched for any related issues and avoided creating a duplicate issue.

Please give us a description of what happened.

Yoast causes to the Elementor Cart widget to show a cart preview.

This happens when creating a Product Category in WooCommerce and adding a Elementor Template Shortcode in the product category description. Example shortcode: [elementor-template id="1234"]. Important note: This problem only occurs if we use a WooCommerce Widget in the Elementor Template.

This causes the shopping cart to be displayed incorrectly on this site.

The Elementor Cart widget should display the current cart value. But instead it displays the cart preview (showing the added products).

On any other site it's still displayed correctly. I deactivated all other plugins except of Elementor but the problem still persists.

The cart is displayed correctly when Yoast Plugin is deactivated. So this issue is definitely related to Yoast.

I could reproduce the same issue on another Wordpress installation.

Please describe what you expected to happen and why.

The Elementor cart widget should show the value of the cart. By pressing the button it should slide in a cart preview with all added items.

But when the Yoast SEO plugin is active the Elementor cart widget instead displays the preview directly.

How can we reproduce this behavior?

1. Add a product category in Woocommerce.
2. Create an Elementor Template with an Elementor Cart widget anywhere in that template. OR add the Elementor Cart widget in the global Header.
3. Important: Add any WooCommerce Widget (additonal to the Elementor Cart widget) in the Elementor Template. Example: Woocommerce Products Widget.
4. In the product Category add the Elementor Template by using a short code, for example [elementor-template id="1234"]

Technical info

• If relevant, which editor is affected (or editors):
• [x] Classic Editor
• [x] Gutenberg
• [ ] Classic Editor plugin

• Which browser is affected (or browsers):
• [x] Chrome
• [x] Firefox
• [x] Safari
• [ ] Other

Used versions

• WordPress version: 5.9.2
• Yoast SEO version: 18.3
• Gutenberg plugin version:
• Classic Editor plugin version:
• Relevant plugins in case of a bug:
• Elementor & Elementor Pro
• Tested with theme: Hello Elementor 2.5.0
• PHP Version: 7.3.31

[Djennez]

@olegdksn I am unable to reproduce this issue. Can you be a bit more descriptive in your reproduction steps? The current ones leave a lot of room for interpretation;

• There are multiple cart widgets
• How to use the template?
• Where to use the template?

[olegdksn]

1. This issue is happening with the "Elementor Menu Cart Widget (Pro)".

This widget should be in the global header of the site. (Altough this error also occurs if we add this widget anywhere in the Elementor Template)

2. Create a new Elementor Template (Type: Section). This template should include at least one Elementor Woocommerce Widget.

3. Add a new Product Category.

The description of this product category should look like this (only an elementor shortcode): [elementor-template id="1234"].

4. Open this product category page. Here the cart widget is shown as a cart preview.

• So basically we create an Elementor Template (type: section).
• Take the shortcode of this template.
• Create a new product category.
• Add the shortcode as the description of this product category.

[Djennez]

Hmmm, I'm not able to reproduce this. This all seems to work as intended. Maybe another plugin that is in the way somewhere?

Steps taken:

1. Created a template section:

2. With a cart item:

3. Add the template to a product category:

4. Looking at that category page on the frontend, I see the widget:

5. Clicking the widget, I see the sidebar pop-in:

[olegdksn]

Thanks for the quick response.

We set up a new Wordpress installation to test this one more time.

Active Theme: Twenty Twenty-One.

Only necessary plugins installed:

• Elementor
• Elementor Pro
• WooCommerce
• Yoast SEO

And we could reproduce the same error again.

Here's another description on the steps we took.

1. I created a new Elementor Template. Here I add only the Elementor Pro Menu Cart Widget.

2. I take the Shortcode of that Elementor template.

3. Create a new Woocommerce product category. Add that Elementor template shortcode as the description of this category.

As shown on the following screenshot if I view the product category site, it shows the cart preview:

Hopefully that helps. I would be happy to give you access to our test site if you would like to have a look yourself.

[Djennez]

So in that example, if you put items in the cart, it will show those products where it's now printing No products in the cart?

[olegdksn]

Yes exactly. Here is a screenshot with an item added to the cart:

[Djennez]

Hmmm, might be the theme, or something else, but it looks like we took the same steps to reproduce and both got different results.

[olegdksn]

Thanks for testing this. I played around with some themes. You are right the theme definitely influences this.

This problem is fixed with the "Twenty Twenty-Two" theme. It is there with "Twenty Twenty-One" theme. And also with the "Hello Elementor" theme we still have that error.

With both the "Twenty Twenty-One" and "Hello Elementor" theme the problem is fixed when Yoast Plugin is deactivated.

So it seems to be a kind of conflict with Yoast and some themes.