使用 "woocommerce_before_shop_loop_item" 动作挂钩时在 <a> href 属性之前显示内容

Question

在我的网站上，我添加了悬停效果以显示心愿单图标，但是当您单击该图标时，您将转到产品页面，而不是运行要添加的 ajax 脚本愿望清单中的当前产品。

我知道我可以使用 insertAfter jQuery 轻松做到这一点，但在此之前我想知道 WooCommerce 中是否有“更清洁”的解决方案？

我也试过 CSS pointer-events:none 但没有得到想要的结果。

目前这是标记：

<a>
    <div class"wishlist">My icon</div>
    <img>
    <h2 class="woocommerce-loop-product__title">
</a>

如何使用挂钩和过滤器编辑 WooCommerce，以便将 <div class"wishlist">My icon</div> 移到 <a> 之外？

喜欢：

<div class"wishlist">My icon</div>
<a>
    <img>
    <h2 class="woocommerce-loop-product__title">
</a>

现在我使用 woocommerce_before_shop_loop_item 操作来显示心愿单图标。

Answer 1

使用没有优先级编号的挂钩时，例如：

function action_woocommerce_before_shop_loop_item() {
    echo '<div class"wishlist">My icon</div>';
}
add_action( 'woocommerce_before_shop_loop_item', 'action_woocommerce_before_shop_loop_item' );

WooCommerce 默认使用优先级 10。

但是在/templates/content-product.php中我们可以看到回调函数woocommerce_template_loop_product_link_open已经包含了优先级10:

 * Hook: woocommerce_before_shop_loop_item.
 *
 * @hooked woocommerce_template_loop_product_link_open - 10
 */
do_action( 'woocommerce_before_shop_loop_item' );

在/includes/wc-template-hooks.php中有：

add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );

所以你必须确保你的自定义代码在默认操作之前执行，这可以通过调整优先级数字来完成，例如调整为 1:

function action_woocommerce_before_shop_loop_item() {
    echo '<div class"wishlist">My icon</div>';
}
add_action( 'woocommerce_before_shop_loop_item', 'action_woocommerce_before_shop_loop_item', 1 );

使用 "woocommerce_before_shop_loop_item" 动作挂钩时在 <a> href 属性之前显示内容

Display content before <a> href attribute when using the "woocommerce_before_shop_loop_item" action hook

wordpress

woocommerce

hook-woocommerce