Customize the WooCommerce Shop and Product Pages with Storefront Powerpack

- written by

For as long as I have been working with WordPress, I cannot tell you how many times beginning builders has asked me about doing some tweaks to the theme they are using for a project. Sure, some are customizing a theme with their development skills, yet others are still learning the ropes. More often it’s more about colors, fonts and some pretty basic layouts. There are so many options these days between page builders and other plugins that now WordPress users can do a lot of without knowing code. And that’s a good thing.

The Storefront theme from WooCommerce is one of the most popular themes out there for WooCommerce shops. What makes it so great is that there are child themes available as well, and extensions to bring even more to the table.

Customizing Storefront with the Powerpack

The Storefront Powerpack extension gives you the ability to change the store’s fonts and colors. You have more control over your header and the page layouts around checkout and other elements. And it delivers the ability to customize without knowing code, or if you need a quicker build.

Once installed, you will find the Powerpack features in your customizer, which gives you all these options.

Designer

This cool option lets you style the CSS (without the coding) by clicking on an element on the page. Simply click Add a Style, and choose an element to highlight. In this example, I am clicking on the single product or what is called loop product. You will notice it also highlights the other product on that page to tell me what all is going to be affected by the changes I make.

I could have also went as detailed as just the button.

Going back to the Loop Product, once I click on it, I get all these options for changing that specific element.

You will be able to style just about any element of your Shop page as well as your Product page.

Layout

The layout options give you a couple of choices for the page layout width and for adding a custom frame. If you do add the custom frame, you can easily change the background color.

Checkout

Here you have some great options for your checkout page. You will get three different layouts for the checkout page, as well as Distraction Free Checkout, Two Step Checkout, and Sticky Order Review.

There are three layouts:

Default – the layout that comes with the Storefront theme.

Stacked – the customer input area is now moved to the top with the order below it.

Columns – Here you will find the customer input and order divided into two columns.

The other three options include:

Distraction Free Check – this removes a lot of the clutter to put the focus on checkout.

Without this option:

With the distraction free view, removing header elements, menus, breadcrumbs and foot elements:

Two-step Checkout

This option separates out the customer details and the order summary into two pages. And if you want, you can also have the distraction free option check here as well, as I have done in this example.

Sticky Order Review

The review section will stick to the top as the customer scrolls down the page to the Place Order button.

Header

This option gives you the power to rearrange and toggle all the elements in your header. You can also add, resize and move the components around. In addition, you can choose to stick the header to the top of your browser window when customers are scrolling through a page or post.

You can easily customize your copyright text in the footer, toggle the Storefront/WooThemes credit there, and a gain control of it when viewed on smartphones.

Homepage

With Storefront comes a Homepage template that gives you a nice layout consisting of Welcome text, product categories, recent products, featured products, top rated products, on sale products and best sellers. But if you would like more control over this, the Powerpack works great here. Some of these areas you may choose not to display and it gives you the ability to hide them and also to set the number of columns for each, from 1 – 6 columns. You will also be able to add a description below each one and a view more button.

Product Details

Your product page layout also has some options. The page layout itself can be default or full-width. And like the checkout page, you have the Gallery Layout options.

Default Gallery Layout – your standard layout that comes with Storefront.

Stacked Gallery Layout – This moves all the product details from the right side of the page to below the image.

Hidden – The one removes the product image. You might wonder why you would want to do this, but having used WooCommerce in the past for selling services, and having to think of an image for those, it came in handy in such instances.

Also, in the settings, you will find options to toggle the product tabs, related products, product description and product meta on and off. Again, think about the times you might want to hide one of these areas globally on the store. The related products was one of those.

Messages

And for all those messages that pop up with the default background color, you can control those as well.

More Storefront Customizations

As you can see, this gives you a lot more control over the Storefront theme, though I’ll admit that the free Storefront theme by itself it a great option for online stores powered by WooCommerce.

There are some other extensions as well, both free and premium. I encourage you to look at the Storefront Extensions Bundle that gives you even more or if you are looking specifically to add a mega menu, you can do that as well. There is another free plugin that hasn’t been updated for awhile, but allows text customizations on simple things like buttons, tabs, etc.

And if you want to display a product category on the shop page, you can do that with this plugin.

So I would certainly check our the Storefront Powerpack extension.


Only the posts on the builder blog here may include affiliate links. If you click on them and make a purchase, I'll get a commission, at no cost to you.