Woocommerce 产品循环 - 显示变体选择下拉列表并添加到存档中的购物车按钮

Question

尝试在可变产品的存档页面上的产品循环内添加“添加到购物车”按钮。目前，我的循环链接到完整的产品页面以选择变体。我想为变体选项（单个属性）添加一个下拉选择，并为所选属性添加一个“添加到购物车”按钮

目前我下面的代码将直接链接到产品页面以选择变体：

<?php while ( have_posts() ): the_post(); ?>
<?php $product = wc_get_product( get_the_ID() ); /* get the WC_Product Object */ 
?>

<div class="post-item" data-id="<?php the_id(); ?>">
    <a href="<?php the_permalink(); ?>" >
        <div class="post-image"> 
            <?php echo get_the_post_thumbnail(); ?>
        </div>
        <div class="post-content">
            <h3><?php the_title(); ?></h3>
            <div class="address">
                <span class="icon-post"><img src="https://inmemoryoflife.com/wp-content/uploads/2020/07/pin-1.svg" alt=""></span><?php echo get_field('crematorium_address'); ?>
            </div>
            <div class="price">
                <span class="icon-post"><img src="https://inmemoryoflife.com/wp-content/uploads/2020/06/pound-sterling.svg" alt=""></span><?php echo $product->get_price_html(); ?>
            </div>
            <div class="button-post">
                <span>View Details</span>
            </div>
        </div>
    </a>
</div>
<?php endwhile; ?>

Answer 1

对于具有唯一变体属性的可变产品，您可以轻松地为该唯一属性添加选择字段。然后，您将能够选择相应的变体并使用 WooCommerce Ajax 添加到购物车功能将其添加到购物车。

这是修改后的代码：

<?php 
while ( have_posts() ): the_post();
    $product = wc_get_product( get_the_ID() ); // get the WC_Product Object 
    $is_variable = $product->is_type('variable'); // Check if product is variable
    $variation_attributes = $is_variable ? $product->get_variation_attributes() : array(); // Get attributes for variations
    $attributes_count = (int) count( $variation_attributes ); // Attributes count
?>

<div class="post-item" data-id="<?php the_id(); ?>">
    <a href="<?php the_permalink(); ?>" >
        <div class="post-image"> 
            <?php echo get_the_post_thumbnail(); ?>
        </div>
        <div class="post-content">
            <h3><?php the_title(); ?></h3>
            <div class="address">
                <span class="icon-post"><img src="https://inmemoryoflife.com/wp-content/uploads/2020/07/pin-1.svg" alt=""></span><?php echo get_field('crematorium_address'); ?>
            </div>
            <div class="price">
                <span class="icon-post"><img src="https://inmemoryoflife.com/wp-content/uploads/2020/06/pound-sterling.svg" alt=""></span><?php echo $product->get_price_html(); ?>
            </div>
            <?php if ( $attributes_count !== 1 ) : ?>
            <div class="button-post">
                <span>View Details</span>
            </div>
            <?php endif; ?>
        </div>
    </a>
    <?php 
    // For variable products with only one attribute set for variations
    if ( $attributes_count === 1 ) {
        $attribute_name = current( array_keys( $variation_attributes ) );
        
        // Display the select field
        echo '<div>
        <select class="product-attribute">';
            
        printf( '<option value="">%s %s</option>', esc_html__('Select a', 'woocommerce'), wc_attribute_label( $attribute_name ) );

        foreach ( $product->get_available_variations( 'object ') as $variation ) {
            if ( $variation->is_in_stock() ) {
                printf( '<option value="%s">%s</option>', $variation->get_id(), $variation->get_attribute( $attribute_name ) );
            }
        }
        echo '</select><br>';

        // Display the add to cart button
        printf('<a href="" data-quantity="1" class="%s" data-product_id="" rel="nofollow" data-success_message="%s">%s</a>',
            'button add_to_cart_button ajax_add_to_cart', esc_html__('The product has been added to your cart'), esc_html__('Add to cart')
        );
        echo '</div>';
    }
    ?>
</div>
<?php endwhile; ?>

现在，需要一些 JavaScript (jQuery) 代码才能将选定的变体相关参数添加到“添加到购物车”按钮。

JavaScript 代码：

add_action('wp_footer', 'variable_product_add_to_cart_script', 1);
function variable_product_add_to_cart_script() {
    if ( is_woocommerce() && ! is_wc_endpoint_url() && ! is_checkout() ) :
    ?>
    <script>
    jQuery( function($) {
        $('select.product-attribute').on('change', function(){
            const productID = $(this).find(":selected").val(),
                addToCart = $(this).parent().find('a.add_to_cart_button'),
                hrefTag   = productID === '' ? '' : '?add-to-cart='+productID;

            addToCart.prop('href', hrefTag).attr('data-product_id', productID);
        });
    });
    </script>
    <?php
    endif;
}

代码位于子主题的functions.php文件中（或插件中）。

经过测试并可与启用的 Ajax 添加到购物车功能一起使用。