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. We’ll be adding to them over the coming months. We recommend that you use a child theme for these 21 tips and CSS tricks for WooCommerce Storefront and we’ve created a free blank WooThemes Storefront child theme for you here.
If you have any questions, please post them in the comments box below 🙂
Storefront Pro now makes customizing the WooCommerce theme incredibly easy
We’ve now released a plugin called Storefront Pro. This lets you easily customize and modify the WooCommerce Storefront.
CLICK HERE TO READ MORE ABOUT STOREFRONT PRO.
Either watch the full video, or use the shortcuts below that link specific areas.
- Customize your website with live previews
- Header styles (Watch video)
- Mega menus (Watch video)
- Font and typographic controls (Watch video)
- Page builder support (Watch video)
- Blog customizer (Watch video)
- WooCommerce customizer (Watch video)
- Footer customizer (Watch video)
- Social icons and contact information bar (Watch video)
- Customize individual pages (Watch video)
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](https://i0.wp.com/www.pootlepress.com/wp-content/uploads/2015/09/12034337_900665016653263_7243767880509462290_o-1024x561.jpg?resize=843%2C462&ssl=1)
How to remove the underline from 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.
a { |
text-decoration: none !important; |
} |
How to change the colour of the Horizontal lines on the Storefront homepage
Simply add the following code to your child theme’s custom.css file. Thanks to James Koster for this one
.page-template-template-homepage .hentry .entry-header,.page-template-template-homepage .hentry,.page-template-template-homepage .storefront-product-section {border-color: red;}view rawgistfile1.txt hosted with by GitHub
How to style widgets
Add and amend the following css to your child theme’s custom.css file
.widget-area .widget { |
color: red; |
font-size: 1em; |
} |
How to customize the Storefront WooCommerce on sale badge
Add the following code to your child theme’s custom.css file.
.onsale { |
background-color: #FFFFFF; |
border-color: #FF0000; |
color: #FF0000; |
} |
How to move the sale badge (i.e below the product picture)
Add the following code to your child theme’s custom.css file.
ul.products li.product .onsale { |
position: absolute; |
top: 137px; |
right: 62px; |
} |
by GitHubThanks to Nicola Mustone for this one
How to the change the size of the logo, secondary navigation and search bar
Add the following code to your child theme’s custom.css file.
@media screen and (min-width: 768px) { |
/* LOGO */ |
.site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { width: 30% !important; /* Use px values if you want, eg. 350px */ } |
/* SECONDARY NAVIGATION */ |
.site-header .secondary-navigation { width: 40% !important; /* Use px values if you want, eg. 350px */ } |
/* SEARCH BAR */ |
.site-header .site-search { width: 30% !important; /* Use px values if you want, eg. 350px */ } |
} |
Thanks again to Nicola Mustone for this one
How to Remove the sidebar on WooCommerce product pages to go full width
Add the following code to your child theme’s functions.php file.
add_action( ‘get_header’, ‘remove_storefront_sidebar’ ); |
if ( is_product() ) { |
remove_action( ‘storefront_sidebar’, ‘storefront_get_sidebar’, 10 ); |
} |
} |
body.woocommerce #primary { width: 100%; } |
Thanks to Matty Cohen for this one
How to align your menu to the right of the logo on Storefront
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 (for cool things like social icons or a welcome message)
Open you child theme’s functions.php file and paste the following code in.
<?php |
/** |
* Adds a top bar to Storefront, before the header. |
*/ |
function storefront_add_topbar() { |
?> |
<div id=”topbar”> |
<div class=”col-full”> |
<p>Your text here</p> |
</div> |
</div> |
<?php |
} |
add_action( ‘storefront_before_header’, ‘storefront_add_topbar’ ); |
#topbar { |
background-color: #1F1F20; |
height: 40px; |
line-height: 40px; |
} |
#topbar p { |
color: #fff; |
} |
How to add a custom message to your top bar
Find the code that you used when you created the top bar (see the previous tweak).
Replace with this
<?php |
/** |
* Adds a top bar to Storefront, before the header. |
*/ |
function storefront_add_topbar() { |
global $current_user; |
get_currentuserinfo(); |
if ( ! empty( $current_user->user_firstname ) ) { |
$user = $current_user->user_firstname; |
} else { |
$user = __( ‘guest’, ‘storefront-child’ ); |
} |
?> |
<div id=”topbar”> |
<div class=”col-full”> |
<p>Welcome <?php echo $user ?>!</p> |
</div> |
</div> |
<?php |
} |
add_action( ‘storefront_before_header’, ‘storefront_add_topbar’ ); |
How to make Meta Slider full width with Storefont
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
add_action( ‘init’, ‘child_theme_init’ ); |
function child_theme_init() { |
add_action( ‘storefront_before_content’, ‘woa_add_full_slider’, 5 ); |
} |
function woa_add_full_slider() { ?> |
<div id=”slider”> |
<?php echo do_shortcode(“[metaslider id=388 percentwidth=100]”); ?> |
</div> |
<?php |
} |
How to add extra Google Fonts to Storefront
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 header
Add this code to your child theme’s functions.php
add_action( ‘init’, ‘jk_remove_storefront_header_search’ ); |
function jk_remove_storefront_header_search() { |
remove_action( ‘storefront_header’, ‘storefront_product_search’, 40 ); |
} |
view rawadd_action( ‘init’, ‘jk_remove_storefront_header_search’ ); function jk_remove_storefront_header_search() { remove_action( ‘storefront_header’, ‘storefront_product_search’, 40 ); } hosted with
How to hide the Page Titles in Storefront
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
add_action( ‘init’, ‘custom_remove_footer_credit’, 10 ); |
function custom_remove_footer_credit () { |
remove_action( ‘storefront_footer’, ‘storefront_credit’, 20 ); |
add_action( ‘storefront_footer’, ‘custom_storefront_credit’, 20 ); |
} |
function custom_storefront_credit() { |
?> |
<div class=”site-info”> |
© <?php echo get_bloginfo( ‘name’ ) . ‘ ‘ . get_the_date( ‘Y’ ); ?> |
</div><!– .site-info –> |
<?php |
} |
How to add Font Awesome icons to your Storefront 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 Storefront
Paste this code into your child theme’s functions.php file
function storefront_primary_navigation() { |
?> |
<nav id=”site-navigation” class=”main-navigation” role=”navigation”> |
<button class=”menu-toggle”><?php _e( ‘Primary Menu’, ‘storefront’ ); ?></button> |
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) ); ?> |
</nav><!– #site-navigation –> |
<?php |
} |
<button class=”menu-toggle”><?php _e( ‘Primary Menu’, ‘storefront’ ); ?></button> |
Note: You’ll need to be using a child theme for this one to work
How to add a customer avatar in Storefront ‘My Account page’
Add the following code to your child theme’s function.php file
/** |
* Print the customer avatar in My Account page, after the welcome message |
*/ |
function storefront_myaccount_customer_avatar() { |
$current_user = wp_get_current_user(); |
echo ‘<div class=”myaccount_avatar”>’ . get_avatar( $current_user->user_email, 72, ”, $current_user->display_name ) . ‘</div>’; |
} |
add_action( ‘woocommerce_before_my_account’, ‘storefront_myaccount_customer_avatar’, 5 ); |
by GitHubThen add the following css to your child theme’s custom.css file
.myaccount_avatar { |
border-right: 1px solid rgba(0, 0, 0, 0.1); |
float: left; |
padding-right: 10px; |
width: 83px; |
} |
.myaccount_user { |
border-left: 3px solid #787E87; |
float: right; |
padding-left: 10px; |
width: 88%; |
} |
Where can I find free video tutorials on Storefront?
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 customize the blog layout on WooThemes Storefront
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 Storefront
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 Footer Height
Here’s some simple css 🙂
section.footer-widgets { |
padding-top: 25px; |
} |
div.site-info { |
padding-top: 16px; |
padding-bottom: 25px; |
} |
#23 Want more tutorials on Storefront?
Here’s our current list, just click to view.