How to Display WooCommerce Storefront Blog Excerpt

If you are running a WooCommerce store, running a blog will significantly impact your store. This is because a blog helps to drive more than 50% of your traffic. However, if you want to run a blog, you need to provide relevant content to drive visitors to the site.

Table of Contents

Many blogs in the past preferred to display the full post. However, you need to display a snippet view or a blog excerpt view for you to entice users.

Excerpts’ views have become very popular. This is because the blog content is more scannable, with posts lined up and a Read More button available after each one. Having excerpts allows visitors to browse through the posts and click on the article they want to read more about.

In this article, I will share how you can display blog excerpts on the blog page. This is how the blog posts are displayed on the Storefront theme:

You will notice that the articles are displayed in full, and visitors will have a hard time to scan through all the content you have.

Why Show Only Blog Excerpts?

When you have many blog posts on your blog, displaying excerpts will make all your content visible. Short excerpts show the visitor that you have a lot of content that they can indulge in.
Visitors will not have a hard time choosing content that is interesting to them. Moreover, it helps bring more attention to your old posts, meaning you need to keep those old posts updated.
It helps to trim down lengthy posts, and it will help you make your blog more manageable. For example, if you have a 2,000-word blog post, it is enough to cover the whole screen. Excerpts help to take attention away from other blog posts.
Excerpts help you to reduce page load times since the page will only be displaying post snippets.
Excerpts help to increase page views and time on the site. This is because visitors read more of your content, and you will effectively increase user’s time on your site, giving more opportunity for conversion.

With that said, let’s see how you can add excerpts of blog posts.

Steps to Display Blog Excerpts in the Storefront Theme

Here are the simple steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to display blog excerpts in the Storefront theme.
Add the following code to the php file:

add_action( 'init', function() {

            remove_action( 'storefront_loop_post', 'storefront_post_content', 30 );

            add_action( 'storefront_loop_post', function() {

                        echo '<div class="entry-content" itemprop="articleBody">';

                        if( has_post_thumbnail() ) {

                                    the_post_thumbnail( 'large', [ 'itemprop' => 'image' ] );

                        }

                        the_excerpt();

                        echo '</div>';

            }, 30 );

} );

After adding the code, this is how the posts will appear:
However, you can add a small except explaining the post, and a read more link as shown below:
Once you click on Update, this will be the outcome:

Conclusion

In summary, I have shared some of the reasons you need to add post excerpts and how you can add them. If you have not added excerpts on your blog, I recommend that you add them using this brief tutorial. If you do it, you will get more page views and increased time on site. However, if you are not sure how you can add the code, please use a plugin or contact a WordPress developer.

Editorial Staff

How to Display WooCommerce Storefront Blog Excerpt

Why Show Only Blog Excerpts?

Steps to Display Blog Excerpts in the Storefront Theme

Conclusion

Similar Articles

Related