How to Change Footer Text in the Storefront Theme for WooCommerce

This is my answer to another question I recently found on the WordPress.org Themes and Templates Support Forum about the Storefront theme, a great free theme for WooCommerce designed by WooThemes.

The user was trying to replace the default footer text in Storefront with some custom text. If you’re having the same problem, here’s the answer.

The Default Footer Text in Storefront

Here’s what the default footer text looks like in the Storefront theme.

Default footer text in Storefront theme
Default footer text in Storefront theme

One of the most common tasks when you’re customizing your theme is to replace whatever the theme designer has placed in the <footer> area of the theme with your own text, be it a series of links, a copyright notice, etc.

Storefront is an execptionally well designed theme, therefore it makes such a common task very easy to accomplish in a child theme, without even touching the theme’s template files.

If you’d like to follow along, make sure you have the following:

  • WordPress installed, either locally on your computer or on a remote server
  • The Storefront theme for WooCommerce installed
  • A Storefront child theme installed and activated. If you’re unsure about how to build a child theme for Storefront, head over to my latest post, How to Get Rid of Links to WooCommerce Single Product Page, where I go into all the details on how to do just that.

Let’s begin!

Changing the Footer Text

You can quickly change the default text in the Storefront theme by writing a function in your child theme’s functions.php file.

Just to explain the process I follow when I customize Storefront, dig into storefront/inc/structure of the Storefront parent theme. Next, open the footer.php file inside the structure folder in your code editor.

At about line 55, you’ll find a function called storefront_credit(), which is the function responsible for outputting the footer thext. How? It does so using the storefront_footer action hook. You can check this by opening storefront/footer.php in your code editor. At about line 19 you’ll find:

<?php
/**
* @hooked storefront_footer_widgets - 10
* @hooked storefront_credit - 20
*/
do_action( 'storefront_footer' ); ?>			

The bit above tells you that two functions, i.e., storefront_footer_widgets() and storefront_credit() are hooked into the storefront_footer action hook.

storefront_credit() is what’s known as a pluggable function. In fact, it’s wrapped inside a conditional statement:

if ( ! function_exists( 'storefront_credit' ) ) {
 
  //Function goes here
  function storefront_credit() {
   ...
  }
  
}

The conditional statement checks if there’s another function with the same name. If there isn’t, then that’s the function that’s going to run whenever it’s called inside your theme.

This makes overriding this function in a child theme very easy.

By writing a function with the same name as the parent theme’s function, you’ll have overwritten the parent theme’s function with your own.

Back to your child theme, open functions.php in a code editor and write the snippet below:

Function to change footer text in Storefront theme for WooCommerce

Save all your work and check the result. Your Storefront footer text should display like the image below:

Modified text in Storefront theme footer
Modified text in Storefront theme footer

As you can see, what appears in the <footer> is the text you added in your child theme’s storefront_credit() function. This means that WordPress now runs your version of the function, not the parent theme’s.

That’s it! The only thing left for you to do is to replace "Your text here." with your own chosen text inside the storefront_credit() function in your child theme.

Conclusion

One of the most common tasks of customizing your theme is to change the footer text. A good WordPress theme will make this very easy to do. Storefront is no exception. With the Storefront theme you simply change the footer text by rewriting a simple pluggable function in your child theme. No need to touch the footer.php template file!

Storefront, like WooCommerce, allows you to do a lot with action and filter hooks. Get familiar with hooks and you’ll master them like a pro!

Why not share your great Storefront shop in the comments!
Advertisements

8 thoughts on “How to Change Footer Text in the Storefront Theme for WooCommerce

  1. Great how to, thanks.
    Can you explain how to keep the copyright and date included that sits above the powered by statement?

    • Hi, thank you for stopping by.
      You can manipulate the text the way you like it. Grab the storefront_credit() function, which in the new version of Storefront is inside storefront/inc/storefront-template-functions.php, and paste it into functions.php in your child theme. You can keep and a delete what you like.

      Unfortunately, the editor doesn’t let me paste an example here, but the function is clear enough for you to fiddle with.

  2. For those that don’t want to modify code, checkout my plugin here. Just by activating the plugin it will remove the footer credit or if you want you can add your own footer credit by entering some text.

Have your Say

Please log in using one of these methods to post your comment:

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