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:

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

11 thoughts on “WooCommerce: How to Customize Storefront Theme in a Few Clicks

  1. Is this no longer a thing?

  2. The Storefront customizer plugin is no longer available for download and has been closed by the author. Any updates on this post to keep it relevant? Are there other alternatives today? Thanks!

    1. Correct, thanks for that Adam. I knew they were working on a full revamp, so I just sent them a Tweet. I will update this article and reply to your comment soon ๐Ÿ™‚

    2. Am also curious about an update on this.

      Great site, Rodolfo.

  3. Geez.. why was the plugin removed?

    1. Ouch, no idea. Their premium version seems still available though – would you mind contacting the authors and let us all know? Thank you!

    2. Hey Christopher

      We are revamping the plugin with new features and planning to offer only premium version.

      Thanks for you interest.

      1. Good to know Towhid ๐Ÿ™‚

  4. Looks interesting. The Storefront is one of the best theme for WooCommerce. I see this plugin has a good future!

    1. Anh, thanks for your comment! You’re right, it seems this plugin is quite complete. Let’s see how it goes ๐Ÿ™‚

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

Your email address will not be published.