OK, so if you’ve been following our previous tutorials you’ll have your domain name and hosting setup with Ionos, you’ll have created your WordPress installation, setup some basic plugs, and installed Storefront, we’ve made a lot of progress, and now it’s time to start adding some real-world products.
Hopefully, you’ll have found your own niche, you may already have a product line that you sell through a shop or other outlet, you may even be sourcing through Alibaba. I’ll be creating later posts to help if you haven’t yet got this formalized.
So let’s look at our site. Log-in to your dashboard and go to Products > Categories. You will see that Storefront has imported three categories for us – Accessories, Hoodies, and Tshirts. If we hover our mouse over one of these categories we will see options to Edit, Quick Edit, Delete, View or Make Default.
If we select Edit, the window will change to allow us to change the name of the category, or the ‘URL slug’ that is shown in the page URL. Within this Edit page we can also change the image using the Thumbnail options to drag and drop an image or to select an image that is already in use on the site. If we select Quick Edit, we can change the category within the current browser page, sometimes a quicker option.
We can also create a description for our categories if we wish. Whilst this is not essential to our site, sometimes this is useful for adding extra content for SEO purposes.
So let’s take a look at products. Go to Products > All Products in the dashboard and take a look. You will (hopefully) see a list of dummy products that can be edited for use in your store. Similarly to categories you can hover your mouse over an item for a sub menu. Clicking on Quick Edit here brings up many more options. Here’s a look at one item, you will see options for product tag, review enabling, SKU (stock keeping unit), sale price options, shipping class , stock management, visibility etc…
When we choose ‘Edit Product’ we have these options, plus more, available to us in a format that is similar to a WordPress post. Indeed this is in a style that was common to WordPress before the recent Gutenberg updates. Woocommerce options are available to you below the product description window which include pricing options, stock management, shipping information and options to assign attributes such as product sizes.
The right hand sidebar gives us options to select product tages, categories, and to add images to our products for display in our store…
So my demo site currently has three categories, and 12 products, three for each category. I’m now going to add some real-world products to this store to get things properly up and running.
Editing a product is straightforward enough:
- Change the product name in the top bar.
- Copy the product name, click ‘Edit‘ on the next line and paste the product name into the box to change the permalink URL.
- Enter a suitable product description.
- Check the product category is correct.
- Add suitable tags to your product.
- Click on the product image, this browser will now open the image uploader. Drag and drop your product image.
- In the ‘Product data‘ box you may wish to change the price, we’ll be looking in detail at this box soon.
Adding a product is exactly the same, although you’re creating this data from scratch. Go to ‘+ New‘ on the top admin bar and select ‘Product’ from the dropdown and follow the above list, adding info where necessary.
Here’s a screengrab of the homepage so far with some actual products added so we can see the site starting to take shape. We’ll be adding some branding and working more on the backend of our site next…