Customize WooCommerce Storefront Theme – 101 simple tweaks that will boost your sales

Customize WooCommerce Storefront Theme - 101 simple tweaks that will boost your sales 2

Here’s 101 ways to customize the WooCommerce Storefront Theme

Storefront is the official theme for WooCommerce, and it’s a great theme to use if you want to build an online shop with WordPress. Storefront has now been downloaded over 5 million times – so it’s very popular, and for good reason.

Storefront is a beautifully built theme; it’s lean, lightweight, and fast, which is really important for a successful e-commerce website.

However, the design customizations that come built-in the Storefront Theme are quite limited. But with the help of the Storefront Pro plugin, you’ll be able to customize the design of every aspect of the Storefront Theme and build a great-looking and professional website in no time at all.

Storefront Pro is a WordPress plugin that lets you customize the WooCommerce Storefront Theme without any coding required. Storefront Pro has been designed to boost your sales, and it includes many great features and options that are normally only available for top e-commerce stores.

WooCommerce site examples built with Storefront Pro

Storefront Pro Highlights

  • Storefront Theme customizer
  • Starter templates that you can import with one click
  • Customize WooCommerce Pages
  • Customize Blog Page
  • Live Search
  • Mobile site options
  • Product wish list
  • Product quick view

Starter templates

We know how hard it can be to find the perfect design for your website, so we created Starter Pro templates that are easy to customize and come with a variety of layouts. They’re free when you purchase Storefront Pro!

With these starter templates, you’ll have an awesome looking site in no time – without having to spend hours or days designing one from scratch.

storefront pro skins version 2

How to customise the Storefront Theme navigation

You can change the layout of your navigation menu to suit your needs with just a few clicks! This section will show you how to customize Storefront Theme navigation layout. This will help you create a website that looks great on any device and fits in with your brand. Plus, it’s easy to use!

Here’s what we’ll cover in the video below

  • How to align the Storefront navigation menu to the right
  • How center Storefront Theme logo
  • How to align Storefront Theme logo inside the navigation
  • How to add a Hamburger Menu to Storefront
  • How to add a left vertical navigation menu to Storefront
  • How to change the fonts in the your Storefront menu
  • How to change the letter spacing in your Storefront menu
  • How to change your menu items to upper case
  • How to change the background color of your Storefront navigation menu

How to customize the Storefront Secondary navigation

Storefront Pro is a great way to add a secondary navigation bar that runs along the top of the page, perfect for contact information, social icons and secondary menu items like ‘my account’. It’s easy to set up and it looks good too!

You can use this space for anything you want – from contact information to social media links.

Here’s what the video above covers

  • How to add social icons to your WooCommerce Storefront secondary navigation menu
  • How to add email and phone number to your Storefront secondary menu
  • How to add a header bar above your Storefront secondary navigation menu
  • How to change the fonts in your Storefront secondary navigation menu
  • How to customize the Storefront Search box

Storefront Pro has a built-in option that lets you add a highly visible search box right in the header. It’s proven to increase conversions by up to 20%. You can also customize your header with an image, logo or video and make it stand out from the competition.

Research undertaken by the Baymard Institute has shown that eCommerce sites perform better when the Search Box is clearly visible in the header.

Here’s what the video below covers

  • How to create a sticky header for Storefront
  • How to hide the WooCommerce search box in the Storefront header
  • How to change the size of the search box in the header
  • How to change the color of the Storefront search box background and text color
  • How to add rounded corners to the WooCommerce Storefront search box
  • How to add a cool search icon to the primary navigation
  • How to choose whether to search for posts/pages or products from the primary navigation search

How to customize the Storefront mobile experience

Mobile is the future of the web and we’ve got you covered! Storefront Pro has specific mobile options built right into the plugin. One of Storefront Pro highlights is the option to customize the mobile woocommerce grid. This option displays your shop page in a mobile friendly grid automatically on phones and tablets. The WooCommerce mobile grid can be displayed in either grid view, or list view.

Here’s what the video above covers

  • How to change the layout of the mobile WooCommerce Storefront shop page
  • How to create a grid layout of products for mobile
  • How to create an user toggle product option for mobile
  • How hide your store logo on mobile
  • How to display a search box on mobile menu
  • How to change the mobile menu background color and font color
  • How to change the mobile menu icon color
  • How to change the fixed mobile footer background color and icons color
  • How to turn on and off mobile fixed footer options – my account, search and cart

How to customize the Storefront Shop page

The WooCommerce Storefront Shop Page is one of your most important pages, and the Storefront Pro plugins adds lots of sales boosting options. You’ll be able to change the number of Shop Columns, add a wish list, turn on product quick view, remove the add to cart buttons, add a sales icon, and much more. It’s like having an expert in-house!

Make your store look great with these easy-to-use features that will help increase your conversion rates.

Here’s what the video tutorial below covers

  • How to make WooCommerce Storefront Shop Pages full width
  • How to create a masonry shop page with WooCommerce Storefront
  • How to change the number of columns for your WooCommerce products
  • How to select the number of Products per Page with WooCommerce Storefront
  • How to change Storefront product image alignment
  • How to flip WooCommerce Storefront product images
  • How to add infinite scroll for your WooCommerce Product pages
  • How to display or hide product results count when using Storefront
  • How to display or hide product sorting when using Storefront
  • How to display or hide product image
  • How to display or hide product title
  • How to display or hide the sale flash icon
  • How to display or hide product rating
  • How to display or hide product price
  • How to display or hide product add to cart button
  • How to display or hide breadcrumbs on Woocommerce Storefront pages
  • How to enable enhanced Woocommerce Mobile Styling

How to customize the Storefront Product pages

WooCommerce Product Pages are a great way to showcase your products and increase sales.

Storefront Pro makes it easy to choose a different product page template layout for your individual WooCommerce Product Pages. There are five pre-set Product Page designs for Storefront built into Storefront Pro, including full screen product layout, full width product layout and product slider product layout.

You’ll be able to create the perfect look with just one click of the mouse! And you can even preview how each design will look before you make any changes. It’s so simple that anyone can do it! Plus, all of these templates come with additional features like custom colors and fonts so you can customize them however you want!

Here’s what the video tutorial below covers

  • How to add a full width Product Gallery using Storefront
  • How to create a hero Product layout using Storefront
  • How to hide breadcrumbs on the Storefront Product Page
  • How to add social icons to the Storefront Product Page
  • How to display or hide product tabs on the Storefront Product Page
  • How to display or hide related products on the Storefront Product Page
  • How to display or hide product meta information

How to customize Storefront Checkout pages

We know that cart abandonment is a big problem for many stores. That’s why we created this option to help you reduce it.

When your customers are about to make their purchase, they’ll see the checkout page without any distractions – just the Cart and Checkout Pages. This will allow them to focus on completing their order with ease and confidence.

You don’t have anything to lose by turning on Distraction Free Checkout today! It’s part of Storefront Pro, so there’s no reason not to try it out and see how much of an impact it has on your store conversion rates.

Here’s what the video tutorial below covers

  • How to display or hide breadcrumbs on Cart and Checkout pages
  • How to enable distraction free Cart and Checkout

Customizing Storefront content

Storefront Pro also comes with extra options to customize the content appearance of the Storefront Theme.

  • How to display or hide accessibility box around active links
  • How to display or hide breadcrumbs on pages
  • How to display or hide breadcrumbs on posts
  • How to display or hide breadcrumbs on archive pages
  • How to display or hide page titles

Customize Storefront Theme fonts

Storefront Pro comes with the following options to style the Storefront Theme Typography.

  • How to change Storefront heading font, size, color, and letter spacing
  • How to change Storefront heading font style. Options include bold, underline, uppercase and italic
  • How to change Storefront body font, size, color, and letter spacing
  • How change Storefront hyperlink colors

Customizing WooCommerce Storefront layout

  • How to make a Storefront Theme website full width
  • How add sidebars to the left or right using the Storefront Theme

Customize the Storefront blog and posts

Do you want to make your blog stand out?

You don’t have time to spend hours on customizing your blog? No problem! Storefront has pre-made layouts that are ready for customization in minutes.

Having a blog is a great way to drive traffic and customers to your website, and Storefront Pro comes with some really great options for you to style your Blog and Posts.

Here’s what the Storefront video below will show you how to do

  • How to change the layout of your Storefront blog
  • How to create a magazine post grid layout using Storefront
  • How to align featured images to the left, right, and center
  • How to change the size of post headings
  • How to change the color of post headings
  • How to turn off meta-information on posts
  • How to show full content or just the excerpt
  • How to change the excerpt length using Storefront
  • How to change the read more text
  • Create beautiful full-width posts
  • Create posts with the title in the featured image
  • Hide posts meta information
  • Changes post heading size and color

You can customize the footer with logos, colors, and style. It’s easy to use and it comes with some great features for you to make your website look professional.

The footer is a perfect place for people who are looking for information about your business or want to connect on social media. It’s also an important part of privacy content so that visitors know how they’re being tracked online.

Here’s what the video below covers

  • How to change the number of columns in the footer
  • How to change the background color of the footer
  • How to add your own custom text to replace where it says ‘Storefront designed by WooCommerce.’
  • How to change footer widget header size
  • How to change footer widget header color
  • How to change footer widget header style (bold, italic, underline, uppercase)
  • How to change footer widget text color
  • How to change footer widget text size
  • How to change footer widget text style (bold, italic, underline, uppercase)
  • How to change the widget link color
  • How to change widget bullet color

Customize individual WooCommerce Storefront pages

With Storefront Pro, you can change the background of a page to be a photo, color or video. You can also hide header section per page and change the header color per page. The header background image is also customizable too! There are so many features to choose from that will make your store look great!

Here’s what the video tutorial below covers

  • How to change the background of a page to be a photo, color, or video
  • How to hide header section per page
  • How to change the header color per page
  • How to change the header background image per page
  • How to hide breadcrumbs per page
  • How to hide the sidebar per page
  • How to hide page title per page
  • How to hide footer per page
  • How to change footer background per page

Customizing WooCommerce Storefront mobile pages

Storefront Pro comes with the following options to customize the Storefront mobile pages.

Customize WooCommerce Storefront Theme - 101 simple tweaks that will boost your sales 4
Storefront Pro Fixed Footer settings – Change colour of icons and background / hide individual icons
  • Hide footer in Mobile view
  • Hide header in Mobile view
  • Hide sidebar in Mobile view
  • Change the background color for mobile pages
  • Hide icons in the fixed footer
  • Add wishlist icon to fixed footer
  • Remove fixed footer
  • Change colour of the fixed footer icons

Conclusion

The WooCommerce Storefront Theme is one of the most popular ecommerce themes, and is a great framework to build a successful online store. With the addition of the Storefront Pro plugin, and the many customization options included, you’ll be able to get a professional looking website up and running in no time.

You don’t need to be a web developer or designer in order to use Storefront and Storefront Pro! The Theme and Plugin have been designed for everyone from beginners who are looking for their first site all the way up to experienced developers who want total control over every aspect of their site’s design. We’re confident that we have something here for everyone!

10 thoughts on “Customize WooCommerce Storefront Theme – 101 simple tweaks that will boost your sales”

  1. Pingback: Storefront Pro version 3 now available - pootlepress

  2. Pingback: 21 tips, tricks and CSS for WooThemes Storefront

  3. Is there a video missing?

    Customizing WooCommerce Storefront layout
    •make the website full width
    •add sidebars to the left or right

    How do you remove Sidebars in the store pages? Is this configurable with Storefront Pro?

    Thanks.

  4. Hi, Like this, but miss function to adjust number of columns in upsells and related products under single product pages. I´m stuck here. Have you got any suggestions? Woocommerce Internet based information won´t work. Have tried a lot.

    Best Regards
    JA.

  5. Looking for a way to change the “View your shopping cart” icon on the right side of the menu bar. We have Storefront Pro but I don’t see any way to change that icon.

  6. Hi, I am using Storefront, and have placed an image in the Below Header widget. That image is not centering with the product categories below it. How do I fix that?

  7. It would be fantastic to see an option for dropping header components by page so as to retain consistent branding (the logo) but still go distraction free (nix menu and the Woocommerce cart bits) through the cart and checkout process.

Leave a Comment

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

Scroll to Top