Woocommerce Product Loop Template

Posted onby admin
  • Hello,

    Build a new theme and adding Woocmmerce support.

    Overriding the templates in my child theme.
    Adding also woocommerce.php to the child theme.

    ../child-theme/woocommerce/.. adding here all the wc files that i want overriding.

    My biggest problem is how overriding and making a new layout for the product loop.
    When opening the template part ../content-product.php, there is no html inside!
    What is the best way, overriding the woocommerce loop with my own html programmatically??

  1. Edit Woocommerce Templates
  2. Woocommerce Product Category Page Template
  3. Woocommerce Product Loop Template Download
  4. Woocommerce_template_loop_product_title

Edit Woocommerce Templates

  • The topic ‘Customize product template loop’ is closed to new replies.

By default woocommerce shows the same product image on both shop/category pages and single product page. In many cases this is not ideal, as the product image is cropped in shop/category pages to fit into a display box.


Kadence WooCommerce Elementor Pro – Product Loop Template Updated: November 7, 2019 by Kevin The latest update to Kadence WooCommerce Elementor Pro plugin adds the ability to customize your product loop layout in your shop archive pages. Woocommerce product loop template. Customize product template loop, This thread is closed. Hello, Build a new theme and adding Woocmmerce support. Overriding the templates in my child theme. Adding also woocommerce. Next, I’ll copy the entire loop from the WooCommerce Product Archive template. Woocommercetemplateloopprice WC 1.0 Get the product price for the loop. Usage woocommercetemplateloopprice; Code of woocommercetemplateloopprice woocommerce template loop price WC 5.1.0.

This problem arises as often the uploaded image is not a good fit for the shop/category pages. It is either too big or too small, height is too much or breadth is out of whack! you get the gist!

I have gone through many woocommerce sites. The best results are obtained when the image is squarish in shape with an ideal width of 800px and above.


Still, how about having a separate image specially for the shop/category page? You can use a separate customized image that fits nicely to the display blocks on the shop/category page. Let me show you how!

Woocommerce product page template

For this solution to work you will need to have images in the product gallery. The first image on the product gallery will be used for the shop/category pages – so that image must fit the product box dimensions in shop/category pages.

Next, you will need the hook “woocommerce_init” to replace the default product thumbnail and set up the first gallery image as product image.

add_action( 'woocommerce_init', 'vista_replace_loop_product_thumbnail' )

vista_replace_loop_product_thumbnail is a custom function where we will write code to remove the default product thumbnail on shop/category pages and also insert new product image from product image gallery.

Here woocommerce_template_loop_product_thumbnail is the function hooked onto woocommerce_before_shop_loop_item_title action hook to generate product thumbnail on shop/category pages. Using remove_action we are removing the output of this function (product thumbnail). If you view the shop/category pages now, you will find blanks in place of product thumbnails.

Next, we will use the same action hook to generate the replacement.

Woocommerce Product Category Page Template

Here vista_replace_product_thumbnail is another custom function that will be used to pick up the replacement from product image gallery and insert in place of the product thumbnail (which is removed by now).

The declaration global $product gets us the current product on which the action hook is running.

Woocommerce Product Loop Template Download

$product->get_gallery_attachment_ids()[0] gets us the first image id in product image gallery.


Then we are outputting the image by assigning the image path to wp_get_attachment_url( $attachment_id ) which gets us the first image of the product gallery.

Thats it. The full code for this is given below.

By the way – all this code goes to functions.php file of your theme (it can be placed in a plugin also – that is a topic for another article).


Comments, feedbacks are welcome.