You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

WooCommerce 3.2.0:基于筛选结果自动预选商品变体的技术问询

实现筛选后自动选中WooCommerce可变商品变体

嘿,这个需求完全能搞定!针对你用的WooCommerce 3.2.0版本,咱们不用额外装插件,靠自定义代码就能实现,具体步骤如下:

步骤1:添加自定义代码到主题(或代码管理插件)

你可以把下面的代码添加到当前主题的functions.php文件里,更推荐用Code Snippets这类插件来管理代码——避免主题更新时丢失代码:

add_action('wp_footer', 'auto_select_variation_from_filter');
function auto_select_variation_from_filter() {
    // 只在可变商品页面执行代码
    if (!is_product() || !wc_get_product()->is_type('variable')) {
        return;
    }
    
    // 获取URL中的尺码筛选参数(WooCommerce默认属性参数前缀是pa_,这里假设你的尺码属性slug是size)
    $selected_size = isset($_GET['pa_size']) ? sanitize_text_field($_GET['pa_size']) : '';
    
    if (empty($selected_size)) {
        return;
    }
    
    // 输出JS代码到页面底部
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // 延迟执行,确保WooCommerce的变体脚本完全初始化
            setTimeout(function() {
                // 找到尺码对应的下拉菜单(根据属性slug调整选择器)
                var size_select = $('select#pa_size');
                
                // 设置选中筛选对应的尺码选项
                size_select.val('<?php echo $selected_size; ?>');
                
                // 触发WooCommerce的变体更新事件,加载对应变体的价格、库存等信息
                size_select.trigger('change');
            }, 500); // 若页面加载慢,可适当增大延迟时间,比如改成1000
        });
    </script>
    <?php
}

步骤2:适配你的店铺实际情况

  • 如果你的尺码属性slug不是size(比如属性叫“衣码”,slug是yi-ma),记得把代码里所有的pa_size替换成pa_yi-ma
  • 延迟时间(500毫秒)如果不够用,可以适当调高,确保WooCommerce的变体脚本已经加载完成

原理简单说下

  1. PHP部分先判断当前是可变商品页面,再从URL里提取用户筛选时选的尺码参数
  2. JS部分等页面加载完成后,找到对应的尺码下拉框,自动选中筛选的选项,再触发WooCommerce自带的变体更新事件,让页面自动加载该变体的价格、库存等信息

这样用户从筛选结果页点进商品后,对应的尺码变体就会自动选中,不用再手动选啦!

内容的提问来源于stack exchange,提问作者Jarxberg

火山引擎 最新活动