Woocommerce添加 <div> 后排产品

Question

I'm trying to add shelves after each row of products in my Woocommerce shop, product categories and so on by adding <div> elements after the <li> of each products row.

<div container>
  <div shelf right>
  </div>
  <div shelf left>
  </div>
  <div shelf center>
  </div>
</div>

after each row of products (in my case, I've limited the columns to 3 products per row). I was able to achieve this by tinkering with the loops inside the files like wc-class-shortcodes.php, product-archive.php and such, but I was looking for a way to do that without changing the files outside of my child-theme (so it won't break the first time I update my files).

I've already tried using the hook "woocommerce_after_shop_loop_item", but it added my div inside of the <li> of the product - Not what I wanted since if I want a shelf underneath all of the products, I need to create it after the <li> and before the next one. And also after the last product, even if it's not a full row.

I've already looked at another question:

Insert a div after the 3rd product in woocommerce shop

But the solutions they had didn't work outside of the PHP template files that I would like to keep unharmed.

Does anyone have any suggestions?

Answer 1

Try this,

//Add DIV end element after shop loop item
add_action('woocommerce_after_shop_loop_item', 'action_woocommerce_after_shop_loop_item', 10, 0);
function action_woocommerce_after_shop_loop_item( ) {
  echo "</div>";
 };
//Add DIV start element before shop loop item
add_action('woocommerce_before_shop_loop_item', 'action_woocommerce_before_shop_loop_item', 10, 0);
function action_woocommerce_before_shop_loop_item( ) {
   echo "<div class='demo_div_wrapper'>";
};

This code is worked for me. Hope this will helps you.