如何在WooCommerce可变单品的变体选择器下方添加尺码表短代码

嘿，这事儿用WooCommerce自带的钩子就能轻松搞定，不用动核心模板文件，安全又省心。

具体实现代码 #

你只需要把下面这段代码添加到子主题的functions.php里，或者用自定义代码插件（比如Code Snippets）来插入：

// 在可变产品的加购按钮前插入尺码表短代码
add_action( 'woocommerce_before_add_to_cart_button', 'display_size_chart_before_add_to_cart', 10 );
function display_size_chart_before_add_to_cart() {
    // 全局调用当前产品对象
    global $product;
    
    // 只在可变产品页面生效，避免其他页面乱显示
    if ( $product->is_type( 'variable' ) ) {
        // 把这里的短代码替换成你实际的尺码表短代码
        echo do_shortcode( '[your_size_chart_shortcode_here]' );
    }
}

关键细节说明 #

• 钩子选择：woocommerce_before_add_to_cart_button这个钩子刚好位于加购按钮上方，而可变产品的变体选择器就在这个钩子的前侧，完美匹配你要的位置要求。
• 产品类型判断：通过$product->is_type( 'variable' )确保这段代码只在可变产品页面运行，不会干扰简单产品或其他类型的产品页面。
• 短代码替换：记得把代码里的[your_size_chart_shortcode_here]替换成你已经拿到的那个尺码表短代码。

小调整技巧 #

如果发现位置不符合预期，可以调整钩子的优先级数字（代码里的10）：数字越小，代码执行越早（位置越靠前）；数字越大，执行越晚（位置越靠后）。比如改成15就能让尺码表更贴近加购按钮，改成5就会更靠近变体选择器。

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