Woocommerce add an `aria-label` to the product loop item link anchor tag

Question

I am using WooCommerce and want to add an aria-label to the product loop item link anchor tag. Like:

<a href="http://localhost/shop/the-poets-philosophy/"
class="woocommerce-LoopProduct-link woocommerce-loop-product__link">

to become:

<a href="http://localhost/shop/the-poets-philosophy/"
class="woocommerce-LoopProduct-link woocommerce-loop-product__link"
aria-label="The Poets Philosophy">

I have a class MyCustomClass.class.php where add_action() on woocommerce_before_shop_loop_item hook is modified (Also I am commenting out my previous failed attempt):

<?php
class MyCustomClass
{
    function __construct()
    {
        add_action('woocommerce_before_shop_loop_item', [$this, 'add_product_item_link_aria_label'] );
        //add_filter('woocommerce_template_loop_product_link_open', [$this, 'add_product_item_link_aria_label']);
    }

    function add_product_item_link_aria_label()
    {
        global $product;
        $link = apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product );
        echo '<a href="' . esc_url( $link ) . '" class="woocommerce-LoopProduct-link woocommerce-loop-product__link nlink" aria-label="'.$product->get_title().'">';
    }
}
?>

MyCustomClass.class.php is added in the functions.php as:

require('lib/MyCustomClass.class.php');
$MyCustomClassObj= new MyCustomClass();

But I don't get the desired output. The output prints an extra anchor open tag:

<a href="http://localhost/shop/the-poets-philosophy/"
class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
<a href="http://localhost/shop/the-poets-philosophy/"
class="woocommerce-LoopProduct-link woocommerce-loop-product__link"
aria-label="The Poets Philosophy">
... loop contents ...
</a>

While r&d, I have found woocommerce_template_loop_product_link_open filter may be the right thing, but I do not have a cue how to manipulate it through the code. I have tried add_filter/remove_filter, but nothing worked so far.

What is the exact sequence of calling the actions, filters and hooks to achieve this? Thank you for reading this far.

PS: I already have fix with JQuery, but can this be done with php using the WooCommerce hooks?

Answer 1

Finally I got it! The MyCustomClass.class.php is modified as:

<?php
class MyCustomClass
{
    function __construct()
    {
        remove_action('woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
        add_action('woocommerce_before_shop_loop_item', [$this, 'add_product_item_link_aria_label'] );
    }

    function add_product_item_link_aria_label()
    {
        global $product;
        $link = apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product );
        echo '<a href="' . esc_url( $link ) . '" class="woocommerce-LoopProduct-link woocommerce-loop-product__link nlink" aria-label="'.$product->get_title().'">';
    }
}
?>