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:

Related content

  • Storefront Theme Visual Hook Guide
    Here’s a visual hook guide for Storefront Theme by WooCommerce. This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations. Also, you can copy & paste in seconds and speed up your customization time. Let me […]
  • WooCommerce: Hide “Showing x-y of z results” @ Shop Page
    This is quite an annoying thing in WooCommerce when you have just a few products. Besides, if you only have 1 product in a given category, the notice “Showing the Single Result” will appear on top of the category page. So, how do we remove the whole “Showing 1โ€“15 of 178 results” element from the […]
  • WooCommerce: Add an Icon to the Add to Cart Buttons
    Ecommerce is all about user experience, and making it easier for people to add to cart and checkout smoothly. Reducing the number of checkout fields is a great idea for example – as well as graphically communicating your number 1 objective: “please add to cart now!”. So, how do you add an icon (or an […]
  • WooCommerce + Storefront Theme: Hide Homepage Title
    The Storefront theme displays the homepage H1 title by default, no matter if you use the “Default” or the “Homepage” page template. Of course, you could do it via CSS, with a simple “display:none”. Even better, you could completely avoid loading the homepage title by using PHP (SEOs out there: better not to load an […]
  • WooCommerce: 10 Crucial Issues That Should Be Fixed Right Now
    I just spent the last 3 days in Porto with another 2,300 WordPressers at the first in-person WordCamp Europe since Berlin 2019. I had a blast, held a nice (yet long) workshop, spoke to many, but got tired too soon. Later on, I realized that that tiredness was something more serious – in fact I […]

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. Follow @rmelogli

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 ๐Ÿ™‚

Leave a Reply

Your email address will not be published. Required fields are marked *