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 :)
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.
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
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; |
| } |
Simply add the following code to your child theme’s custom.css file. Thanks to James Koster for this one
Add and amend the following css to your child theme’s custom.css file
| .widget-area .widget { |
| color: red; |
| font-size: 1em; |
| } |
Add the following code to your child theme’s custom.css file.
| .onsale { |
| background-color: #FFFFFF; |
| border-color: #FF0000; |
| color: #FF0000; |
| } |
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
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
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
We’ve developed a free plugin that will do this for you. You can get our free Storefront Align Menu right extension here.
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; |
| } |
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' ); |
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 |
| } |
Here’s a great plugin that will do this for you. Visit the Google Fonts WordPress plugin.
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