Homepage-Tooske-Ragas
Tooske Ragas is a famous Dutch presenter, this website was built using Storefront Pro. 

101 Design Customizations for WooCommerce Storefront

Introduction

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 650,000 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

Customising WooCommerce Storefront 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.

6 thoughts on “101 design customizations for WooCommerce Storefront

  1. Hi,

    I love Storefront Pro, but missing the option to hide or change the attributes label of products with variations?

  2. Hi Annie,

    That’s a good idea – we’ll look at adding that option :)

    Jamie

  3. […] If you would like to see detailed video walkthroughs of what’s possible with Storefront Pro click here to see 101 design customizations for WooThemes Storefront. […]

  4. […] 101 design customizations with Storefront […]

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

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

Leave a Reply

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