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

user_1427530 0
Viewed 116

On my website I added a hover effect to show a wishlist icon, but when you click the icon, you are transfered to the product page, instead of running the ajax script to add the current product inside the wishlist.

I know that I can easily do this with insertAfter jQuery but before I do I wanted to know if there is a "cleaner" solution in WooCommerce?

I also tried with CSS pointer-events:none but that doesn't have the desired result.

Currently this is the markup:

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

How can I edit WooComerce with hooks and filters so that I can move the <div class"wishlist">My icon</div> outside of <a> ?

Like:

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

Right now I use the action woocommerce_before_shop_loop_item to show the wishlist icon.

hook-woocommerce woocommerce wordpress
1 Answers

When using hooks without a priority number, like:

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' );

Priority 10 will be used by default in WooCommerce.

However, in /templates/content-product.php we can see that the callback function woocommerce_template_loop_product_link_open already contains priority 10:

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

In /includes/wc-template-hooks.php there is:

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

So you have to make sure that your custom code is executed before the default actions, this can be done by adjusting the priority number, for example to 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 );
user_119875380
Related