How to Remove Footer Storefront Theme WooCommerce

WooCommerce Storefront Theme Remove FooterThe storefront theme’s footer is the bottom section of a web page in the web design terminology. This section displays information like credits, links to the privacy policy, copyright notices, etc.

The footer also contains code and scripts that the theme developer includes on the page but after loading the page content.

WooCommerce Storefront Theme Remove Footer

The footer area is usually defined in the template file footer.php. Moreover, it contains a widgetized area with multiple columns that you can use to add WordPress widgets.

Additionally, the footer stays the same across the entire website. This means that the footer elements are usually items relevant to the site as a whole and not specific to any single section.

However, you may want to remove this section for various reasons. The Storefront theme does not have a specific option for removing the footer. In this tutorial, I will share with you how you can easily remove it using custom CSS.

Steps to Remove the Footer in the Storefront Theme

Here, we need first to identify the element we need to remove.

  1. Identify the Element

Right-click on any area site in a browser like Chrome or Firefox and click “Inspect Element” like this:Inspect element

After clicking on that, this will bring up the console containing various elements of the page on the top and settings for the elements at the bottom. Now you need to find the element responsible for the entire footer.identify the element

2.    Add your Desired CSS Styling in the Console

add your desired stylingIn my example, I have removed the footer by adding a new rule ‘display: none;‘. However, it is important to note that this does not make any actual changes to your site. It acts as just a temporary change that is visible in your browser. It allows you to experiment to your heart’s content. Moreover, you can even decide to place an image as the background. Now that you are satisfied with your changes, it is time to make it permanent.

  1. Extracting the New Rule

You need to extract the rule by right-clicking it (on Firefox) like this and selecting “Copy Rule”:extracting the rule

However, if you are using Chrome, you can select the entire rule with your mouse and copy the text. Paste it into an editor and delete all the existing rules except for the new one you just added if there are any.

  1. Adding the Rule

The remaining part is to copy/paste into the “Additional CSS” section of your Storefront theme customization interface. To do this:

  • Log into your WordPress site and access the Dashboard as the admin user.
  • From the Dashboard menu, click on Appearance Menu > Customize.
  • Navigate down to Additional CSS in the left sidebar that appears.Additional CSS
  • Add the CSS rule as shown below:
.site-footer {

            display: none;

}
  • Here is the outcome:the outcome

Conclusion

In this guide, I have highlighted that the footer usually refers to the bottom section of a web page in the web design terminology. Additionally, I have shared a solution to remove the Storefront theme’s footer with just four simple steps. However, you first need to identify the element that is responsible for the footer.

Once you have identified it, the next adding your rule in the console. This will help you get your desired result, without changing anything on the live site. If you are satisfied with the changes, copy the rule and add it in the Additional CSS section, as shown in the tutorial.

Similar Articles