WooCommerce 商店中，变体商品是作为选项和主商品显示在一起的，有时候，为了方便操作，我们可能想把变体商品作为一个单独的商品显示。WooCommerce 没有为我们提供这样的选项，在本文中，我将为大家介绍怎么以编程的方式来实现这个功能。

以编程方式在商店和存档页面上将变体显示为单个产品

产品查询

老实说，这比你想象的要简单得多——我们只需使用标准的 WooCommerce 的 woocommerce_product_query 动作钩子即可，它有点类似于 pre_get_posts。

/**
 * 在 WooCommerce 中将变体显示为单一产品
 */
add_action( 'woocommerce_product_query', function( $query ) {
    $query->set( 'post_type', array( 'product','product_variation' ) );
}, 25 );

WooCommerce 产品页面已经完全兼容变体，而且 WC_Product_Variation PHP 类还扩展了 WC_Product 类。换句话说，只需在商店中使用上述代码片段，就足以将变体显示为单个产品：

“Hoodie-Blue,Yes” 产品就是一个变体。

使用 pre_get_posts 的示例（不建议使用）

除此之外，我们可以使用 pre_get_posts 动作钩子来实现这个需求吗？理论上可以，但我建议避免这样做，因为我们有一个 WooCommerce 专用的操作钩子。另外，在使用 pre_get_posts 钩子时，它会在任何地方被触发，甚至是在WordPress 管理仪表板中。

这是否意味着变体也将开始在管理控制面板中显示为单个产品？当然不是，你只会得到一个错误和为空的表格行，就像截图一样：

不过，我们可以添加一些限制条件来解决这个问题：

add_action( 'pre_get_posts', 'wprs_variations_as_single_products', 25 );
function wprs_variations_as_single_products( $query ) {

	// 首先，检查我们是否在管理仪表板中
	if( is_admin() ) {
		return;
	}

	// 其次，我们希望在哪些页面上以单个产品的形式显示变体
	if( is_shop() || is_product_category() || is_product_tag() ) {
		$query->set( 'post_type', array( 'product', 'product_variation' ) );
	}

}

在 「products」 短代码中使用 woocommerce_shortcode_products_query

在一些主题中，开发者还在使用 「products」 短代码在调用产品。这些短代码的查询不在 woocommerce_product_query 钩子的覆盖范围内，我们需要额外使用 woocommerce_shortcode_products_query：

add_filter( 'woocommerce_shortcode_products_query', function( $query_args, $atts ) {
    $query_args[ 'post_type' ] = array( 'product', 'product_variation' );
    return $query_args;
}, 25, 2 );

从产品循环中隐藏可变产品（不包括变体）

现在还有一个问题：既然现在我们在产品循环中显示变体产品就像显示普通产品一样，为什么我们还需要显示它们的父变体产品呢？

例如，你可以看到在显示 “Hoodie-Blue,Yes”的同时，我们仍然显示了 “连帽衫 “产品。我认为现在将它们排除在循环之外是非常合乎逻辑的，对吗？

幸运的是，我们可以很容易地做到这一点，只需在 woocommerce_product_query 钩子的回调函数中修改 Tax_Query 值即可，因为产品类型只是一个分类标准 product_type，我们需要排除带有变量项的产品。

add_action( 'woocommerce_product_query', function( $query ) {

	$query->set( 'post_type', array( 'product', 'product_variation' ) );

	// let's exclude variable products now
	$tax_query = $query->get( 'tax_query' );
	$tax_query[] = array(
 		'taxonomy' => 'product_type',
		'field'    => 'slug',
		'terms'    => 'variable',
		'operator' => 'NOT IN',
 	);
	$query->set( 'tax_query', $tax_query );

}, 25 );

如果出于某种原因，你不想修改 WooCommerce 产品查询中的 tax_query，你也有另一个选择–你可以通过特定的自定义字段 _variations 将变量产品过滤掉，从而排除变量产品。因此，我们只需修改 WooCommerce 产品循环中的Meta_Query 值即可。

add_filter( 'woocommerce_product_query_meta_query', function( $meta_query ) {
	$meta_query[] = array(
		'key' => '_variations',
		'compare' => 'NOT EXISTS',
	);
	return $meta_query;
} );

在本文中，我们介绍了怎么通过 WooCommerce 或 WordPress 的动作钩子来把产品变体显示为单个产品，对于一些产品不多的站点来说，可以丰富网站的产品，同时也方便用户添加产品到购物车。