如何在WooCommerce商品归档页面添加商品变体选择功能

你可以直接替换原有代码，并新增对应资源加载逻辑即可实现需求，所有代码添加到子主题functions.php文件，或通过代码片段插件插入即可生效：

第一步：替换原有归档页加购按钮过滤代码 #

替换你现有实现数量选择的代码为以下内容，同时兼容简单产品的数量选择、可变产品的变体选择功能：

add_filter( 'woocommerce_loop_add_to_cart_link', 'custom_loop_add_to_cart_with_variations', 10, 2 );
function custom_loop_add_to_cart_with_variations( $html, $product ) {
    if ( ! $product->is_purchasable() || ! $product->is_in_stock() ) {
        return $html;
    }
    // 简单产品逻辑，保留原数量选择功能
    if ( $product->is_type( 'simple' ) && ! $product->is_sold_individually() ) {
        $html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
        $html .= woocommerce_quantity_input( array(), $product, false );
        $html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
        $html .= '</form>';
    }
    // 可变产品逻辑，输出变体选择表单
    elseif ( $product->is_type( 'variable' ) ) {
        ob_start();
        echo '<div class="loop-variable-product-form">';
        woocommerce_template_single_add_to_cart();
        echo '</div>';
        $html = ob_get_clean();
    }
    return $html;
}

第二步：加载变体选择所需的JS资源 #

商品归档页默认不会加载可变产品的变体交互JS，需要手动挂载：

add_action( 'wp_enqueue_scripts', 'custom_enqueue_variation_script_for_archive' );
function custom_enqueue_variation_script_for_archive() {
    if ( is_shop() || is_product_category() || is_product_tag() ) {
        wp_enqueue_script( 'wc-add-to-cart-variation' );
    }
}

第三步：可选样式适配 #

如果出现变体选择控件排版错乱，可以添加以下CSS到主题自定义CSS面板：

.loop-variable-product-form .variations {
    margin: 10px 0;
    width: 100%;
}
.loop-variable-product-form .variations td {
    padding: 5px 0;
    display: block;
}
.loop-variable-product-form .quantity {
    margin: 10px 0;
}

操作完成后，商品归档页的可变产品会自动加载属性选择下拉，选择对应变体后即可直接设置数量加购，无需跳转详情页。 #

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