In this tutorial post we’ll show you how to create products in WooCommerce e-commerce system for WordPress. We’ll be walking you through the process in text and video. This is the second post in a series of posts on WooCommerce settings.
As a recap, you can find the other post topics here:
- How to install and configure WooCommerce Settings for WordPress
- Creating Basic Products in WooCommerce (You’re reading this one right now!)
- Creating Variable Products and Multiple Option Donations in WooCommerce
- Creating Name Your Own Price Donation Options in WooCommerce
- Navigating the WooCommerce Checkout Process
- WooCommerce Order Review and Manual Edits
- WooCommerce Reporting Features
- How to Add Manual Orders to WooCommerce
- How to Process Refunds through WooCommerce
Create a Product in WooCommerce
WooCommerce makes creating a product quite simple. Out of the box, WooCommerce gives you the ability to create basic products without any extra plugins or premium extensions. That means you can get started with e-commerce on your site at no cost.
We’ve included a video below showing you every step in the process of creating basic products in WooCommerce. Below that, you can follow along with text as well.
Add Products Screen
From your admin menu you’ll see a link PRODUCTS underneath the WooCommerce link. Products are controlled outside of general WooCommerce settings which is why you find it outside the standard WooCommerce area. You can click “Add New Product” or simply click on the PRODUCTS link and it will take you to the listing of all products in your store. From there, you can click on the blue Add New button.
One on the “add product” screen you’ll see a screen much like any post or page editing screen. You have space for a title and normal text area below that. To the right you’ll see categories, though these are specific to products, and also tags. You’ll see some gallery and image options which we’ll discuss in a moment.
The most important part of the product is the PRODUCT DATA section which comes in its own box, called a meta-box, listed below the editing screen. It looks like the image below.
WooCommerce Product Data
Inside the product data box you have several tabs running down the left side including:
- Linked Products
Above the top of the product data field you have the choice of selecting 2 check boxes, Virtual and/or Downloadable.
Virtual means the product is not a physical product and has no shipping. Selecting this box will remove the shipping options from the product.
Downloadable means the product comes with files that can be downloaded. Selecting this box will place additional options under the general tab explained below.
This is the general product information including price and sale price if the product is currently on sale. Simply enter a price in the Regular Price field and you’re all set. Technically, this is all you need to publish a product.If you leave this field blank it will assume you are offering a free product and a “FREE” badge will show up in the catalog and on your single product page.
You can set a schedule for the sale of a product by clicking the schedule link here. It will allow you to set dates when the product will be on sale at a reduced sale price you can set. During that time, the product will show a “SALE” sticker on it inside the catalog and on the single product page.
If you selected the downloadable check box, you’ll have additional options to choose from. This allows the customer, after successful checkout, to download files associated with the order. This could be an e-book, software, audio or video file, etc. Basically, anything that could be downloaded. To complete this section you’ll add the files available for download, either by selecting them from the media library or uploading them new. You’ll fill out the maximum number of times the file can be downloaded and whether it has a date of expiration past which the file can no longer be downloaded. You can also select the type of download which affects how the schema will display in search engines.
If you set your shop to control inventory you can manage individual stock from the Inventory settings tab.
You can set the stock status using the drop down menu. That will override any stock number you might have there as well. Depending on how you set your general WooCommerce settings, you can make it so that products “Out of Stock” are either not shown in the catalog or not available for purchase. In this way, if you have a product that goes out of stock you can avoid selling it with just a click.
This area lets you link other products to the current product to offer up-sells and cross-sells during the checkout process.
This is where you add options to your products like sizes, styles, colors, etc.
This is more relevant during variable products, where customers make a choice of options related to the product. For example – selling t-shirts – you might offer small, medium, and large – and the customer has to make a choice which he or she wants because each option might carry a different price. We’ll cover that in a different tutorial.
This is where you can enable or disable reviews, add purchase notes, or set the order in which the product displays in the admin area or in the shop.
There are two areas you can create images inside WooCommerce products, the product gallery and featured image.
The product gallery gives you the ability to upload multiple images of your product. This is great for adding things like side views, front and back views, or any other view you might need to add to sell your item. For books, you might include a sample page.
For nonprofit donations, we don’t normally upload gallery pics, we just use the single featured image.
The featured image shows up in the overall catalog and is what is used if the product is shared through social media streams. It’s also what is used to view the product inside the cart and/or checkout area if your theme displays the thumbnail there.
A Note About Image Sizes
In the first part of the tutorial series, we discussed product settings. During that tutorial we showed the product image settings. There were three types of settings: catalog images, single product image, and product thumbnails. When viewing products in your store you’ll see why these settings are so important.
What WooCommerce does is actually create new images for the images you upload according to the sizes you set here. We’ve set each of them to 500px X 500px. This is a good general setting. That means, Woo will create a 500×500 sized image when you upload something for use on a product page. It then scales it up or down based on the theme display. For single product images in pages with a sidebar, that should be big enough to display well in your column. For thumbnails and catalog images it will be overkill, but it will all but make sure your image is sized big enough – as long as your original image uploaded isn’t too small as well.
The HARD CROP setting means that WooCommerce will scale your image to the width first. In our case, 500 pixels. If in doing so, the height of the image extends beyond the height setting (500px here too) it will crop off the image at our set dimensions. So if after resizing, your image wants to be tall, like 500px by 800p, Woo will only show the 500×500, meaning the bottom 300px will get cropped off.
In general, when placing images on the web, when you have a small resolution and scale it up distortion will occur. That means, the computer will pixellate the image trying to scale it to a large size. This looks horrible on the web, is poor design, and can turn a customer away from a potential purchase or donation. This should happen if you uploaded a small image, say 120px X 120px and tried to show it in a page where it wanted to be 500px X 500px.
If you add an image and it looks distorted on your single product page – this is probably why. Check your image or your product image settings and make corrections, either upload a higher resolution image or change the image size settings.
Product Text and Tabs
Text shows up on your product in different ways following the instructions in the image below:
Whatever you choose for the title inside the product editing screen will show up in the area marked “Title.” It’s slightly larger than the other fonts on the page, and this can be overridden with additional styling through CSS. Keep in mind, longer titles, while okay to read on single product pages may look funky on shop/catalog pages. Keep your titles short if possible.
Categories and Tags
Any categories and tags you choose will be listed below the main product info and will include links to other products that have those same categories and tags.
The product description text is the text you put in the editor box underneath the title in the product editing screen. This space is used to add any product related information important to the potential customer before he or she makes that purchase decision.
This is where attribute or variation information will go if you’ve added any. If not, this tab will be hidden.
This is where customers can leave reviews of your product for others to see. These reviews may show up in search engines as well, and give your product a boost in search rankings if used. This can be set using the advanced product data tab as described above, or edited in the overall WooCommerce settings area. For nonprofits and donations, we typically leave this off by un-checking the reviews box in the product data advanced tab.
There are just a few simple settings to create a product in WooCommerce. Once you do it a few times you’ll be a pro!
Remember, this is part of a tutorial series of WooCommerce settings tutorials. To view other tutorials in the series visit the top of this post for the links to other parts or the table of contents in the first post of the series,
Latest posts by Craig Grella (see all)
- The Tools We Used to Help a Nonprofit Collect Donations of $465,193 in One Day - July 1, 2015
- Turn Off Ads on YouTube Videos - June 26, 2015
- How to Create a Facebook Ad for Your Facebook Page - June 23, 2015