plugins - Hook to display element as product on category page

I am creating a plugin and I am trying to add an element which will be displayed as a product. In the picture, the element is the red rectangle.

I have used this guide but none of the hooks there helped me. I tried woocommerce_before_shop_loop, it adds the element behind the products, spending the whole page (in the DOM tree, it adds it as the parent of the products elements.

Also, woocommerce_before_shop_loop_item insert the element inside the product's element container, before the sale badge.

Which hook can I use to achieve what I want?

Thanks

I am creating a plugin and I am trying to add an element which will be displayed as a product. In the picture, the element is the red rectangle.

I have used this guide but none of the hooks there helped me. I tried woocommerce_before_shop_loop, it adds the element behind the products, spending the whole page (in the DOM tree, it adds it as the parent of the products elements.

Also, woocommerce_before_shop_loop_item insert the element inside the product's element container, before the sale badge.

Which hook can I use to achieve what I want?

Thanks

• plugins
• plugin-development
• hooks

Share Improve this question edited Feb 13, 2019 at 9:19 Omer asked Feb 13, 2019 at 8:48 OmerOmer 14911 gold badge44 silver badges1414 bronze badges 3

• 1 Why didn't the hooks in that guide help? What are you having trouble with? What do you mean by "an element which will be displayed as a product"? – Jacob Peattie Commented Feb 13, 2019 at 8:56
• So you want to insert arbitrary html between two woocommerce products? Which theme are you using? – Fabrizio Mele Commented Feb 13, 2019 at 9:19
• Edited the question for more information. @FabrizioMele, that's exactly what I want. – Omer Commented Feb 13, 2019 at 9:21

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You have to override the shop loop to insert something between some products. The file where the loop happens is wp-plugins/woocommerce/templates/archive-product.php (this one). Override it using this guide and do something like this

$counter = 0;
while ( have_posts() ) {
  if($counter == 5){ //if you want your code between the 5th and the 6th product
    echo "<li ".wc_product_class( '', $product ).">";
    echo "My Html!";
    echo "</li>";    
  }
  the_post();

  do_action( 'woocommerce_shop_loop' );
  wc_get_template_part( 'content', 'product' );
  $counter++;
}

Please note that I took the <li> from the default woocommerce content-product.php template, you might want to look for the template in your theme, if it is overridden.

As you are trying to override a template through a plugin you need to inject your plugin woocommerce (or call it what you want) directory inside the woocommerce template search scope. This answer has a good code example on how to do it.