Customize Your WooCommerce Shop and Product Pages with Storefront

For as long as I have been working with WordPress, I cannot tell you how many times someone has asked me about doing some tweaks to their theme. For many, it’s not some major production. 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. What makes it so great is that there are child themes available as well, and extensions to bring even more to the table. I will be writing some posts on those extensions, but I’d like to start out with the Storefront Powerpack.

Customizing Storefront with the Powerpack

The Storefront Powerpack extension gives you the ability to change your 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.

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.

Page 1 – Your Details

two step checkout page 1 storefront powerpack

Page 2 – Your Order

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.

Footer

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 your 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 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.

So I would certainly check our the Storefront Powerpack extension. And if you are just looking to change your blog archive and posts layouts on your Storefront theme, you can check out this post.

do the woo weekly news

Don't have the time to keep up with my content on a daily basis?

Sign up for our weekly digest that covers my past weeks podcasts, tutorials and the news from the WooCommerce community.

I write this myself and it is delivered to your inbox every Saturday morning.