WooCommerce Storefront Setup: 12 Easy Steps
This page contains instructions for installing and configuring WooCommerce Storefront on WordPress. If you’re looking for an easy guide on how to install and configure WooCommerce Storefront, then look no further. This hands-on guide will walk you through how to create your first online store using WooCommerce Storefront. You will use the WordPress admin panel to complete all the steps.
Table of Contents
Table of Contents
- What is WooCommerce Storefront?
- WooCommerce Storefront Installation Steps
- WooCommerce Installation Steps
- Understanding the Steps involved in Configuring WooCommerce
- Understanding the Steps involved in Configuring WooCommerce Storefront
- Adding your Logo
- Adding your Site Icon/Favicon
- Adding your Site Title
- Adding a Custom Font
- Setting up your WooCommerce Storefront Homepage template
- Displaying the Homepage Template
- Customizing the Shop Page Layout
- Setting up your Menu
- Adding Product Categories to your Menu
- Adding a Product to Storefront
- Setting up Product Price & Attributes
- Customize the Product Details Page Layout
- Conclusion
What is WooCommerce Storefront?
WooCommerce Storefront is the de facto WooCommerce theme. WooCommerce Storefront was first introduced on November 20, 2014, and it is overseen by a team of WooCommerce developers who are in active development.
The WooCommerce Storefront theme is designed to help businesses in setting up their own virtual stores online. Users who visit your e-business can read about your company’s profile, view your featured products and make purchases easily.
As businesses struggle to stay open in the midst of the COVID-19 pandemic, more and more merchants are selling products using WooCommerce Storefront as their customers practice social distancing.
WooCommerce offers Storefront free of charge to its users both on the WordPress theme repository and also as a WooCommerce plugin. You won’t have to pay any dime to get up and running.
The Storefront theme is highly integrated with WooCommerce core as well as other popular extensions such as:
- WooCommerce Brands
- WooCommerce Bookings
- WooCommerce Subscriptions
- WooCommerce Wishlists
If you’re looking to get your store up and running quickly, then Storefront is a good place to start for your project. Storefront is built on a lean and extensible codebase. Developers can therefore easily extend this codebase by adding new functionality using custom plugins or a child theme.
Now that you have some background information about WooCommerce Storefront, let’s now look at how to install and configure the theme.
Prerequisites
Make sure that your hosting environment has:
- PHP version 7.4 or greater
- MySQL version 5.6 or greater OR MariaDB version 10.1 or greater
- WordPress: 5.3.4 or greater
- WordPress memory limit of 256 MB or greater
- HTTPS support
- CURL or fsockopen support
Simplify WooCommerce ETL using Hevo’s No-code Data Pipelines
A fully managed No-code Data Pipeline platform like Hevo Data helps you integrate and load data from 100+ Data Sources such as WooCommerce (including 40+ Free Data Sources) to a destination of your choice in real-time in an effortless manner.
Get Started with Hevo for FreeHevo with its minimal learning curve can be set up in just a few minutes allowing the users to load data without having to compromise performance. Its strong integration with umpteenth sources allows users to bring in data of different kinds in a smooth fashion without having to code a single line.
Check out some of the cool features of Hevo:
- Completely Automated: The Hevo platform can be set up in just a few minutes and requires minimal maintenance.
- Real-Time Data Transfer: Hevo provides real-time data migration, so you can have analysis-ready data always.
- Transformations: Hevo provides preload transformations through Python code. It also allows you to run transformation code for each event in the Data Pipelines you set up. You need to edit the event object’s properties received in the transform method as a parameter to carry out the transformation. Hevo also offers drag and drop transformations like Date and Control Functions, JSON, and Event Manipulation to name a few. These can be configured and tested before putting them to use.
- Connectors: Hevo supports 100+ Integrations to SaaS platforms such as WooCommerce, WordPress, files, databases, analytics, and BI tools. It supports various destinations including Amazon Redshift, Firebolt, Snowflake Data Warehouses; Databricks, Amazon S3 Data Lakes; and MySQL, SQL Server, TokuDB, DynamoDB, PostgreSQL databases to name a few.
- 100% Complete & Accurate Data Transfer: Hevo’s robust infrastructure ensures reliable data transfer with zero data loss.
- Scalable Infrastructure: Hevo has in-built integrations for 100+ sources that can help you scale your data infrastructure as required.
- 24/7 Live Support: The Hevo team is available round the clock to extend exceptional support to you through chat, email, and support calls.
- Schema Management: Hevo takes away the tedious task of schema management & automatically detects the schema of incoming data and maps it to the destination schema.
- Live Monitoring: Hevo allows you to monitor the data flow so you can check where your data is at a particular point in time.
WooCommerce Storefront Installation Steps
The simplest way to install Storefront from the WordPress theme repository. Using the WordPress dashboard:
- Navigate to: Appearance > Themes > Add New.
- From the search box, type ‘storefront’ and then click enter.
- Hover over the Storefront Homepage image.
- Click the Install button.
- Next click Activate to activate the WooCommerce Storefront theme.
After installing and activating the WooCommerce Storefront theme, you will be presented with a prompt asking you to Install and Activate WooCommerce:
WooCommerce Installation Steps
You can install and/or uninstall WooCommerce in the same way as you would for any other WordPress plugin.
In the WordPress Admin panel:
- Navigate to: Plugins > Add New.
- From the search box, type “WooCommerce”.
- Then select the Install Now option.
- Next hit the Activate Now button and you’ll be taken to the WooCommerce Setup Wizard.
Understanding the Steps involved in Configuring WooCommerce
The WooCommerce setup wizard is split into six sections and in each section, you should fill in details about your online store. These six sections include:
- Page Setup: This section automatically generates the default Storefront pages such as Cart, Checkout, Shop, and My Account.
- Store Location: In this section, you are supposed to key in details about your store’s location, default currency, and sales tax.
- Shipping: Use this section to configure weight units and dimension units.
- Payments: Set up a payment gateway.
- Theme: Use this section to install a WooCommerce compatible theme.
- Ready: This section is optional and it prompts you to allow WooCommerce to collect usage information. You can opt to accept or decline.
You can edit these settings anytime you want inside the WooCommerce dashboard.
Understanding the Steps involved in Configuring WooCommerce Storefront
After wrapping up with the WooCommerce setup, navigate to the WooCommerce admin homepage located at WooCommerce > Home
You will find a new message in your inbox which will prompt you to visit the Storefront settings page to start setting up and customizing your shop.
Click on the Let’s go! button. The Customizer Guided Tour will then start walking you through the necessary steps to help customize your store to your liking.
Here are the steps involved in configuring Storefront:
- Adding your Logo
- Adding your Site Icon/Favicon
- Adding your Site Title
- Adding a Custom Font
- Setting up your WooCommerce Storefront Homepage template
- Displaying the Homepage Template
- Customizing the Shop Page Layout
- Setting up your Menu
- Adding Product Categories to your Menu
- Adding a Product to Storefront
- Setting up Product Price & Attributes
- Customize the Product Details Page Layout
Adding your Logo
To add your logo to your new WooCommerce Storefront shop:
- Step 1: Navigate to Appearance > Customize
- Step 2: Next, go to Site Identity > Logo
- Step 3: Click the Select Logo button to add your image. It is recommended that the image size be: 470px X 110px
- Step 4: Next click Publish.
Adding your Site Icon/Favicon
To add your favicon to your site:
- Step 1: Go to Appearance > Customize
- Step 2: Next, go to Site Identity > Site Icon
- Step 3: Click on Select Image to upload an image. The recommended size for a favicon is: 512px X 512px.
- Step 4: Click on Publish.
Adding your Site Title
To add your site title:
- Step 1: From the menu, go to Appearance > Customize
- Step 2: Next, go to Site Identity > Site Title and add your site’s title.
- Step 3: Enter an optional Tagline, for example, A brief description of your site or motto.
- Step 4: Click on Publish.
Adding a Custom Font
To add a custom font to your website:
- Step 1: Navigate to Appearance > Customize > General Styles > Typography
- Step 2: Select the desired font from Font Pairings
- Step 3: Click on Publish.
Setting up your WooCommerce Storefront Homepage template
Apart from the built-in WooCommerce pages such as a cart, checkout, etc., Storefront creates a Homepage template. The Homepage template is well structured to make it easy for your users to find the products you are selling.
The Homepage template is a great way to display your products. It gives an overview of your products and product categories to users as soon as they land on your website.
To set up the Homepage template, from the WordPress Admin panel:
- Step 1: Navigate to Dashboard > Pages and create a page titled “Home”.
- Step 2: Add some content that you would like displayed to your visitors.
- Step 3: On the right-hand side, you will get a box named “Page Attributes“.
- Step 4: Choose “Homepage” from the “Template” drop-down menu.
- Step 5: Next click Publish.
Displaying the Homepage Template
After publishing your Homepage, the next step is to set this Homepage as the landing page on your website. To set the Homepage template as your landing page:
- Step 1: Go to Dashboard > Settings > Reading.
- Step 2: Under the section named Your homepage displays select A static page.
- Step 3: Assign the Homepage that you created in the Homepage dropdown.
- Step 4: Click Save Changes.
Your new Homepage will now appear on the landing page of your website.
Customizing the Shop Page Layout
To customize your shop page layout:
- Step 1: Go to Appearance > Customize > WooCommerce > Shop Page – Product Listings
- Step 2: Select the preferred layout of your shop page from Product Archive Layout
- Step 3: Click on Publish
Setting up your Menu
If you fail to set a specific primary menu for WooCommerce Storefront, WordPress will display all your pages as your primary menu. This often confuses visitors and makes it harder for them to navigate through the pages.
To set up a menu, in your WordPress Admin panel:
- Step 1: Navigate to Appearance > Menus
- Step 2: Locate the Menu Name field at the top of the page. Fill in your menu name here.
- Step 3: On your left side click on Pages to add pages to your menu.
- Step 4: Click View All to retrieve a list of all the published pages.
- Step 5: Use the radio buttons to select the pages you want to appear on the menu.
- Step 6: Select the page and then click the Add to Menu button.
- Step 7: You can drag & drop the menu items to rearrange them in the order that you would wish them to appear.
- Step 8: Click Save Menu
Adding Product Categories to your Menu
To add product categories to your Menu:
- Step 1: In your WordPress Admin panel, click Appearance > Menus.
- Step 2: On the top left side, select Screen Options and check Product Categories.
- Step 3: A Product Categories tab will show up. Click on the Product Categories tab to expand, and then select the categories.
- Step 4: After selecting, click the Add to Menu button.
- Step 5: You can now drag & drop the menu items to rearrange them according to your liking.
- Step 6: Click Save to save the changes.
Adding a Product to Storefront
To add a product to your WooCommerce Storefront product catalog:
- Step 1: Go to your WordPress Admin Dashboard.
- Step 2: Click on Products > Add New.
- Step 3: Write your product name or title in the Product Name field.
- Step 4: Write your product description below the editor.
- Step 5: Now you have to upload one featured image of your product and add an image to a product gallery.
- Step 6: On the right, you will find a box titled Product image & product gallery.
- Step 7: Upload the featured image to the Product image and additional images to the product gallery.
- Step 8: Click on Publish.
Setting up Product Price & Attributes
- Step 1: To set the product price, go to Dashboard > Products and select any product.
- Step 2: Then Scroll down to the Product Data section.
Customize the Product Details Page Layout
- Step 1: To customize the product details page layout, go to Appearance > Customize > WooCommerce > Shop Page – Product Listings.
- Step 2: Choose a layout from the Product Archive Layout.
- Step 3: Click on Publish to finish setting up WooCommerce Storefront.
Conclusion
WooCommerce Storefront is built to make it easier for developers to create a visually appealing and functional WooCommerce-powered store. There are still a lot of customizations that you can do to make your online store stand out by creating a unique shopping experience for your customers.
Feel free to explore the different options at your disposal.
Extracting complex data from a diverse set of data sources such as WooCommerce can be a challenging task and this is where Hevo saves the day!
Visit our Website to Explore HevoHevo Data offers a faster way to move data from WooCommerce and 100+ Data Sources (Including 40+ Free Data Sources), other SaaS applications, or Databases into your Data Warehouse to be visualized in a BI tool. Hevo is fully automated and hence does not require you to code.
Want to take Hevo for a spin? Sign Up for a 14-day free trial and experience the feature-rich Hevo suite first hand. You can also have a look at the unbeatable pricing that will help you choose the right plan for your business needs.
