How to Add top bar to Storefront before the header

Storefront don’t have a top bar by default, By adding simple snippet to the theme’s functions.php you can add a Top bar to Storefront theme before the header.

/**
 * Adds a top bar to Storefront, before the header.
 */
function storefront_top_bar() {
 
$html = '
<div id="topbar">';
$html .= '
<div class="col-full">';
 
$html = 'You can add your content here...';
$html = '</div>
;'
}
add_action( 'storefront_before_header', 'storefront_top_bar' );
</div>

Add/Remove Google Fonts from Woocommerce Storefront Theme

Woocommerce Storefront theme has Google fonts into the theme by default. But we still could easily add/remove their google fonts from from child theme, by adding snippet to the child theme functions.php.

// Remove Google Font from Storefront theme
function remove_fonts_from_child_styles(){
wp_dequeue_style('storefront-fonts');
}
add_action( 'wp_enqueue_scripts', 'remove_fonts_from_child_styles', 999);

You can easily add google fonts to storefront child theme y adding simple snipped to child theme’s functions.php.

// add google font to storefront theme
add_filter( 'storefront_google_font_families', 'add_google_font_to_storefront' );
function add_google_font_to_storefront( $family ) {
$family['roboto'] = 'Roboto:300,400,600';
return $family;
}

Remove the sidebar from WooCommerce pages on Storefront

If you are using WordPress/Woocommerce for your shop and using Storefront theme, So you notice all of your Woocommerce pages will have sidebar on all the page e.g. shop, category, product etc.

There is no way to remove those from setting unless you manually remove those or use any plugin for that. But you can remove it by using below code in functions.php (of child theme if you are using).


add_action( 'get_header', 'remove_storefront_sidebar' );
function remove_storefront_sidebar() {
if ( is_woocommerce() ) {
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
}
}

Now, open your theme(child theme’s) style.css in the same location and add this code:

body.woocommerce #primary.content-area {
float: none;
width: 100%;
}

Now, all your WooCommerce pages won’t have a sidebar.
Sidebar removed from all the page now. If you want it to remove only from specific page then you can update the condition is_woocommerce() to below

Main Shop Page

is_shop()

Woocommerce Product Category Page

is_product_category() for specific category is_product_category( 'shirts' )

Woocommerce Product Page

is_product()

If you want to learn more about conditional tags then you can check on Woocommerce Conditional Tags.