在 woocommerce 类别存档页面中围绕类别图像添加自定义 html 标签

Add custom html tag around category images in woocommerce category archive pages

我有一个商店页面,顶部显示产品类别,然后开始显示产品。

对于产品类别的拇指,我在将鼠标悬停在 img 中时添加了放大效果。

但我需要将该图像包裹在 div 中以设置高度和宽度,这样我就可以 overflow:hidden;我不想在悬停时显示图像的其余部分。

我一直试图在档案中找到循环,但没有找到。

有人知道我在哪里可以找到它吗?

谢谢!

我需要的是将每个子类别的图像包装在 div

https://www.evernote.com/shard/s423/sh/22d92a4c-ca26-4dae-9c09-ed15dc833fb1/f0c2b1b7b7f7bac0c513e5bd9534bcdb

因此您可以覆盖模板 content-product_cat.php(类别图像已挂钩)并在第 32 行之前添加开始标记,在第 37 行之后添加结束标记:

/**
 * woocommerce_before_subcategory_title hook.
 *
 * @hooked woocommerce_subcategory_thumbnail - 10
 */
do_action( 'woocommerce_before_subcategory_title', $category );

But instead you can use the existing hook woocommerce_before_subcategory_title (line 37), where the image is hooked (or called), to wrap the image in some html tag of your choice, so you can try this:

add_action( 'woocommerce_before_subcategory_title', function( $category ){
    // The opening div (priority 8)
    echo '<div class="some-class">';
}, 8, 1);

add_action( 'woocommerce_before_subcategory_title', function( $category ){
    // The closing div (priority 12)
    echo '</div>';
}, 12, 1);

代码进入您的活动子主题(或主题)的 function.php 文件或任何插件文件。

最后一种方法是最好的。