The Storefront theme from WooCommerce is a very popular and versatile theme. You may want to do a few customizations and are deciding if you need a developer to do them for you. Or maybe use a page builder. But if you want to do just a little customization to your blog archives, blog posts and your homepage, you may not need to go to all that work and expense.
If you are running your WooCommerce online store with Storefront, this is where the Storefront Blog Customizer extension comes in.
Using the Storefront Blog Customizer to Change Your Archive and Post Layouts
Watch this video or continue reading the post…
Once you have installed and activated the add-on, note that your homepage will need to be set for the blog. Now you will have a new tab in your customizer called Blog:
You get options for customizing the archive page, the single post page and the homepage:
Post Meta Display for Your Blog Posts in Storefront
You can see your options for where you want your post meta displayed. And for the page layout, you can set it to full width or magazine style.
The settings are the same for both the archive and the single post options. The only difference is that the archive page gives you a Magazine Layout option, which you can see below. For example, you can choose to hide the meta on the archive page but display it to the left of the content on the single post pages.
Post Meta Display Options
Here are examples of how it is displayed in each option:
Left of Content
Right of Content
And of course, if it’s Hidden, you won’t see it anywhere.
Blog Archive Layout Options
As noted, you can toggle on a full width option for just your archive page and/or your post page:
Your other option is a magazine layout that can be applied to your blog page only. The thing here is that the Storefront theme only shows full posts. So, as you can see here, using that option is not a good idea.
There is also a way to set your blog archive for excerpts by adding some code if you are comfortable doing that. But a lot of people would rather add a plugin, which is why you might want to use the free plugin Storefront Blog Excerpt.
With this plugin, you will get a Blog Excerpt tab added to your customizer. It will give you the options of selecting the length of the excerpt pulled from your post and choosing the size of the featured image as set in your theme. If you have already created post excerpts, it will pull those in instead.
As you can see, it is pulling in my excerpts. Depending on whether you show the sidebar or not on your archive page, setting it to full width makes for a cleaner blog archive page.
Homepage Layout Options
You can also control the look of the blog posts on your homepage. If you create a blank homepage with Storefront, you typically get several sections, including your recent blog posts. If we scroll down, we can now choose to show one, two, or three columns and up to twelve posts. I have it set for three columns and six posts and have the meta hidden:
An Added Tip
If you want to use this and don’t want all those sections to show on your Storefront homepage, you can use the free plugin Homepage Control, which lets you toggle the sections off and on. You can also reorder the sections you want to show with a simple drag and drop.
And lastly, if you are looking to simply add products or product lists to your pages and posts on your site, you can now use blocks to do this.
For more customization on the product side of this theme, check out Customize Your WooCommerce Shop and Product Pages with Storefront.