在本教程中，我将为大家展示如何在 WooCommerce 产品列表页面上创建自己的变体下拉菜单。当我说 “创建自己的 “时，我是认真的，所以我们不只是复制和粘贴单个产品页面上的几个钩子。

我们的另一个目标是确保AJAX 添加到购物车按钮也能很好地应用于我们的自定义变体下拉菜单。

下面的截图中展示了本指南中要创建的内容：

首先，我们需要修改按钮的 HTML 输出

现在是代码时间，我们需要使用woocommerce_loop_add_too_cart_link Hook，因为它可以删除和修改 「选择选项」 按钮为我们需要的效果，同时，当产品为简单商品时，直接原样返回 「添加到购物车」按钮 。

add_filter( 'woocommerce_loop_add_to_cart_link', 'wprs_select_variations_shop_page', 99, 2 );

function wprs_select_variations_shop_page( $add_to_cart, $product ) {

	// 如果不是可变产品则不做任何事
	if( ! $product->is_type( 'variable' ) ) {
		return $add_to_cart;
	}

	// 如果没有可供购买的变体，也不执行任何操作
	if( ! $variations = $product->get_available_variations() ) {
		return $add_to_cart;
	}

	ob_start();
	?>

	<div class="wprs_variations" data-product_variations="<?php echo wc_esc_json( wp_json_encode( $variations ) ) ?>">

		<?php 
			foreach( $product->get_attributes() as $attribute_name => $attribute ) :
				?>
					<div class=" wprs-variation-select value">
						<?php
							wc_dropdown_variation_attribute_options(
								array(
									'show_option_none' => 'Select ' . strtolower( wc_attribute_label( $attribute_name ) ),
									'options' => $attribute->get_slugs(),
									'attribute' => $attribute_name,
									'product' => $product
								)
							);
						?>
					</div>
				<?php 
			endforeach;
		?>

		<a href="" data-product_id="" class="disabled button add_to_cart_button">Add to cart</a>

	</div>
	<?php
	
	return ob_get_clean();

}

• 第一步，我们将$product->get_available_variations()的整个值存储在一个 HTML 属性中，就像 WooCommerce 在单个产品页面上所做的那样，如果需要，我们可以简化它，因为我们只需要attributes、variation_id、price_html和 image对象属性。
• 之所以需要ob_start()和ob_end_clean()，是因为我们必须向woocommerce_loop_add_too_cart_link过滤器钩子返回（而不是打印）值，但里面使用的函数wc_dropdown_variation_attribute_options()总是会打印下拉菜单。
• 最后，您可以看到一个不带data-product_id属性和ajax_add_too_cart类的 AJAX 添加到购物车按钮。

第二部，我们需要用 JS 实现 Ajax 添加到购物车功能

第一部中，我们只是通过 PHP 输出了我们需要的二 HTML 结构，我们还需要一些 JavaScript，才能实现完整的交互功能。

jQuery( function( $ ) {

	$( '.rudr-variation-select' ).find( 'select[data-attribute_name]' ).change( function() {

		const el = $(this);
		const variationsWrapper = el.closest( '.wprs_variations' );
		const availableVariations = JSON.parse( variationsWrapper.attr( 'data-product_variations' ) );
		const productWrapper = variationsWrapper.closest( 'li.product' );
		const button = productWrapper.find( 'a.add_to_cart_button' );

		// 我们的匹配变体将存储在这个对象中
		let matchingVariation = {};

		// 现在我们可以循环遍历所有变体，并根据所选属性进行检查
		for( let i = 0; i < availableVariations.length; i++ ) {
			// assign it as a matching variation in any case
			matchingVariation = availableVariations[i];

			// 让我们检查一下这个变体的所有属性
			for( const [ attr_name, attr_value ] of Object.entries( availableVariations[i].attributes ) ) {
	  		// 如果任何属性不匹配
				if( attr_value !== variationsWrapper.find( '[name="' + attr_name + '"]' ).val() ) {
					matchingVariation = {};
				}
			}

			// 如果有匹配的变体，则退出循环
			if( Object.keys( matchingVariation ).length !== 0 ) {
				break;
			}

		}

		// 将变体 ID 添加到“添加到购物车”按钮
		if( matchingVariation.variation_id ) {
			button.removeClass( 'disabled' ).addClass( 'ajax_add_to_cart' );
			button.attr( 'data-product_id', matchingVariation.variation_id );
		}

		// 更新产品价格
		if( matchingVariation.price_html ) {
			productWrapper.find( 'span.price').replaceWith( matchingVariation.price_html );
		}

		// 更新产品图片
		if( matchingVariation.image ) {
			productWrapper.find( 'img' ).attr( {
				src: matchingVariation.image.src,
				srcset: matchingVariation.image.srcset,
				width: matchingVariation.image.src_w,
				height: matchingVariation.image.src_h
			} );
		}

	} );

} );

如果你很需要在产品列表中显示分类下拉菜单功能，但是你的主题不支持，又不方便更换主题，那么你可以参考本文中的代码在你的现有主题中实现这一功能。所需的代码量不多，相信大家都可以实现。如有疑问，欢迎在评论中提出，我将和大家一起探讨。