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.

woocommerce

This will be the default shop screen:

woocommerce20

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:

woocommercewoocommerce

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

woocommerce22

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.

woocommerce23

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 *