This is a guest post by Towhidul Islam of Atlantis Theme – if you like the article, make sure to thank him in the comments!
With 100,000 active users, Storefront is dubbed as the “official WooCommerce theme” as it is designed, developed and maintained by WooCommerce Core developers themselves.
It follows the same WooCommerce philosophy – flexibility: the latest version has 48 Action Hooks & 61 Filter Hooks (Storefront Hook Reference by WooCommerce).
One of the most common questions while working with any WordPress theme is: “How I can tweak the look and layout of my theme?“. For experienced WordPress users, this is not an issue – but for users who don’t want to get their hand dirty with CSS and PHP, it can be daunting.
The good news is that there are Storefront plugins that solve this exact problem. And you don’t have to learn coding to modify the look of your Storefront theme 🙂
Customizing Storefront with Storefront Design Customizer
Let’s see how the plugin works and what can you do with it. For example, you can change layout, add new homepage sections, edit header & footer and do some cool color & font customization.
Storefront Design Customizer gives you more control over your theme customization. Once installed, you will find the additional Storefront Design Customizer features in your WordPress Customizer (Appearance -> Customize).
Blog Archive & Single Post Customization
Blog Customizer will let you select a layout for single posts. You can remove or hide elements like post date, author name, tag, categories and much more.
Using this plugin you can easily customize the existing Storefront homepage sections. You can set the number of product columns, set section background image, add section description and much more.
Besides, you can add extra homepage sections like WooCommerce Featured Product Slider, Feature Blocks, Product Category, Blog Posts.
WooCommerce pages customization – this is where Storefront Design Customizer shines. You can change the layout of WooCommerce categories, change shop page product layout, width, product column, title color & many more features.
Storefront Design Customizer comes with 100+ carefully selected Google Font pairings along with built-in modular type scale. Type scale will automatically select the best heading font size based on your body font size. Besides, you will be able to change your site logo font size. These new features (and many other we didn’t mention here) will give you full control over typography.
Header & Footer Customization
Using the new customizer controls you can easily change header layouts, change colors, remove search box, customize the header cart – as well as customize the footer credit text.
Storefront Design Customizer vs Blog Customizer plugin
Storefront Design Customizer offers more flexibility compared to Blog Customizer plugin by WooCommerce. For example, you can apply 5 different layouts to single posts and display the post archive posts to 1, 2, 3 or in 4 columns.
Storefront Design Customizer vs Storefront Powerpack plugin
Storefront Design Customizer was built on a different philosophy than Storefront Powerpack plugin by WooCommerce. Powerpack follows a builder approach where you have to point & click to select the element, then add styles (color, font size etc) to this element.
On the other hand, Storefront Design Customizer is built around answering one question “Does this process save time?”. Just click on any prebuilt layout and you are good to go.
There are prebuilt layouts for single posts, post archive, homepage sections, product archive, single product pages, 150+ Google Font Pairings and many more.
It also comes with various homepage sections like Featured Product Slider, category section with subcategories, feature blocks, topbar, product grid, and so on.
Final thoughts on Storefront Design Customizer
Customizing Storefront WooCommerce theme just got really, really easy. Storefront Design Customizer is probably worth a try. Here are useful links for you:
Live Demo: https://www.storefront.atlantisthemes.com/
Official Plugin Page: https://atlantisthemes.com/storefront-design-customizer/