101 design customizations for WooCommerce Storefront

101 design customizations for WooCommerce Storefront 2

101 Design Customizations for the WooCommerce Storefront theme

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. It’s now been downloaded over 1 milliion times – so it’s very popular, and for good reason.

Storefront is a beautifully built theme; it’s lean, fast and stylish. With a bit of customization it’s a great theme to build your online business.

All the customisations below have achieved by using our Storefront Pro plugin and we hope you find them useful.

If you have any questions, please feel free to leave them in the comments below.

Thanks for taking the time to pootle,

Jamie m

How to customise the WooCommerce Storefront theme Primary navigation

  • align menu right
  • align logo centre
  • align logo inside the navigation
  • add a hamburger menu
  • add a left vertical navigation menu
  • change the fonts in the your menu
  • change the letter spacing in your menu
  • change your menu items to upper case
  • change the background color of your menu

How to customize the WooCommerce Storefront Secondary navigation

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

How to customize the WooCommerce Storefront header and search box

  • Create a sticky header
  • Turn off the default WooCommerce search in the header
  • Change the size of the search box in the header
  • Change the color of the search box background and text color
  • Add rounded corners to the WooCommerce search box
  • And cool search icon to the primary navigation
  • Choose whether to search for posts/pages or products from the primary navigation search

How to customize the WooCommerce Storefront mobile experience

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

How to customize the WooCommerce Storefront shop page

  • make WooCommerce Storefront shop pages full width
  • create a masonry shop page with WooCommerce Storefront
  • change how many columns your products are shown in
  • select the number of products per page with WooCommerce Storefront
  • change product alignment
  • WooCommerce Storefront flip product images
  • create infinite scroll product pages
  • display or hide product results count
  • display or hide product sorting
  • display or hide product image
  • display or hide product title
  • display or hide sale flash
  • display or hide product rating
  • display or hide product price
  • display or hide product add to cart button
  • display or hide breadcrumbs on woocommerce pages
  • enable enhanced woocommerce mobile styling

How to customize the WooCommerce Storefront product pages

  • full width Product Gallery
  • hero Product
  • hide breadcrumbs
  • show product sharing icons
  • display or hide product tabs
  • display or hide related products
  • display or hide product meta

How to customize the  WooCommerce Storefront checkout pages

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

Customizing WooCommerce Storefront content

  • display or hide accessibility box around active links
  • display or hide breadcrumbs on pages
  • display or hide breadcrumbs on posts
  • display or hide breadcrumbs on archives
  • display or hide page title

Customizing WooCommerce Storefront fonts

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

Customizing WooCommerce Storefront layout

  • make the website full width
  • add sidebars to the left or right

Customizing WooCommerce Storefront blog and posts page

Customizing the WooCommerce Storefront blog page

  • change the layout of your blog
  • create a magazine post grid layout
  • align featured images to the left, right and centre
  • change the size of post headings
  • change the color of headings
  • turn off meta information on posts
  • show full posts or just the excerpt
  • change the excerpt length
  • change the read more text

Customizing WooCommerce Storefront posts

  • Create beautiful full width posts
  • Create posts with the title in the featured image
  • Hide posts meta information
  • Changes post heading size and color

Customizing the WooCommerce Storefront footer

  • change the number of columns in the footer
  • change the background color of the footer
  • add your own custom text to replace where it says ‘Storefront designed by WooThemes.’

How to style WooCommerce Storefront footer widgets

  • change footer widget header size
  • change footer widget header color
  • change footer widget header style (bold, italic, underline, uppercase)
  • change footer widget text color
  • change footer widget text size
  • change footer widget text style (bold, italic, underline, uppercase)
  • change widget link color
  • change widget bullet color

Customizing individual WooCommerce Storefront pages

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

Customizing WooCommerce Storefront mobile pages

  • hide footer in Mobile view
  • hide header in Mobile view
  • hide sidebar in Mobile view
  • change background color for mobile pages

Taking your store to the next level

  • check out this video that shows you how to create a beautiful store layout using Pootle pagebuilder.

10 thoughts on “101 design customizations for WooCommerce Storefront”

  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?


  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

  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