Customize footer in Storefront – .com

In this tutorial we are going to see how to customize the Storefront footer in two ways, using a plugin and directly with code.

Storefront footer

When we are in the process of creating a new website and we want to fine-tune it, or in subsequent updates, it is usually necessary to adapt its appearance according to the style to which we must adjust and the needs we have.

If we work with the Storefront theme we can make some of these modifications from the WordPress customizer. However, we may need to expand the options available from that section. If for example we want customize the footer we will have to solve it in another way.

So let’s see how to do it using code and also a plugins very useful that allows you to customize the theme easily through the customizer.

If you are interested in knowing all the possibilities it offers and seeing it in operation, we recommend that you take a look at and . With all that said, let’s get started!

Customize Storefront footer with a plugin

First of all we will see how to customize Storefront using a plugin, specifically Powerpack, which we see and use in the intermediate course. It is a premium plugin that allows us to customize a large number of aspects of Storefront without touching code.

We can, among other things, change the header of the store, the design of many of the elements that make it up or play with the styles. In this case we will use it to remove or modify the footer, so let’s get to it.

Once we have the compressed file on the computer, we can begin the installation. As always, we have to go to “Plugin/Add new/Upload plugin”. Then we will select the file, and finally we will install and activate the plugin.

When we have activated it, we will have to go to “Appearance/Personalize” and, of all the available options, click on “Powerpack/Footer”. And we have arrived, from this screen we can customize the Storefront footer. Let’s see the available fields:

• Tweak the copyright text in the footer: Here we will write the text as we want it to appear in the footer. We can also use links if we want, no problem.
• Display credit link: When the box is selected, a line appears in the footer “Created with Storefront and WooCommerce”, if we deselect it, it disappears. We could deactivate it in the event that we used the previous field to include links with HTML.
• Handheld Footer Bar: This checkbox is used to activate the footer bar on portable devices. Specifically, it shows access to the user’s account, the search engine and the shopping cart.

For example, we could leave it blank or deactivate the links related to the credits and add the following in the text field: “© 2018

Storefront Tutorials

“. That easy :).

Customize Storefront footer with code

As we have seen, Powerpack allows us to make a multitude of modifications to an eCommerce with WooCommerce installed, which is why it is a highly recommended plugin. However, if you only want to make a couple of changes, you may prefer to use PHP code directly. In any case, we are also going to leave this alternative to see how it would be.

So in this section we are going to see what lines of code we would have to include in WordPress to be able to customize the footer of the site. There are several ways to do it as we see in the tutorial on .

In this case we are going to use the plugin that is available in the repository. If you do not have it installed you can do it now or create a plugin from scratch as we see in the .

Well then, to include the code we will have to go to “Snippets/Add new”, and within the “Code” section add the following lines and then save. This will delete the footer full:

// Remove footer in Storefront add_action( ‘init’, ‘bld_remove_footer_storefront’, 10 ); function bld_remove_footer_storefront() { remove_action( ‘storefront_footer’, ‘storefront_credit’, 20 ); }

And if we want to personalize it? Well, in that case the code will be a little different. First we will have to remove the default footer and then add the new one, let’s see how:

// Remove the default Storefront footer and add a custom one add_action( ‘init’, ‘bld_remove_footer_storefront’, 10 ); function bld_remove_footer_storefront() { remove_action( ‘storefront_footer’, ‘storefront_credit’, 20 ); add_action( ‘storefront_footer’, ‘bld_customize_footer_storefront’, 10 ); } function bld_customize_footer_storefront() { ?>

In this case we have created a new function to customize the footer, “bld_customize_footer_storefront”, which is called after removing the credits that appear by default in Storefront. As we can see, in this function there is a code in bold that is what we have to modify to change the footer of the theme. In the example that appears above it would look like this:

First it would show the copyright symbol, then the current year, for which we use the “get_the_date()” function, and then on the same line the name of the blog as stated in “Settings/General/Site Title”. Then we add a paragraph and inside we put the description using get_bloginfo( ‘description’ ).

In addition to all this, we could include CSS classes, links, or whatever we need, interesting, right? Well, let’s continue. Let’s share one last method. So far we have used actions hooks to make the modifications, but we could also use filters:

// Modify footer by applying a filter add_filter( ‘storefront_copyright_text’, ‘bld_modify_footer’ ); add_filter( ‘storefront_credit_link’, __return_false ); function bld_modify_footer() { return ‘credits text‘; }

To customize it, we would have to replace the text “Credits text” with the one we would like to include in the footer, and that’s it. See how easy? Well, now all that remains is for you to choose your preferred method, adjust the footer and add it to WordPress. With these simple steps you will have customized the footer in Storefront.

Summary and conclusion

Customizing the footer in Storefront, the official WooCommerce template, is very easy. We can use a small piece of PHP code and include it in a utility plugin or Code Snippets, or do it through Powerpack.

This plugin allows us to make this change, and many others, without writing a single line of code, and also offers several customization possibilities with which we can easily and extensively modify the appearance of the site.

And that’s all! If you want to know more, we recommend the , where among other things we will see Powerpack in depth. If you subscribe you will have access to more than 🙂