在自定义Wordpress主题中，我需要在WooCommerce商店页面上并排显示产品图像和产品摘要，因此我正在尝试使用自定义引导类添加新的div；
我用过woocommerce_before_shop_loop_item_title 钩子将类作为父类的新div添加到产品摘要中，效果非常好，我尝试将此代码用于图像
function wc_add_classes_img () {
if ( is_shop() ) {
?>
<div class="col-md-5 offset-md-1">
<?php
}
}
add_action( \'woocommerce_before_shop_loop_item\', \'wc_add_classes_img\');
function wc_close_div_after_img () {
if ( is_shop() ) {
?>
</div>
<?php
}
}
add_action( \'woocommerce_before_shop_loop_item_title\', \'wc_close_div_after_img\' );
但它添加了新div作为产品缩略图的父级，该缩略图是
<a> 元素，因此html输出为
<li>
<a>
<div class="col-md-5 offset-md-1">
<img>
</div>
</a>
<div class="col-md-6 text-center">
</div>
</li>
而不是期望的
<li>
<div class="col-md-5 offset-md-1">
<a><img></a>
</div>
<div class="col-md-6 text-center">
</div>
</li>
我还应该用别的钩子吗？或者可能我的做法不对，有更好的方法来实现并排图像和摘要布局？
最合适的回答,由SO网友:7uc1f3r 整理而成
为什么不编辑模板文件而不是使用挂钩？
https://github.com/woocommerce/woocommerce/blob/3.8.0/templates/content-product.php
<可以通过将此模板复制到主题/woocommerce/内容产品来覆盖此模板。php
<li <?php wc_product_class( \'\', $product ); ?>>
<div class="col-md-5 offset-md-1">
<?php
/**
* Hook: woocommerce_before_shop_loop_item.
*
* @hooked woocommerce_template_loop_product_link_open - 10
*/
do_action( \'woocommerce_before_shop_loop_item\' );
/**
* Hook: woocommerce_before_shop_loop_item_title.
*
* @hooked woocommerce_show_product_loop_sale_flash - 10
* @hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action( \'woocommerce_before_shop_loop_item_title\' );
?>
</div>
<?php
/**
* Hook: woocommerce_shop_loop_item_title.
*
* @hooked woocommerce_template_loop_product_title - 10
*/
do_action( \'woocommerce_shop_loop_item_title\' );
/**
* Hook: woocommerce_after_shop_loop_item_title.
*
* @hooked woocommerce_template_loop_rating - 5
* @hooked woocommerce_template_loop_price - 10
*/
do_action( \'woocommerce_after_shop_loop_item_title\' );
/**
* Hook: woocommerce_after_shop_loop_item.
*
* @hooked woocommerce_template_loop_product_link_close - 5
* @hooked woocommerce_template_loop_add_to_cart - 10
*/
do_action( \'woocommerce_after_shop_loop_item\' );
?>
</li>
