Storefront is one of the most flexible and extensible theme when it comes to launching a WooCommerce store using WordPress.
Due to its clean code architecture it became hugely popular among users and currently more than 100,000 online stores uses Storefront as their WordPress theme.
Installing WooCommerce Storefront Theme
There are two ways you can install Storefront theme, either through searching the theme from your WP dashboard or uploading the theme manually.
Installing using WordPress Dashboard
The fastest way to install Storefront is through the WordPress dashboard. Follow these steps to install Storefront via WordPress dashboard.
- Go to Appearance > Themes > Add New
- Type ‘storefront’ in to the search box and hit enter.
- Hover over the Storefront screenshot.
- Select the ‘Install’ button.
- Click on Activate
Installing Storefront Manually
- Download the latest version of Storefront from wordpress.org
- Go to Appearance > Themes > Add New
- Click on Upload Theme and chose the previously downloaded zip file.
- Click on Install Now
- Click on Activate
Setting up Homepage
Storefront has a built-in Homepage template that is well thought out. Its clean structure will help your audience find the products you are selling easily.
There are 6 sections in default Storefront Homepage template. But you can add or delete the section based on your need.
Default Homepage sections:
- Page Content
- Product Categories
- Recent Products
- Featured Products
- Popular Products
- On-sale Products
- Best Selling Products
Assigning Homepage Template
To set up the Homepage template, follow these steps:
- Go to Dashboard -> Pages and create a page titled “Home” or anything you like.
- Add any welcome content you like, which will be displayed above products.
- On the right hand side, you will find a box titled “Page Attributes“
- Select “Homepage” from “Template” drop-down.
- Click on Publish or Update to save the change.
Displaying the Homepage Template
After publishing the page, now you have to display this homepage as the front page of your website. So anyone lands on your website first see this page. To set this up follow these steps:
- Go to Dashboard > Settings > Reading
- Under Your homepage displays select A static page (select below)
- Select the previously homepage template assign page in Homepage dropdown.
- Click on Save Changes
Re-order Storefront Homepage Sections
You can change the order of the Storefront Homepage sections using hooks or using a plugin called Homepage Control. Follow below steps to re-order your homepage sections:
- Download & Install Homepage Control
- Go to Appearance -> Customize -> Homepage Control
- Drag & re-order the sections according to your need.
- Click on Save & Publish to save the changes.
Configuring Navigation Menu
In Storefront theme you can display Menu in 3 locations.
- Primary Menu – Appears just below the site logo.
- Secondary Menu – Beside the logo near the search box.
- Handheld Menu – Menu for Mobile devices.
Setting up the Menus
By default, if a specific primary menu is not set, WordPress displays all your pages as your primary menu. Sometimes it confuses users and gives them hard time figuring out how these pages got on the menu.
Creating a new menu and adding pages to it
- Go to Admin panel then, Appearance > Menus
- At the top you will find the Menu Name field. Write your menu name here.
- From the left side click on Pages (assuming you want to add pages to menu)
- Click on View All to get a list of all published pages.
- Tick the pages you want to appear on the menu.
- After selecting the page click Add to Menu button.
- Drag & drop the menu item to rearrange them according to your liking.
- Click Save Menu
Assigning the Menu
After creating the menu, assign the menu to the location where you want it to display. Navigate to Appearance > Menus > Menu Settings and check the location from Display location checkbox.
Adding Product Categories to Your Menu
- Go to Admin panel then, Appearance > Menus
- Click on Screen Options from top left and check Product Categories
- Now on the left pane a Product Categories tab will show up.
- Click on Product Categories tab to expand, select the categories
- After selecting click Add to Menu button.
- Drag & drop the menu item to rearrange them according to your liking.
- Click on Save menu
Widget Settings
Storefront allows you to display six widget regions in 3 different areas.
- Sidebar – Left or the right of the main site content,
- Below Header – Just below the site header and above the content.
- Footer Column 1 – Footer Area
- Footer Column 2 – Footer Area
- Footer Column 3 – Footer Area
- Footer Column 4 – Footer Area
Setting Up WooCommerce
Installing WooCommerce
- Go to Dashboard > Plugins > Add New > Search Plugins
- Search for “WooCommerce”.
- Click on Install Now.
- Click on Activate.
Configuring WooCommerce
After activating WooCommerce, you’ll be prompted to install the WooCommerce with a wizard. It will take care of all the initial settings. It is divided in to 6 parts.
- Page Setup – Automatically configures the essential pages ( Shop, Cart, Checkout, My Account).
- Store Location – Configure Store location, Currency and Sales Tax
- Shipping – Configure Weight unit and dimension unit
- Payments – Setup payment gateway.
- Theme – Install WooCommerce compatible theme.
- Ready – (optional) Allow WooCommerce to collect usage information.
You can all these settings whenever you want from WooCommerce dashboard.
Add a Product to WooCommerce
- Go to WordPress Dashboard
- Click on Products > Add New
- Write your product name or title in Product Name field.
- Write your product description in below editor.
- Now you have to upload one featured image of your product and additional image to a product gallery.
- One the right you will find box titled Product image & product gallery
- Upload the featured image to Product image and additional images to product gallery
- Click on Publish.
Setting up Product Price & Attribute
To setup the product price Go to Dashboard > Products and select any product. Then Scroll down to Product Data section. Here is a short description of all the product data section settings:
Product Type
- Simple product: A simple single product.
- Grouped product: A product that is a part of a collection.
- External/ Affiliate product: Product that is listed on your store but the actual product is sold elsewhere.
- Variable product: A product with variations (size, colors)
- Virtual product: A product that doesn’t require shipping.
- Downloadable product: A product where you have to provide a downloadable file.
General
- Regular Price: Regular product price.
- Sale Price: Discounted product price.
Inventory
- SKU: Stock keep unit (SKU) tracks products
- Manage stock: Enable stock management
- Stock status: Whether or not the product is in-stock or out of stock.
- Sold Individually: Can be sold in a single order.
Shipping
- Weight: Weight of the product.
- Dimensions: Length, width and height of the product.
- Shipping class: Group products of similar type to certain shipping method.
Linked Products
- Upsells: Display related products below a product details page.
- Cross-sells: Display related products at the cart page.
- Attributes: Select your products global attribute.
Advanced
- Purchase note: Note to send the customer after completing the purchase.
- Menu order: Custom ordering position for this product.
- Enable reviews: Enable or disable product reviews.
Customizing Storefront
How To Add a Logo
Follow these steps to add and display logo to your website:
1. Go to WordPress Admin then Appearance > Customize
2. Then go to Site Identity > Logo
3. Click on Select Logo to upload your logo image. (Recommended Image size: 470px X 110px)
4. Click on Publish.
Where to upload site favicon
Follow these steps to add and display favicon to your website:
1. Go to WordPress Admin then Appearance > Customize
2. Then go to Site Identity > Site Icon
3. Click on Select Image to upload your logo image. (Recommended Image size: 512px X 512px)
4. Click on Publish.
How To Change the post archive or blog layout
- Go to Appearance > Customize > Blog Customizer > Post Archives
- Select layout from Post Archive Layout
- Click on Publish
How To Change the post archive or blog column
- Go to Appearance > Customize > Blog Customizer > Post Archives
- Select column number (Full Width, 2 Column, 3 Column & 4 Column) from Post Archive Column
- Click on Publish
How to Change the single post or article layout
- Go to Appearance > Customize > Blog Customizer > Single Post
- Select layout from Single Post Layout
- Click on Publish
How To change the font
- Go to Appearance > Customize > General Styles > Typography
- Select the font from Font Pairings
- Click on Publish
WooCommerce Customization
How To Change Shop page layout
- Go to Appearance > Customize > WooCommerce > Shop Page – Product Listings
- Select layout from Product Archive Layout
- Click on Publish
How To Change product details page layout
- Go to Appearance > Customize > WooCommerce > Shop Page – Product Listings
- Select layout from Product Archive Layout
- Click on Publish