Hi XStore team,
I’m running XStore with Elementor on a WooCommerce + WPML bilingual site (FR/EN). I have a cart drawer widget configured as Off-Canvas, position Right, with “Automatically open canvas” enabled.
The problem:
The drawer renders correctly when the cart is empty — proper layout, buttons styled, everything looks good. But as soon as there are items in the cart, the drawer loses all its CSS styling. The items appear as unstyled plain text with no layout, the “View Cart” and “Checkout” buttons are unstyled, and the product grid layout breaks completely.
What I’ve already tried:
Disabled SG Cache completely (tested in incognito with no cache plugins active — problem persists)
Regenerated Elementor CSS files & data
Enabled “Always load wc-cart-fragments”
Disabled Ajaxify, dropdown cache, forced cache, flying pages in XStore speed options
Tested on both FR and EN versions of the site
Root cause I identified:
The Elementor-generated CSS for the cart widget is scoped to .elementor-kit-724, but when WooCommerce cart fragments replaces the drawer HTML via AJAX, the injected content doesn’t inherit the .elementor-kit-724 scope, so the styles don’t apply to the updated content.
I was able to work around this by manually adding CSS directly targeting the drawer classes (.elementor-menu-cart__product, .elementor-button–view-cart, etc.) in Appearance → Additional CSS, bypassing the Elementor scope entirely. This works but it’s a manual workaround that shouldn’t be necessary.
Loom video showing the issue:
https://www.loom.com/share/665b0f7597cd4486ac5e541f833928e5
Questions:
Is this a known issue with the cart fragment AJAX update and Elementor CSS scoping?
Is there an official fix or recommended configuration to ensure the drawer CSS persists after cart fragment updates?
Should the Off-Canvas cart widget be re-initializing styles after the fragment refresh?
Thanks for your help.
