How to display Woocommerce product in a blog style layout?

In this tutorial we’ll learn how to display product in a blog style layout.

First of all create some products from backend.


This will be the default shop screen:


Now first of all we need to display one product per row just to display it like a blog. To do so add the following lines of code at the end of functions.php.

add_filter('loop_shop_columns', 'loop_columns');

if (!function_exists('loop_columns')) {

                function loop_columns() {

                                return 1; // 1 products per row



You can access function.php file here:


Now after adding these lines save the file and refresh the shop page. Now your shop page will look something like this:


Now we need to display product descriptions as well to shop page. To do so, add the following lines of code at the end of functions.php.

add_action( 'woocommerce_after_shop_loop_item_title', 'my_add_short_description', 9 );

function my_add_short_description() {

                echo '<span class="title-description">' . the_excerpt() . '</span><br />';


Now made the css changes as your requirements. For now our shop page will look like a blog.


Editorial Staff

ThemeLocation Provides Wordpress & Woocommerce development & Customization services. Have a Project? Contact To discuss

Leave a Reply

Your email address will not be published. Required fields are marked *