Default “Add to Cart” template of WooCommerce at “templates/loop/add-to-cart.php” uses function “esc_html()” which escapes HTML blocks in return value.
The code you have added is correct. You just need to remove “esc_html()” function from “templates/loop/add-to-cart.php“.
// Default Template Code
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<a rel="nofollow" href="https://wordpress.stackexchange.com/questions/304517/%s" data-quantity="https://wordpress.stackexchange.com/questions/304517/%s" data-product_id="https://wordpress.stackexchange.com/questions/304517/%s" data-product_sku="https://wordpress.stackexchange.com/questions/304517/%s" class="https://wordpress.stackexchange.com/questions/304517/%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() )
),
$product );
// Udated Template Code
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<a rel="nofollow" href="https://wordpress.stackexchange.com/questions/304517/%s" data-quantity="https://wordpress.stackexchange.com/questions/304517/%s" data-product_id="https://wordpress.stackexchange.com/questions/304517/%s" data-product_sku="https://wordpress.stackexchange.com/questions/304517/%s" class="https://wordpress.stackexchange.com/questions/304517/%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
$product->add_to_cart_text()
),
$product );