The Ultimate Beginner’s Guide to Customizing Your Storefront WordPress Theme: Header Section

I’ve been a big fan of WooCommerce since it came out many years ago, and die-hard fan of WordPress for as long as I’ve been working in the Web Development industry. I have built so many WooCommerce Websites for customers that I can honestly say I’ve lost track of exactly how many. But when I decided to setup a personal store I knew I wanted to use Storefront as my theme. Used it many times before and my clients loved it because of it’s simplicity and how fast it was because it doesn’t contain a set of bloated features they’ll probably never use and will most definitely slow down their Websites.

Having said that, a lot of customizations can be added to the theme via plugins that are already built to support Storefront and WooCommerce. In this article, we are going to be covering 6 customizations that you can make minor code tweaks to help you achieve what you are looking for while continuing to use the Storefront theme.

Customizing Your Storefront’s Theme Header

I highly recommend that you create a Child Theme where you can put all these customizations. If you don’t create a child theme and later on update the Storefront theme, all of your customizations would be lost. Creating the Child Theme will ensure this scenario will never happen.

Remove the Skip Link

This is an accessibility feature and I would not remove it unless you are really picky about it. Chances are you haven’t even seen these links on your Website. If you must, then you can remove the “Skip to navigation” and “Skip to content” links on your Storefront theme’s header section using the following snippet of code.

<?php
// Remove the "Skip to navigation" and "Skip to content" links
add_action( 'init', 'remove_storefront_skip_links' );
function remove_storefront_skip_links() {
	remove_action( 'storefront_header', 'storefront_skip_links', 0 );
}

Remove All Site Branding

The Website’s branding is the section that will display your Website’s name, taken from the Site Title and Tagline as you define it under Settings -> General. If you set an image as the logo, then the image will be displayed instead. Removing it would be as easy as placing the following code in your child theme’s or Storefront’s functions.php file.

<?php
// Removing All Site Branding
add_action( 'init', 'remove_storefront_site_branding' );
function remove_storefront_site_branding() {
	remove_action( 'storefront_header', 'storefront_site_branding', 20 );
}

Remove The Secondary Navigation

The secondary navigation is displayed between the main site branding section and the product search form. By default it will not display anything if you haven’t assigned a menu to it, so there is really no reason to remove it, but it’s possible you may not want to show the secondary menu until the user/customer is logged in or has already purchased something. The code below will take care of removing it, but please note it doesn’t take into account any of the two scenarios previously mentioned.

<?php
// Remove The Secondary Navigation
add_action( 'init', 'remove_storefront_secondary_navigation' );
function remove_storefront_secondary_navigation() {
	remove_action( 'storefront_header', 'storefront_secondary_navigation', 30 );
}

Remove The Product Search Form From The Header

Don’t like the placement of the main Product Search Form in the header of your Storefront theme? Or perhaps you want to prefer to show it on the Theme’s sidebar instead? The Product Search Form can be easily removed with the short snippet of code below.

<?php
// Remove The Product Search Form From The Header
add_action( 'init', 'remove_storefront_product_search' );
function remove_storefront_product_search() {
	remove_action( 'storefront_header', 'storefront_product_search', 40 );
}

Remove The Cart Feature From The Header

Seriously now, why would you want to remove the Cart feature from your Storefront theme? Do you want to show it only after a customer has added at least one product to their cart? It’s a valid point; and you can completely remove it using this code.

<?php
// Remove The Cart Feature From The Header
add_action( 'init', 'remove_storefront_header_cart' );
function remove_storefront_header_cart() {
	remove_action( 'storefront_header', 'storefront_header_cart', 60 );
}

Remove Navigational Breadcrumbs

I’ve seen people hide this section through the customizer by adding a display:none; style to the wrapper. Needless to say the code is still being executed behind the scenes even though it’s not visible on the page. By default, Storefront removes the Breadcrumbs section from it would normally appear within it’s template system and it then gets added back in the content’s top most section. If you want to completely remove it, here is what you need to place in your Child Theme’s functions.php file.

<?php
// Remove Navigational Breadcrumbs
add_action( 'init', 'remove_storefront_woocommerce_breadcrumb' );
function remove_storefront_woocommerce_breadcrumb() {
	remove_action( 'storefront_content_top', 'woocommerce_breadcrumb', 10 );
}

That’s it for this guide. Please let me know if you enjoyed this article and if you have any requests, feel free to comment and I’ll consider it for next time.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s