storefront customization

How to Customize WooThemes Storefront Homepage Layout

Storefront is a free theme (with 100,000+ active install), developed & designed by WooCommerce Core Developers. I’ve put together a list of snippets so that you can quickly and easily customize your Storefront Homepage.

Storefront Homepage

The Storefront theme’s Homepage has 6 sections:

  1. Page Content
  2. Product Categories section
  3. Featured Products section
  4. Recent Products section
  5. Top Rated Products section
  6. On Sale Products section
  7. Best Selling Products section

How To Setup Storefront Homepage

To display Homepage sections on your homepage, you have to assign the Homepage template to your page.

storefront homepage template

Follow these steps to display storefront sections on your homepage:

  1. Go to Dashboard -> Pages and create a page title homepage
  2. On the right hand side, you will find a box titled “Page Attributes
  3. Select “Homepage” from “Template” drop-down.
  4. Click on Update to save the change.

 

Add / Re-order / Remove Homepage Sections

How To Re-order Storefront Homepage Sections

You can easily re-order your Storefront homepage sections using WooThemes Homepage Control plugin. Follow below steps to re-order your homepage sections:

  1. Download & Install Homepage Control
  2. Go to Appearance -> Customize -> Homepage Control
  3. Drag & re-order the sections according to your need.
  4. Click on Save & Publish to save the changes.

How To Remove Sections from Storefront Homepage

You can remove or hide the any sections (e.g.: Product category, Recent, Best-selling) from your homepage using Homepage Control plugin.

Follow these steps to remove homepage sections:

  1. Download & Install Homepage Control
  2. Go to Appearance -> Customize -> Homepage Control
  3. Un-check the box beside the sections you do want to display.
  4. Click on Save & Publish.

How To Add A Full Width Slider To Storefront Homepage

You can add any slider to your storefront homepage using Storefront Add Slider plugin. Follow these steps:

  1. Download & install Storefront Add Slider
  2. Go to Appearance -> Customize -> Static Front Page
  3. Paste your slider shortcode in Slider Shortcode field
  4. Click on Save & Publish

Set Background Color / Image

Adding Background Image To Storefront Homepage Sections

By default, Storefront homepage has 6 sections. You can display product categories, Recent products, Featured products, popular products, On Sale products and Best Selling products.
If we want to add a background image to those sections, we have to identify the class of each sections. Here is the class of each sections.

Now let’s set a background image to Storefront Homepage featured products section. Insert the below css in Appearance -> Customize -> Additional CSS

Adding Background Color To Storefront Homepage Sections

Customize Storefront Homepage Section Title

How to Remove or hide the Homepage Section Title

If you want to get rid of the section title (Shop by Category,” “New In,” or “Best Sellers”) from your homepage, insert this in Additional CSS

How To Change the Homepage Section Title

If you want to change the section title (Shop by Category,” “New In,” or “Best Sellers”) to something else, you have to do this via hooks.

Here is a list of all storefront homepage section filters:

Insert this in your themes functions.php to change the featured product section title:

Customize Number of Products / Column

How To Increase Homepage Section Product Per Page

How To Increase Homepage Section Product Column Grid / Column

 

Customizing Storefront Product categories

How To Display More Categories on Homepage

Other Customization

How To Add a Description Below Homepage Section Title

Leave a Reply