I’m using the Astra theme with WooCommerce and having an issue with the mini cart’s remove icon (X icon). The icon is being hidden by a style rule in Astra’s CSS that I cannot override.
Problem:
The following Astra theme style is preventing the WooCommerce mini cart remove icon from displaying:
.ast-mobile-menu-trigger-minimal,
.menu-toggle.main-header-menu-toggle,
.ast-button-wrap .menu-toggle,
.mobile-menu-toggle-icon,
.ast-mobile-svg,
.ahfb-svg-iconset {
display: none !important;
}
What I’ve tried:
Adding more specific CSS selectors with !important:
body.woocommerce .woocommerce-mini-cart-item a.remove .ahfb-svg-iconset.ast-inline-flex {
display: inline-flex !important;
}
Using JavaScript to force the display property:
document.addEventListener('DOMContentLoaded', function() {
const removeIcons = document.querySelectorAll('.woocommerce-mini-cart-item a.remove .ahfb-svg-iconset');
removeIcons.forEach(icon => {
icon.style.setProperty('display', 'inline-flex', 'important');
});
});
None of these approaches have worked – the display: none !important style from Astra still takes precedence.
Environment:
WordPress Version: 6.6.2
Astra Theme Version: 4.8.1
WooCommerce Version: 9.3.3
2
Answers
Your approach should work. So I suspect your selector does not pick up your target element, or there is another higher precedence rule you are not aware of.
Another trick would be setting an inline important style to your target element, i.e. giving it a
style="display: inline-flex !important;"
attribute.Edit: CSS rules in
<style>
are higher than ones in stylesheet.can you try add below additional css!!