在 WooCommerce 商店页面或商品分类归档页中，系统会列出当前分类下的子分类，并展示它们的缩略图与名称。默认情况下，子分类的名称是超链接，但缩略图本身并不能点击，这会让部分用户以为图片只是装饰。通过简单的主题层修改，就能把缩略图也变成指向子分类页面的链接，提升操作直观性。
一、理解 WooCommerce 子分类的渲染方式
WooCommerce 在前端展示商品分类（包括父分类下的子分类）时，依赖名为 content-product_cat.php 的模板文件。该文件位于插件目录的 templates 文件夹内，负责输出每一个分类项的标题、缩略图与描述。默认逻辑中，缩略图使用 woocommerce_subcategory_thumbnail 函数直接输出 img 标签，而外层并没有包裹指向分类页面的 a 标签。
如果我们打开默认的模板，会看到类似结构：先通过 woocommerce_template_loop_category_title 输出带链接的标题，再输出不带链接的缩略图。这意味着用户必须准确点到文字才能进入分类。要解决这个问题，核心思路是让缩略图也被 a 标签包围，并且 href 的值为该分类的归档地址。
二、方法一：使用子主题覆盖模板文件
最稳妥的方式是在当前启用的子主题目录下，新建 woocommerce 文件夹，再把插件里的 content-product_cat.php 复制过来进行修改。这样做可以避免插件更新时改动被覆盖。在复制后的文件中，我们找到输出缩略图的位置，将其包裹进超链接。
下面是一段修改后的模板代码示例，注意其中 HTML 特殊字符已转义，且链接地址通过 get_term_link 动态获取：
<?php
/**
* 子主题中的 content-product_cat.php 片段
* 让子分类缩略图变为可点击链接
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
$term_link = get_term_link( $category, 'product_cat' );
?>
<div class="product-category product">
<a href="<?php echo esc_url( $term_link ); ?>" class="woocommerce-loop-category-link">
<?php
// 原函数为直接输出 img，这里仍调用但包裹在 a 内
woocommerce_subcategory_thumbnail( $category );
?>
</a>
<?php
// 标题也放在链接内或外均可，默认函数会自带链接
woocommerce_template_loop_category_title( $category );
?>
</div>
这种覆盖模板的做法优点非常明显：逻辑清晰、不依赖钩子优先级，且方便添加自定义类名控制样式。缺点是每次 WooCommerce 大版本更新时，需要对比官方模板是否有变动，以免错过新功能。对于长期维护的项目，建议在子主题目录中做好版本注释。
三、方法二：利用钩子动态添加链接包裹
如果不想动模板文件，也可以通过 woocommerce_before_subcategory 与 woocommerce_after_subcategory 这两个动作钩子，在缩略图前后输出 a 标签。这种方式适合不想维护完整模板副本的场景，但需要注意钩子传参中包含 WP_Term 对象。
以下代码可放入子主题的 functions.php 中：
<?php
// 在子分类内容前输出打开的 a 标签
add_action( 'woocommerce_before_subcategory', 'my_open_cat_link', 5 );
function my_open_cat_link( $category ) {
$link = get_term_link( $category, 'product_cat' );
echo '<a href="' . esc_url( $link ) . '" class="cat-thumb-link">';
}
// 在子分类内容后输出关闭标签
add_action( 'woocommerce_after_subcategory', 'my_close_cat_link', 20 );
function my_close_cat_link( $category ) {
echo '</a>';
}
?>
使用钩子方案的便捷性在于无需关心模板内部结构，升级插件影响小。但要注意，如果原模板已经在标题处包裹了 a 标签，可能会导致嵌套链接的 HTML 不合法。因此采用此法时，应确认主题没有在标题外再包一层 a，或者通过 CSS 让缩略图区域的点击穿透到正确位置。
四、常见误区与样式处理
一个常见误区是直接将图片地址当作链接写死，例如把 href 写成固定路径。一旦分类别名变更或站点迁移，链接就会失效。始终使用 get_term_link 能返回带正确重写规则的分类网址，避免手工拼接。另一个误区是忽略移动端点击区域，图片若被父级 div 的 overflow:hidden 裁剪，可能导致点击无响应，需要检查层级与指针事件。
完成链接包裹后，建议补充一些 CSS 让缩略图在 hover 时有反馈，例如轻微放大或边框变色，这样用户更容易意识到图片可点。同时，如果站点启用了缓存插件，修改模板或钩子后需清除页面缓存，才能在访客侧立即生效。
五、总结
让 WooCommerce 子分类缩略图变为可点击链接，本质上就是为缩略图补充一个指向分类归档页的锚点。无论是覆盖 content-product_cat.php 还是使用前后钩子，都应以动态获取分类链接为前提。实施后在桌面与手机端测试点击行为，并配合基础样式优化，就能有效缩短用户进入子分类的操作路径。
WooCommerce子分类缩略图可点击链接修改时间：2026-08-08 23:51:30