“WOOCOMMERCE | add html after li open and before li close, in products archive page ( or.. how to add lazy loaders to single product in archive )

I need to adds a ” lazy loaders ” data-attribute to each product in products archive page.
For do that we need open html tag immediatly after the open of li tag, and close it immediately before the close of li tag.

Open your theme’s function.php and scroll till end of the file, copy and paste this two lines of code :

add_action ( "woocommerce_before_shop_loop_item", "after_li_start", 9 );

function after_li_start () {
    echo '<div data-aos="fade-up">';
}

add_action ( "woocommerce_after_shop_loop_item", "before_li_start", 10 );

function before_li_start () {
    echo "</div>";
}

Basically, with action “woocommerce_before_shop_loop_item” we insert the html declared in “after_li_start” function immediately after opens li, instead, with action “woocommerce_after_shop_loop_item” inserts the html declared in “before_li_started” function, immediately before closes li.

Re upload file, and reload page.
If you inspect the html, you see that inside li it was inserted a new div ( declared before ).

That’s all