WooCommerce: How to Customize Storefront Theme in a Few Clicks

If your WooCommerce website runs on Storefront theme (same as Business Bloomer), then you probably know it doesn’t come with a lot of customization options.

For developers like me, Storefront theme is ideal: it comes with many “hooks”, so that it’s easy to remove, move or add layout elements within a few lines of PHP.

But for those who do not develop or have no intention to waste time troubleshooting missing commas or fighting with FTP clients, well, there’s a plugin for that. And it’s developed and maintained by WooCommerce itself, so you can’t go wrong with the purchase and you’re guaranteed to have a fully working, up to date piece of software for the long term.

So, here’s a quick overview of what the plugin does. Enjoy!

Meet the Storefront Powerpack Plugin.

Once you install Storefront theme (developed and maintained by WooCommerce as well) and you purchase Storefront Powerpack, you will immediately see a new section under WordPress Dashboard > Appearance > Customize > “Powerpack”:

By clicking on “Powerpack” you will get the full list of features and items you can customize:

Customize Everything. Without a Single Line of Code.

Now we’re going to take a quick look at each “Powerpack” section, so that you can immediately find out if this is the right product for your customization needs.

In details, and by following the order as seen in the previous screenshot:

• Designer: a handy tool to customize the style of any element. You can click on the “Add a Style” button, hover on any single element on the live website, and quickly apply Font Style, Font Family, Font Size, Line Height, Letter Spacing, Text Color, Margin, Padding, Border, Background without writing a single line of CSS.
• Layout: you can make the site full width, or frame it with a given max width and give content a background. 3 clicks and you’re done.
• Checkout: with one single click you can enable distraction-free mode and remove unnecessary disturbing elements on the most important page of your website. You can also play with the layout and multi-step options.
• Header: this is probably the most used feature, because not everybody needs a top bar menu, a header search bar and all the default header elements. Besides, you’d want to rearrange them and decide your own widths. It’s all very simple with drag and drop and resize functionalities.
• Footer: enable disable the mobile icon bar, which displays by default on the free Storefront theme.
• Homepage: Storefront theme comes with a “homepage” template you can apply to your static WordPress homepage. If that’s the case, then this section is helpful for customizing its content and the product categories / featured/ on sale default product grids.
• Messages: in default WooCommerce, error notifications show in red, success in green and info in purple. In here you can style their colors and make them consistent with your brand guidelines.
• Product Details: easily toggle related products, tabs, description and also set up page layout and gallery layout.
• Shop: similarly to “Product details”, you can manage all the shop related elements such as buttons, prices, rating, sale badges, images, sorting, alignment and so on.

A Quick Demo.

Your time is money so I won’t spend all my time posting screenshots and captions. I recommend you simply watch the following video and see if Storefront Powerpack is a good fit for you: