Woocommerce如何固定购物车底部文本，更新/删除商品时不位移？

• 你给自定义文本添加了WooCommerce默认的woocommerce-info类，购物车AJAX更新（修改数量、删除商品）时，系统会自动把所有带这个类的通知元素统一移动到页面顶部的通知展示区，才会出现文本移位的问题。

1. 修改PHP插入代码 #

替换你原来在functions.php里的代码，给自定义文本使用独立专属类，避免被系统通知逻辑识别：

add_action( 'woocommerce_after_cart', 'function_woocommerce_after_cart' );
function function_woocommerce_after_cart() {
    echo '<div class="custom-cart-footer-text">你要展示的自定义文本</div>';
}

2. 添加自定义样式 #

把以下CSS添加到主题的「自定义-额外CSS」或者主题根目录的style.css文件中即可，你可以根据需求调整样式参数：

方案A：文本固定在购物车内容区块底部，随页面滚动 #

.custom-cart-footer-text {
    margin: 24px 0;
    padding: 16px 24px;
    background: #f8f8f8;
    border-left: 4px solid #2385bb;
    font-size: 14px;
    line-height: 1.5;
}

方案B：文本悬浮固定在整个页面底部，不随页面滚动 #

.custom-cart-footer-text {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px 24px;
    background: #f8f8f8;
    border-left: 4px solid #2385bb;
    font-size: 14px;
    z-index: 999;
    box-sizing: border-box;
}
/* 避免购物车底部内容被悬浮的文本遮挡 */
.woocommerce-cart .site-content {
    padding-bottom: 80px;
}

修改完成后清空WooCommerce缓存、主题缓存和浏览器缓存，再次操作购物车更新/删除商品，自定义文本就会始终停留在购物车底部不会移位。

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