WooCommerce移动端购物车图标消失问题求助

我在多个论坛找过CSS解决方案，但都没用，已经花了好几天尝试各种方法，目前的问题是：移动端查看时WooCommerce购物车图标消失。

通过元素检查得到的HTML代码如下：

<div class="dt__mobilenav-right">
    <ul class="dt__navbar-list-right">
        <li class="dt__navbar-cart-item">
            <a href="javascript:void(0);" class="dt__navbar-cart-icon">
                <span class="cart--icon">
                    <strong class="cart-count">0</strong>
                </span>
            </a>
            <div class="dt__navbar-shopcart">
                <p class="woocommerce-mini-cart__empty-message">Cart is empty.</p>
            </div>
        </li>
    </ul>
</div>

我的woo-styles.css文件中有如下代码：

header .cart-contents,
.mobile-header .cart-bar-toggle {
    position: relative;
}
header .woo-icon-count,
.mobile-header .woo-icon-count {
    color: var(--dt-whi-color);
    border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -webkit-border-radius: 50%;
    font-size: 9px;
    height: 14px;
    line-height: 14px;
    position: absolute;
    right: -10px;
    text-align: center;
    top: -10px;
    width: 14px;
}

我觉得方向是对的，但不知道具体怎么修复。希望懂CSS的人帮忙指出具体操作方法。我曾尝试添加以下CSS代码，但没用：

@media only screen and (max-width: 420px) {
    .shopping_cart_outer {
       display:table !important;
    }
}

内容的提问来源于stack exchange，提问作者Pyhapeetrus