Bricks + WooCommerce 商品循环模板：用一套模板接管默认商品循环

Bricks 的 Query Loop 确实强大好用，但如果你在外贸独立站里到处都要展示 WooCommerce 商品，难道要在每个页面手动复制一遍商品循环设计？显然不划算。

更好的做法：建一套标准的商品循环模板，让它直接覆盖 WooCommerce 默认的 content-product.php 循环。这样全站商品展示统一、改一处即全站生效。

本文基于 BricksLabs 公开免费教程实译，代码完整可复用。原文：WooCommerce Product Loop Template in Bricks

为什么要用模板接管默认循环

• 不用在每个页面重复堆 Query Loop 结构
• 商品卡片设计集中维护，品牌统一
• 配合 Bricks 动态数据，价格/图片/标题自动填充

注意：一旦覆盖 WooCommerce 默认商品循环，部分 WooCommerce 原生钩子（hook）将不再生效。但我们用 Bricks 模板完全接管展示逻辑，反而更可控。

第一步：建一个 Section 类型模板

在 Bricks 里新建一个 Section 类型模板，按你的设计搭建商品卡片（价格用基础文本元素绑定动态数据、图片用动态特色图等）。记下这个模板的 ID（下文以 856 为例，实际替换成你自己的）。

第二步：在子主题里覆盖 content-product.php

把 WooCommerce 的 content-product.php 复制到子主题对应目录，改成只负责“加载我们的 Bricks 模板”：

<?php

defined( 'ABSPATH' ) || exit;

global $product;

// 确保商品可见
if ( empty( $product ) || ! $product->is_visible() ) {
	return;
}

// 替换 856 为你自己的商品循环模板 ID
$template_id = 856;

// 仅检查模板是否存在且已发布
$template_data = \Bricks\Database::get_data( $template_id, 'content' );
$template_post_status = get_post_status( $template_id );

// 只有模板已发布且存在时才用我们的模板
if ( $template_data && $template_post_status === 'publish' ) :

	$ori['post_id'] = \Bricks\Database::$page_data['post_id'];

第三步：用 Bricks Database 取模板内容

Bricks 通过 \Bricks\Database::get_data() 读取模板内容。我们要在渲染前把“当前循环的商品 ID”注入到 Bricks 的页面数据里，否则模板里的动态字段会取到错误的文章。

调试时可以先用一个 bricks/element/settings 过滤器查看当前 $post_id 与全局 $product 是否一致：

add_filter( 'bricks/element/settings', function( $settings, $element ) {
	
	// 我的标题元素 ID 是 cafvof，只针对这个元素
	if ( $element->id !== 'cafvof' ) return $settings;
	
	// 查看这里用于填充动态数据的 $post_id
	var_dump( $element->post_id );
	
	// 查看全局 $product ID
	global $product;
	var_dump( $product->get_id() );
	
	return $settings;
	
}, 10, 2 );

第四步：把动态数据指向当前商品 ID

核心是把 Bricks 的 $page_data 里的 post_id 相关值替换成 $product->get_id()，让模板里的动态数据（价格、标题、图片）绑定到当前循环的商品：

// 2) 将 \Bricks\Database:$page_data 的 post_id 相关值改为 $product->get_id()
add_action( 'itchy/template_output/before', 'itchy_change_data_post_id', 10, 3 );

function itchy_change_data_post_id( $template_id, $id, $ori ) {

	// 只针对我们的商品循环模板（你可能有多个不同模板）
	if ( $template_id !== 856 ) return;

	// 用过滤器改变填充动态数据所用的 $post_id
	// 这里用匿名函数方便把 $id 和 $ori 传进回调
	// $id 来自 content-product.php 的当前商品

完整代码逻辑：先保存原始 post_id / original_post_id / preview_or_post_id 到 $ori 数组，再在 itchy/template_output/before 动作里把它们改成 $product->get_id()，模板即可正确渲染当前商品。

注意事项与小结

• 模板 ID 必改：文中 856 只是示例，换成你自己的模板 ID
• 只覆盖目标模板：if ( $template_id !== 856 ) return; 保证不影响其他 Bricks 模板
• WooCommerce 钩子限制：覆盖后部分 WC 原生钩子失效，属预期行为
• 调试技巧：用 bricks/element/settings 过滤器 var_dump 出 $post_id 与 $product->get_id() 对比，确认数据绑定正确

通过这套方法，外贸站的商品列表、关联商品、分类页都能统一用一套 Bricks 模板驱动，维护成本直线下降。

延伸阅读

• Query Loop 从 API 拉数据
• Query Filters 分面搜索教程
• Bricks 表单生成器完整指南

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程