如何仅在移动端禁用WooCommerce Shoptimizer主题的滑动购物车

方法一：CSS媒体查询隐藏抽屉 #

通过CSS针对移动端屏幕尺寸隐藏滑动抽屉，同时保证AJAX加购的成功提示正常显示：

@media only screen and (max-width: 768px) {
    /* 隐藏滑动购物车抽屉 */
    .slide-cart {
        display: none !important;
    }
    /* 确保AJAX添加成功通知正常展示 */
    .woocommerce-message {
        display: block !important;
    }
}

将上述代码添加到外观 > 自定义 > 额外CSS面板中，768px为通用移动端断点，可根据需求调整数值。

方法二：自定义JS阻止移动端抽屉弹出 #

通过监听AJAX加购事件，在移动端条件下阻止抽屉弹出：

document.addEventListener('DOMContentLoaded', function() {
    // 监听商品添加至购物车的AJAX事件
    document.body.addEventListener('added_to_cart', function() {
        // 判断当前设备为移动端时关闭抽屉
        if (window.innerWidth <= 768) {
            const slideCart = document.querySelector('.slide-cart');
            if (slideCart && slideCart.classList.contains('active')) {
                slideCart.classList.remove('active');
            }
        }
    });
});

将这段代码添加到主题的自定义JS区域，或通过自定义JS插件注入页面。若需更精准控制，可找到主题的滑动购物车JS文件（通常为assets/js/slide-cart.js），在抽屉弹出逻辑前添加移动端判断（建议使用子主题修改，避免主题更新覆盖）。

方法三：PHP钩子控制（主题支持时优先使用） #

如果Shoptimizer主题提供了滑动购物车启用状态的钩子，可通过子主题的functions.php添加代码，仅在移动端禁用抽屉：

add_filter('shoptimizer_slide_cart_enabled', 'disable_slide_cart_mobile');
function disable_slide_cart_mobile($enabled) {
    // 检测是否为移动设备
    if (wp_is_mobile()) {
        return false;
    }
    return $enabled;
}

此方法无需修改前端代码，兼容性更强，建议先确认主题文档中是否存在对应钩子。

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