Homepage-Tooske-Ragas
Tooske Ragas is a famous Dutch presenter, this website was built using Storefront Pro. www.tooske-ragas.nl/en

Introduction

Here's 101 ways to customize the design of your Woothemes 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 WooThemes 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

 

Customizing WooThemes Storefront Secondary navigation

  • add social icons to your 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

 

Customizing the WooThemes 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

 

Customizing the WooThemes 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

 

Customizing the WooThemes Storefront WooCommerce shop page

  • make shop pages full width
  • create a masonry shop page
  • change how many columns your products are shown in
  • select the number of products per page
  • change product alignment
  • 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

 

Customizing WooThemes 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

 

Customizing WooThemes Storefront checkout pages

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

Customizing WooThemes 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 WooThemes 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 WooThemes Storefront layout

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

 

Customizing WooThemes Storefront blog and posts page

Customizing the 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 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 WooThemes 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.’

Style WooThemes 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 WooThemes 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 WooThemes 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.

2 thoughts on “101 design customizations for WooThemes 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

Leave a Reply

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