skip to Main Content

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


  1. 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.

    Login or Signup to reply.
  2. can you try add below additional css!!

    .ast-builder-layout-element.site-header-focus-item.ast-header-woo-cart {
        display: none !important;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search