How to Remove Page Title WooCommerce Storefront Theme

Table of Contents

Are you looking for a solution on how you can remove a page title in your Storefront theme?

If yes, I am sure that you have tried countless methods to remove the page title with no success.

However, you should not feel miserable.

Even though WooCommerce is a super powerful platform, it has its limitations as well. Stick to the end, as I will provide you with a solution to hide the page title in your Storefront theme.

WooCommerce Storefront Remove Page Title

What’s more, countless searches and unsuccessful edits on how to remove page titles can consume your day leaving you worn out and exhausted.

Coding can break or make your day. In this brief post, I will help you assemble those broken pieces and make your day.

The code snippets that I will share will certainly put a smile curve on your face.

Moreover, if you are a WordPress beginner, I will share a beginner-friendly solution. It involves the use of a plugin, meaning that you will not handle any piece of code.

Why Remove the Title of a Page in the Storefront Theme?

Some of the features that come with WordPress may not get along with your design.

The page title might conflict with your design and you can opt to remove it.

A page title matters a lot and this means that a page title that is not in harmony with the content of the page can annoy the users of the website instantly.

There are times that you do not want to distract the visitors’ attention from the page content by putting that big old “Home” or any other title, for several reasons.

Therefore, there emerges a need to completely remove or hide the Storefront page title.

How to Remove the Page Title in the Storefront Theme Manually

The quickest method to remove the page title in the case of a specific page/ post title is by not putting the title where it was meant to be added.

You can leave the Title box empty and publish it on the go. This means that you have a page without a title.

While this method sounds to be very easy, it can have its own set of implications later on, which is not good. This means that you may have to bear the brunt of taking this shortcut.

This is because you may find it difficult to locate your posts without any titles and other unexpected issues may occur. Therefore, let me show you how coding can work wonders to solve this problem.

How to Remove the Page Title in the Storefront Theme Using PHP Code

By default, the Storefront theme adds a “Home” H1 title to the homepage. It does not matter if you use the “Default” or the “Homepage” static page template.

However, you could do it via CSS, with a simple “display: none”.

Alternatively, you could completely avoid loading the “Home” title by using PHP. This is because it might affect the SEO of your site. It is better not to load an H1 than to hide it via CSS.

Here is a quick fix to that:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will add the GTIN Number functionality on Products in WooCommerce.
Add the following code to the PHP file:

Remove the Homepage Title in the Storefront Theme (“Homepage” Page Template)

/**

 * Hide Homepage Title - Storefront Homepage Page Template

*/

add_action( 'wp', 'njengah_storefront_remove_title_from_home_homepage_template' );

function njengah_storefront_remove_title_from_home_homepage_template() {

   remove_action( 'storefront_homepage', 'storefront_homepage_header', 10 );

}

Remove the Homepage Title in the Storefront Theme(“Default” Page Template)

/**

* Hide Homepage Title - Storefront Default Page Template

*/

add_action( 'wp', 'njengah_storefront_remove_title_from_home_default_template' );

function njengah_storefront_remove_title_from_home_default_template() {

if ( is_front_page() ) remove_action( 'storefront_page', 'storefront_page_header', 10 );
}

This will be the outcome:

How to Remove the Page Title in the Storefront Theme Using a Plugin

In this section, I will share a beginner-friendly solution to remove the page title.

Here, I will use the Title Toggle for the Storefront Theme plugin. It is for those who are not familiar with customizing their site with code or maybe they do not want to mess up the coding structure of their site.

This plugin makes it easy to remove the page title from specific pages or posts. It is built to work only for the Storefront theme.

Moreover, there is also an option to remove the post meta (tags and comment count) for posts.

Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
Then, we are going to install the plugin that we have indicated earlier. To download it directly in the Admin Panel, simply navigate to Plugins > Add New. After that, you will need to do a keyword search for the plugin ‘Title Toggle for Storefront Theme’. You need to install and activate it as shown below:
To hide the title for a certain page, click on edit on any page that you want to hide the title.
On the edit page, scroll down until you see the Title and Toggle meta box. Check the “Hide Title” checkbox and update your page.
This will be the outcome:

Conclusion

In this post, I have shared different ways that you can use to remove the page title in the Storefront theme.

The first solution is a quick and short-cut method to remove the title by simply not putting the title where it was meant to be added.

However, it looks tempting and easy to do in the first place but it has a set of implications later on as I have highlighted.

The second method involves the use of a PHP code snippet, and it depends on the type of template that you are using for the homepage.

The last method is a beginner-friendly solution that involves the use of a plugin.

It is just as simple as that!

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.