Alter WooCommerce Product Layouts Display With Little Effort

Alter WooCommerce Product Layouts Display With Little Effort

In this tutorial, I will demonstrate how you could manipulate WooCommerce product layout to provide additional details. This is an excellent way of using the available data for enhancing user experience.

Since WooCommerce product pages are simply posts with a product type attached, I  will take advantage of the standard WordPress post functions to create the display elements such as:

  • the_title()– Displays the name of the product.
  • the_excerpt()– Displays a brief description of the product.
  • the_content()– Displays the full description of the product.
  • the_permalink()– Displays the URL of the product.
  • the_ID()– Displays the product’s ID.
  • the_post_thumbnail()– Displays the product image.


You can put this code in your theme file. Alternatively, you can create a custom template. for this, use the following:

WooCommerce Products Display

The easiest solution for displaying a product’s price is to use the get_price_html method:

I hope that you have understood the code in the above snippets. Here is the complete code you need to  of WooCommerce Product Layout Display.


In this tutorial, I discussed how you could easily alter the WooCommerce product layouts display to provide more information to the visitors. If you need help with the code or would like to add to the discussion, do leave a comment below.

  • Thanks, there are some really useful tips here. For anyone who wants to alter the display of WooCommerce products in more advanced ways, I’d recommend WooCommerce Product Table. This lets you display products in a table with sorting, filtering etc. and includes extra product data and various extra features, and you don’t need to edit any code.


WP Blog is dedicated to getting you up and running
in the field of Wp blog wizardry - No Wands Involved!