如何在移动端显示WooCommerce结账错误提示

问题详情 #

• 基于DIVI区块构建器搭建的WooCommerce网站，结账页面存在移动端兼容性问题：
  • 用户提交未完整填写的订单时，桌面端会在页面顶部正常显示明确的错误提示
  • 移动端仅将勾选框文本标记为红色，无全局错误提示告知用户具体遗漏项，导致用户无法明确问题所在
  • 页面需添加商品至购物车后才可访问

排查与修复方案 #

1. 检查移动端CSS隐藏规则 #

打开浏览器开发者工具切换到移动端模式，定位错误提示容器（WooCommerce默认类为.woocommerce-error），查看是否被媒体查询规则设置为隐藏。若存在此类规则，添加自定义CSS覆盖：

@media (max-width: 768px) {
    .woocommerce-error {
        display: block !important;
        visibility: visible !important;
        margin: 1em 0;
        padding: 1em;
        background-color: #ffebee;
        color: #c62828;
        border: 1px solid #ef5350;
    }
}

将代码添加至DIVI自定义CSS面板或主题附加CSS中。

2. 排查DIVI结账模块设置 #

进入DIVI编辑器的结账模块设置面板，检查是否存在“移动端隐藏错误提示”相关选项，或自定义样式是否误将错误提示容器隐藏。

3. 插件冲突测试 #

临时禁用除WooCommerce、DIVI Builder外的所有插件，测试提交未完成订单时移动端是否显示错误提示。若恢复正常，逐个启用插件排查冲突来源。

4. 调整错误提示位置（可选） #

若默认错误提示位置在移动端被页面元素遮挡，可通过钩子修改输出位置，将提示移动至结账页最顶部：

add_action('wp_footer', 'move_checkout_errors_to_top');
function move_checkout_errors_to_top() {
    if (is_checkout() && !is_wc_endpoint_url()) {
        ?>
        <script>
            jQuery(document).ready(function($) {
                $('.woocommerce-error').prependTo('.woocommerce-checkout');
            });
        </script>
        <?php
    }
}

将代码添加至主题functions.php文件或自定义代码插件中。

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