
本文介绍如何通过自定义短代码,在wcfm marketplace插件的商家店铺页面中,按商品分类(如蔬菜、水果)分组展示该商家所售商品,实现“每类一栏、分类陈列”的专业店铺布局。
本文介绍如何通过自定义短代码,在wcfm marketplace插件的商家店铺页面中,按商品分类(如蔬菜、水果)分组展示该商家所售商品,实现“每类一栏、分类陈列”的专业店铺布局。
在 WooCommerce + WCFM Marketplace 环境下,商家店铺页默认仅通过侧边栏小工具展示分类导航,但缺乏正文区域的结构化商品呈现。若需实现类似以下效果:
VEGETABLES(分类标题) [产品A] [产品B] [产品C] [产品D] FRUITS(分类标题) [产品X] [产品Y] [产品Z]
即「按商家自有商品所属分类动态分组,并在店铺主内容区渲染对应商品列表」,需结合 WordPress 钩子、WCFM API 及 WooCommerce [products] 短代码能力进行定制开发。
✅ 实现原理简述
核心思路是:
- 在店铺页上下文中准确识别当前商家 ID;
- 获取该商家发布的所有商品所属的非空、启用、公开的产品分类(product_cat);
- 对每个分类调用 WooCommerce 原生 [products] 短代码(支持 store 和 category 参数),并添加语义化标题;
- 封装为可复用的短代码,便于在店铺模板或古腾堡区块中灵活调用。
? 完整可用代码(推荐放入子主题的 functions.php)
add_shortcode('wcfm_store_products_by_category', 'wcfm_store_products_by_category');
function wcfm_store_products_by_category($attr) {
global $WCFM, $WCFMmp, $wp, $post;
// 步骤1:精准获取当前店铺ID
$store_id = 0;
// 场景1:在 /store/{slug} 页面
if (wcfm_is_store_page()) {
$wcfm_store_url = get_option('wcfm_store_url', 'store');
$store_name = apply_filters('wcfmmp_store_query_var', get_query_var($wcfm_store_url));
if (!empty($store_name)) {
$store_user = get_user_by('slug', $store_name);
$store_id = $store_user ? $store_user->ID : 0;
}
}
// 场景2:在单个商品页,且作者为已认证供应商
elseif (is_product() || (is_single() && $post && wcfm_is_vendor($post->post_author))) {
$store_id = $post->post_author;
}
// 场景3:手动传参(兼容性扩展)
if (isset($attr['id']) && !empty($attr['id'])) {
$store_id = absint($attr['id']);
}
if (!$store_id || !wcfm_is_vendor($store_id)) {
return '<p class="wcfm-store-category-warning">未识别到有效商家,请检查页面上下文或商家权限。</p>';
}
// 步骤2:获取该商家所有已发布商品的唯一分类ID列表(去重+排序)
$args = array(
'post_type' => 'product',
'post_status' => 'publish',
'author' => $store_id,
'posts_per_page' => -1,
'fields' => 'ids',
);
$product_ids = get_posts($args);
if (empty($product_ids)) {
return '<p class="wcfm-store-empty">该商家暂无上架商品。</p>';
}
$all_terms = array();
foreach ($product_ids as $pid) {
$terms = wp_get_post_terms($pid, 'product_cat', array('fields' => 'ids'));
$all_terms = array_merge($all_terms, $terms);
}
$category_ids = array_unique(array_filter($all_terms));
// 按名称升序排序分类(可选)
if (!empty($category_ids)) {
$categories = get_terms(array(
'taxonomy' => 'product_cat',
'include' => $category_ids,
'orderby' => 'name',
'order' => 'ASC',
'hide_empty' => true,
));
if (!is_wp_error($categories) && !empty($categories)) {
$output = '';
foreach ($categories as $cat) {
$output .= '<section class="wcfm-store-category-section" id="cat-' . $cat->term_id . '">';
$output .= '<h3 class="wcfm-store-category-title">' . esc_html($cat->name) . '</h3>';
// 使用WooCommerce原生[products]短代码,支持store+category双重过滤
$output .= do_shortcode('[products category="' . $cat->slug . '" store="' . $store_id . '" columns="4" limit="8"]');
$output .= '</section>';
}
return $output;
}
}
return '<p class="wcfm-store-category-info">暂无分类商品数据。</p>';
}✅ 使用方式
在商家店铺页编辑器中(Classic Editor 或 Gutenberg 的「自定义HTML」/「短代码」区块),插入:
[wcfm_store_products_by_category]
? 提示:你也可以指定商家ID强制调用,例如:
[wcfm_store_products_by_category id="123"]
⚠ 注意事项与最佳实践
- 必须使用子主题:避免插件更新时代码丢失;
- 分类可见性依赖商品状态:仅 publish 状态的商品及其所属分类会被纳入;
- 性能优化建议:若商家商品量极大(>500),建议配合对象缓存(如 Redis)或增加分页逻辑;
-
样式控制:输出的
和 已预留 CSS 类名(如 wcfm-store-category-section),可在子主题 style.css 中自定义视觉风格;
- 兼容性验证:本方案兼容 WCFM Marketplace ≥ 3.5.0 与 WooCommerce ≥ 6.0;
- 调试技巧:临时添加 error_log(print_r($categories, true)); 可排查分类获取失败问题。
通过以上方案,你将获得一个语义清晰、易于维护、符合 WooCommerce 生态规范的分类商品展示模块——既满足买家浏览体验,也提升多商家平台的专业度与转化效率。










