How to Change the Storefront Theme Homepage (No Plugins)

The popular Storefront WordPress theme for WooCommerce, by WooThemes, offers its users a great-looking Homepage with different sections.

You can easily get rid of any of the existing sections or swap their position on the page using a free plugin called Homepage Control, also by WooThemes.

However, if you really want to learn how to take control, not only of the Homepage, but of the Storefront theme, you need to step out of your comfort zone and get into coding.

Here’s how.

Storefront Homepage

The Storefront theme’s Homepage has 6 sections:

  1. The content you generate in the page editor when you create the page
  2. The Categories section
  3. The Featured Products section
  4. The Recent Products section
  5. The Top Rated section
  6. The On Sale section

Using the functions.php file in your Storefront child theme, you can remove any of the sections above or change their positions relative to one another.

In this video I’m going to show you exactly what you need to do.

Customizing the Storefront Homepage

To follow along, you need:

  • A WordPress installation, either on your own machine or on a remote server
  • Access to the files and folders on your WordPress installation
  • A Storefront child theme. If you’re not sure how to create one, here’s a previous post where I guide you step by step.

Let’s begin!

Resources

Here’s a list of useful links to the resources I discuss in this tutorial.

What does your Storefront-powered Homepage look like? What did you use to customize it? Hit the comment box to let me know.
Advertisements

11 thoughts on “How to Change the Storefront Theme Homepage (No Plugins)

  1. Hi Maria. Im new to to css codes. I watch your video and its great.
    When i go to style.css it says that “Do not edit this file. If you wish to add your own CSS we strongly recommend creating your own child theme, or installing a custom CSS plugin.”
    Can you please help me on how can I create my own child theme. Thank you.
    -Im just 18 years old. 🙂

  2. Hi Maria. Im new to css codes. I’ve watched your video and its great.
    When i go to style.css it says “Do not edit this file. If you wish to add your own CSS we strongly recommend creating your own child theme, or installing a custom CSS plugin.”
    Can you please help me on how to create child theme? Thanks in advanced.
    – Btw. Im only 18 years old.

    • Hi Emil,
      Thank you for stopping by!

      Editing a theme’s files is always discouraged because all your modifications will be overwritten in your next theme’s update. If you just need to make CSS changes, you can add a custom CSS plugin. This kind of plugin offers a code editor where you can add your own CSS rules, which are kept separate from the theme’s files. Here’s one that you can use, although browsing wordpress.org plugins offers plenty of choices: https://wordpress.org/plugins/simple-custom-css/

      If you need to add modifications to the PHP code inside your theme’s files, for example, you want to change index.php, page.php, functions.php, etc., then you need to create a child theme. You can find tons of tutorials on how to create a child theme, just do a Google search. You can also use a plugin to do this. Here’s one: https://wordpress.org/plugins/one-click-child-theme/

      I hope this helps:)

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