21 tips, tricks and CSS tweaks for WooCommerce Storefront

These WooCommerce Storefront theme tweaks have been curated from the most common questions we’ve found on the web. We really hope you find them useful.

If you have any questions, please post them in the comments box below 🙂

Storefront Pro now makes customizing the WooCommerce Storefront Theme incredibly easy

We’ve now released a plugin called Storefront Pro.

This let’s you easily customize and modify the WooCommerce Storefront Theme.

CLICK HERE TO READ MORE ABOUT STOREFRONT PRO.

Either watch the full video, or use the shortcuts below that link specific areas.

And here are your tweaks

NEW TIP! How to create a beautiful fullscreen Storefront website

Here’s a new tutorial on how to create a fullscreen website like the one below.

Click here to view the WooThemes Storefront fullscreen tutorial

WooThemes Storefront fullscreen website tutorial

How to remove gap in Storefront Theme footer

.footer-widgets { padding-top: 0; }

How to change the background color and text color of the Storefront Theme Demo store notice

.woocommerce-store-notice
{
color:white;
background-color:black
}

How to remove space between Storefront Theme page content and footer

.home #primary,
.home #main,
.home #main > article {
margin-bottom: 5px;
}

How to show Shop page products in two columns (mobile view)

/* 2 column-mobile */
ul.products li.product {
width:46.411765%;
float:left;
margin-right: 5.8823529412%;
}

ul.products li.product:nth-of-type( 2n ) {
margin-right:0;
}

@media only screen and (min-width:768px) {
ul.products li.product:nth-of-type( 2n ) {
margin-right:5.8823529412%;
}
}

How to remove the Storefront Theme header but keep the menu

#masthead > .col-full,
#masthead .site-header-cart {
display: none;
}

How to remove the underline from Storefront Theme Hyperlinks

In version 2.4.5 of the Storefront theme links are underlined by default. If you want to remove them then the following CSS will do it for you.

How to remove featured images on Posts on WooCommerce Storefront theme

Click here to get the snippet – add to your functions file

How to change the colour of the Horizontal lines on the Storefront Theme homepage

Simply add the following code to your child theme’s custom.css file. Thanks to James Koster for this one

How to style Storefront Theme widgets

Add and amend the following css to your child theme’s custom.css file

How to customise the Storefront Theme WooCommerce on sale badge

Add the following code to your child theme’s custom.css file.

How to move the Storefront Theme sale badge (i.e below the product picture)

Add the following code to your child theme’s custom.css file.

Thanks to Nicola Mustone for this one

How to the change the size of the logo, secondary navigation and search bar for the Storefront Theme

Add the following code to your child theme’s custom.css file.

Thanks again to Nicola Mustone for this one

How to Remove the Storefront Theme sidebar on WooCommerce product pages so they go full width

Add the following code to your child theme’s functions.php file.

Also add this css

Thanks to Matty Cohen for this one

How to align your menu to the right of the logo on Storefront Theme

We’ve developed a free plugin that will do this for you. You can get our free Storefront Align Menu right extension here.

How to add a top bar to Storefont Theme (for cool things like social icons or a welcome message)

Open you child theme’s functions.php file and paste the following code in.

Then add some css to your custom.css file – here’s an example (thanks to WooThemes for this tutorial)

How to add a custom message to your Storefront Theme top bar

Find the code that you used when you created the top bar (see previous tweak).

Replace with this

For more options visit this WooThemes support article. Note: We’ve also found this new plugin that adds extra widget areas to your header. Visit the Storefront Top Bar plugin on WordPress.org.

How to make Meta Slider full width with the Storefont Theme

Meta slider is one of the most popular free sliders available on WordPress.org. This bit of code will stretch the slider to be full width. Add this code to your child theme’s functions.php

How to add extra Google Fonts to the Storefront Theme

Here’s a great plugin that will do this for you. Visit the Google Fonts WordPress plugin.

How to remove the search bar from the Storefront Theme header

Add this code to your child theme’s functions.php

Note: An easier way to do this is by using the WooThemes Storefront WooCommerce Customizer plugin.

How to hide the Page Titles in the Storefront Theme

Here’s a free plugin that will help you do hide page titles in Storefront.

How to remove ‘designed by WooThemes’ in Storefront footer

Add the following code to your child theme’s funtctions.php file

How to add Font Awesome icons to your Storefront Theme menu

Here’s a free plugin that should do this for you. Visit the Font Awesome for menus plugin on WordPress.org.

How to rename ‘Navigation’ in mobile view on the Storefront Theme

Paste this code into your child theme’s functions.php file

Then just modify the text here

Note: You’ll need to be using a child theme for this one to work

How to add a customer avatar in the Storefront Theme ‘My Account page’

Add the following code to your child theme’s function.php file

Then add the following css to your child theme’s custom.css file

Where can I find free video tutorials on the Storefront Theme?

We’ve produced the following free WooThemes Storefront video tutorials on a) How to set up Storefront b) How to add a parallax hero area to Storefront c) How to use the WooCommerce Storefront Customizer d) How to use the Storefront Designer.

How to customise the blog layout on the Storefront Theme

Here’s a little video tutorial that shows you how to do this. This uses the Storefront Blog customizer plugin from WooThemes.

How to find out what’s changed in the latest version of the Storefront Theme

You can view the changelog for WooThemes Storefront here.

Where can I get a free Storefront Child theme

You can download our free blank Storefront child theme here.

How to change the WooCommerce Storefront Theme Footer Height

Here’s some simple css 🙂

#23 Want more tutorials on the Storefront Theme?

Here’s our current list, just click to view.


Comments

58 responses to “21 tips, tricks and CSS tweaks for WooCommerce Storefront”

  1. Hi Jamie,
    Thank you for your great articles and videos. They are helpful and well written. You are quickly becoming the go to guy for woo commerce storefront. Keep up the good work.

    1. Jamie Marsland Avatar
      Jamie Marsland

      Great tks Mark 🙂

      1. Michael Avatar
        Michael

        Hi how would you remove the little semi transparent tab that’s displayed over right sidebar widgets and the jagged edge bottom of same in deli theme? thanks Michael.

    2. Great tips, definitely helped me get a better understanding of the way things are set up.

  2. Thank you for this wealth of info! I suddenly had to find another ecommerce theme when the developer of the one I was using stopped support. I am trying to “create” a new site in less than 7 days for a launch!

    1. Jamie Marsland Avatar
      Jamie Marsland

      Good luck Melissa 🙂

      Jamie

  3. Hi Jamie,

    Thanks for these great tips and tricks!

    Annie

  4. Hi thanks for providing great snippets. Is there a way I can I add a custom logo without using Jetpack?

    Thanks dlab

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi,

      Yup check out the code below the video 🙂

      Jamie

  5. #21 should have been #1 ahah!!

    I spent ages fiddling with making a child theme for the first time!

    Oh well new skill in the bank 😛

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi George,

      100% agree with you 🙂

      We’ll make the change,

      Jamie

  6. Hey!

    thank you so much for these.

    Do you think you could update the “#16 How to rename ‘Navigation’ in mobile view on Storefront” section?

    There has been updates since, and this code no longer works….it does change to “Menu” but the toggle function is disabled.

  7. Hi there! Could you also provide an updat on “#8 How to add a top bar to Storefont (for cool things like social icons or a welcome message)”

    no longer working

    thank you!

  8. Max Powers Avatar

    Hi,

    I would like to change the Navigation. I could change the colors and the fonts, but there’s some lines that I can’t change or delate.

    See the screenshot: https://www.dropbox.com/s/bgm9gemlcvt422c/deli-navi02.jpg?dl=0

  9. Hello, Thanks for all the tips and tricks! I used a couple successfully, but No. 6 failed, do you have any clue why it would be please?

    #6 How to Remove the sidebar on WooCommerce product pages to go full width

    Something may have changed in this code as suggested… I put it in the child theme functions file and it caused the site to break, had to delete it via ftp. I should have thought to copy the error message to add here. It made the site go completely blank.

    1. Jane, was the error message this:

      Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘remove_storefront_sidebar’ not found or invalid function name in /home/healthygs/healthygs/wp-includes/class-wp-hook.php on line 298

  10. Nice work. Please #8 How to add a top bar to Storefont (for cool things like social icons or a welcome message) is not working at all for me. I have have tried putting the code directly into the header.php but still did not work.
    your quick response will be appreciated.
    Thanks.

    1. I am facing the exact same issue, nothing is showing up.

      1. Tshanina Avatar
        Tshanina

        When adding the code for #8 you’ll need to start the code at

        “function storefront…”

        It doesn’t need the ?php at the beginning – that line of code is causing it to give the error.

  11. Hello, in my functions.php its said that i have an error at line 12, it doesn’t recognize what the brackets do. am i doing something wrong?

  12. Francesco Avatar

    HI.. I cannot find anything about how to change the width of the drop-down menu elements.. There’s a way to do it in a child theme..? Thanks

  13. Thanks these really saved my azz

  14. Thank you very much for your tips !! (y)

  15. Hi Jamie
    This is all best, I have a small question too. How can I toggle mobile menu earlier in this theme? Currently it goes to mobile menu when vp is smaller than 767px.

  16. So I implemented #12 and #14, and I tried using the customizer to change my header background color to White.. the next time I clicked update on my php editor, I got this error.. what is going on? How to fix?

    Parse error: syntax error, unexpected ‘<' in /home4/mywebdes/public_html/bodyboy.com/wp-content/themes/storefront-child/functions.php on line 3

  17. How would you make the whole theme a fixed width on desktop view? The same width as the middle column. Will the Pro plugin allow me to do this?

  18. Hi!
    How Could I delete the Bar Search Mobile?
    I deleted the header Desktop and I wanna do the same at Footer Mobile.

    Thanks!

  19. Hello and thank you so much for this information.
    I am trying to make the slider full screen. I followed your directions by placing the code in the functions php however, the slider shows up on all my site pages and not just the home page. Any suggestions how to fix this?
    Thanks again!

  20. Hi Jamie Marsland ,
    i was looking for suck kind of plugin “STOREFRONT PRO” it just great plugin with some necessary feature i would like to have this one

  21. Thanks a lot. Is there a way to decrease the height of footer in Storefront?

  22. Hello,
    I have a background image set that I really like. The problem is that I cannot see the text very well because of it. How do I add a white space or padding to all my text including: product text, blog and page text, and widget text?

    Please help me solve this as quickly as possible.

  23. Hi,

    I am using the Storefront theme (but not child theme).

    1. Is there any CSS coding for editing the search bar style (more rounded and longer)?

    2. I tried searching for removing the shopping cart icon on the top of the page but none of the CSS coding is working. Is there any other way?

    3. How to filter up the color by category? I have already add the color filter but it doesn’t filter up by different category.

    4. Is there any plugins that can check broken External/Affiliate Links?

    5. Is there any other plugins that can update the external products features like price, sales and availability?

    Thank you.

    1. Hi Nur, just try to overwrite the original Storefront CSS. It should be here somewhere:
      wp-content\themes\storefront\assets\sass\base\icons.css
      Change the content

      .site-header-cart .cart-contents::after {
      content: “\f291”;
      }
      That’s all.
      Cheers,
      kadamba

  24. i recently installed the storefront theme. However, i am not seeing the footer section nor am i seeing the menu section.

  25. Jamie,

    I’m so thankful for your tips here, it shortened a great deal of work on my end! So 1st off, thank you!

    Second on number 6 talking about the sidebars. I’ve copied the code directly and received an error, I’ve then changed the ‘get_header’ after add action to ‘init’, instead and I receive the same error regardless. I’m wondering if it’s calling for one thing and it isn’t there. Here is the error message.

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘remove_storefront_sidebar’ not found or invalid function name in /wp-includes/class-wp-hook.php on line 298

    Any ideas message me back please.

    1. Benjamin van Caspel Avatar
      Benjamin van Caspel

      There’s a line of code missing from that snippet should look more like this:

      add_action( ‘get_header’, ‘remove_storefront_sidebar’ );
      function remove_storefront_sidebar() {
      if ( is_product() ) {
      remove_action( ‘storefront_sidebar’, ‘storefront_get_sidebar’,10 );
      }
      }

      1. This code in your reply to #6…

        add_action( ‘get_header’, ‘remove_storefront_sidebar’ );
        function remove_storefront_sidebar() {
        if ( is_product() ) {
        remove_action( ‘storefront_sidebar’, ‘storefront_get_sidebar’,10 );
        }
        }

        still does not work – you replied in 2017 and now is 2021!

  26. Hi! How can I hide the tags from everywhere? I mean from the post page, and from the categories pages? Thank you!

  27. Thanks you so much, it’s very helful!

  28. Ravindha Silva Avatar
    Ravindha Silva

    I installed the plugin (storefront jetpack) to align the nav menu to the right of the logo. But it hides the search box too. I want to keep the search box, while aligning the menu to the right of the logo.

    Anywway to chieve this?

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi Ravindha

      Storefront jetpack is not currently being developed, as we are now 100% focused on our storefront pro plugin 🙂

      here’s the link to storefront pro

      kind regards
      jamie

  29. I have storefront pro, but I was hoping i would be able to customise the section headings in the homepage as shop by category, new in etc does not fit my shop. how can i do that please

      1. Thanks Jamie I will give a try

  30. # 6 seems to be missing the line:
    function remove_storefront_sidebar() {

    Jim

  31. thank you for making this list of storefront features…i am going to need to use this to help my clients new site

  32. Hi,

    Great site! I have 2 plugins from you.

    However I have issue with #8; storefront_before_header does not place the topbar before the header but directly under it. I tried the storefront topbar plugin as well from Wooassist, but exactly the same thing happens.
    I first tried on a child theme with storefront as parent, the directly on storefront. Nothing changes.
    what could be the issue ?

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi Anna,

      If you are using Storefront Pro you can use the ‘Header Bar’ feature. Go to Customize / Header and Navigation / Enable Header bar

      Then the header bar widget area (in widgets) will work and you can put any widget (e.g text) in there

      jamie

  33. Hi,
    to adjust the footer widget is in wp 5.0.2 not working. Any tip?

  34. Super stuff. I love it. Thank you so much. One question if I may: how can I move the standard storefront menu to the topbar? Any guidance would really be appreciated. Thank you so much.

    1. Jamie Marsland Avatar
      Jamie Marsland

      Thanks Lode 🙂

      That’s not quite possible with some bespoke development – however our Storefront Pro plugins makes this easy https://www.pootlepress.com/storefront-pro/

  35. Hi,

    Your topic is realy helpfull thanks ! I used some tips you give but one of them don’t work on my website, i can’t remove the underline from hyperlinks.

    Can you help me to do it please?

  36. Great stuff, i really love the way how you explained. Thank you for the help!!

  37. Thanks a lot for this guide!

    I did the “How to show Shop page products in two columns (mobile view)” tweak and it´s great!

    But depending on how many characters I use for the product names, the names end up using one, two or more rows, which makes the “Add to baske” buttons in two columns uneven (if, for example, the product in the left column has two rows of text, while the product in the left column only uses one row for the product name).

    Is there a way to always have the top of the “add to basket” buttons level with each other?

    Thanks!

Leave a Reply

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