A detailed tutorial on how to add a product using the WooCommerce plugin for a WordPress website.
So you have a WordPress site and you want to do some of the backend work and updates yourself to your ecommerce store? That’s fantastic!
You’ve got yourself a WordPress site and decided to use WooCommerce to provide your ecommerce option. Now it’s time to add your first product. This tutorial will provide you with the steps to guide you and give you the confidence to forge ahead in taking your ecommerce website maintenance into your own hands.
As you make your way through the tutorial, if you need to see any image larger, simply select/click on the image and it will open up to fill your screen. To continue with the tutorial, click on the “x” in the corner to close the popup window,
*as a quick caveat – please consult with your web guy/gal if you have one and let them know (if you haven’t already) that you’re going to be doing these updates. It’s important to backup your site before every major update just in case something goes wonky.
Step 1: Login to your WordPress website admin area
This is usually done by going to yourwebsite.com/wp-admin . When you get to the login screen, you enter your credentials and find yourself in the “admin” or “backend” area of your website.
Step 2: Locate the “product” area in the left menu
In WordPress, once you’ve added WooCommerce your options will be about half way down the left hand navigation menu. “WooCommerce” has the setup and other options. For today, we are looking for “Products”.
When you hover over “products” the link will turn blue and a secondary navigation menu pops out to the right. It gives you the option to see all products, add new [product], or to look at the categories, tags, attributes, or reviews pages.
For today – we are going to select “all products” so it takes you to the product page.
I’m using our client, Building Bridges Box, as our example for this tutorial. As you can see in the image, when we go to the “All Products” page, they already have several products listed. Your backend may look like this as well if you had your web guy/gal set up a few products for you to use as a template.
Step 3: Add a new product
There are two ways that you can add a new product. If there are no products, then you would “Add New” (the button in the upper left hand corner). If you have products in your product page, then you could also “duplicate” the product.
The duplicate option is good to use if you have products with similar qualities or attributes. If they are completely different, than “Add New” would be better.
You can also see that you have the option to “use the divi builder” – the purple button. For products, it is highly recommended you NOT design using the page builder. For us, we create global templates for your products so they all look the same. If you change the settings on a single product setting, you could inadverdently change the settings.
Step 4: Add product details
Now’s the fun part – adding all the details!
There is a lot here, even if it doesn’t look like it.
When you add a product, you will add the title of the product. As you can see, the product title/name now becomes part of the hyperlink of your product. It’s important to be concise to keep the URL short. You’ll also notice that it’s repeated in the product description fairly early on. This is important for SEO.
The next section after the product description, is the product data. For this example, we are adding a “simple product”. A simple product is one without variations or attributes – like this tray. A variable product would be one with options – tshirt size, color, sets, etc.
Within the “general” menu under product data, you want to make sure you add your regular price, the tax status, and the tax class. When you set up your WooCommerce store, you should have established what your state sales tax rate was. Every product should be taxable, and the tax class will almost always be standard.
The next section after the general product data, is the inventory information. For this example, we are opting to “manage stock” by selecting the checkbox. This helps prevent backorders or people ordering more than you have stock for. You will enter the quantity, whether you want to allow backorders (this can be used if your product is made to order), what your low stock threshold is, and if you want to limit the number people can buy. The low stock threshold will let your customers know on your store/shop page when there is low stock.
Next up is shipping information. WooCommerce will automatically calculate shipping based on weight and shipped dimensions if you enter in that data. You can also offer flat rate shipping, like Building Bridges Box has chosen to do. Since they have flat rate shipping, we select the shipping class already defined.
Linked products is next. This is where you have the opportunity to upsell or cross sell your products. If you have other products added, you can search for them and add them here. If this is your first product, you won’t be able to add any products to this section. Cross-sells are products that might be shown in a “you might be also be interested in” section of a website. Upsells are just like they sound, products that are more expensive but related. For Building Bridges Box, their upsell is their subscription box, and a cross-sell are other overstock products.
The last item we’re going to look at for this step, is the “advanced” option. You can enable product reviews, adjust the menu order (not recommended), and add a purchase note. The purchase note is a great place to add any special information, particularly if you make your items to order. You can put your estimated turn around time here with the preferred email address you want them to use for made to order updates.
Step 5: Set Up the Product Image
Now that we have all the product data added, it’s time to look at adding the product pictures! We use Adobe Photoshop as our image editor. We prefer Adobe because you can add all the meta data for the image as we show here. You can also use Canva as a free option.
You can find the “file info” screen shown here under “File” in the Adobe Photoshop menu. We use this to apply all the “meta data” for the images we upload to websites. Yes, even the images for this tutorial have the data. The document title should state what the image is. The author is who took the picture or where the picture was obtained. The author title is just that, who the author/creator of the image is. The description writer is you, and the keywords are the same words that you would want people to use when searching to find the product or your page. You can also set the copyright status of the image. We set the copyright for every image we use to protect us and our clients.
When using Adobe Photoshop, you have the option to “Save for Web” under File > Export options. WooCommerce products should actually be saved at 1000×1000 for optimal resolution when displayed online. However, you also need your size to be below 100K. When you start going larger than that your site may load slower and reduce your user experience. Which we don’t want. You can adjust the quality (in the upper right hand corner) as well as the image size (lower right hand corner). Once your adjustments have been made, you’d select “save”. Save it in your desired folder so you know where to grab it from in the next step.
Step 6: Set product image
You’ve added all the product details. Set up your image so it’s good to go for both size AND it’s even going to help your SEO. Now it’s time to add the image to the product.
The product image is over on the right hand side of your screen. When you “set product image”, it will be the front and featured image for your product. You have the option to add more images to the product gallery, but it is not necessary. Once you select “set product image”, a new window pops up for your media library. There will be two tabs – “media library” and “upload files”. You want to go over to “upload files” and then select “select files”. From here, you can go to where you saved your product image at and upload it.
Once your image is uploaded. On the right hand side of the screen you’ll see these options. The “alt text” block is for “alternative text”. This is a digital accessibility feature and what a screen reader will read to describe the image to someone who cannot see it. It’s important. You want to be concise but explain what the product is. The title is pulled from the image title that you saved the image as. This is why you want to name the image something relevant. Once you enter in the required info, you will select the “set product image” button.
Step 7: Product Short description
Next up is the product short description. This is just a quick little snippet that states what the product is. This will show besides your product image, while the longer product description you wrote earlier will display below your product.
Step 8: Product Categories
Almost done! The next thing to do is decide on what kind of categories your products fit in. You can add new categories as you go. Tags and categories are different. Categories are the type of product you will be selling. The tags help define it a little bit better. In this example, the tray is listed under the “housewares” category, with a tag of “tray”. This blog post is listed under the “how-to” category, with a tag of “woocommerce”.
Step 9: Optional SEO information
If you are one of our clients, you will see the option to add a focus keyword, edit snippet, and see how your product will be shared on social media. We use RankMath to assist with our SEO marketing. In the example below, you can see how we use the keyword in the product name, the url, and the description. This help improve the SEO for your product and the site.
Step 10: Publish Product
The last step is here! Scroll all the way to the top of your screen and in the right hand side look for the “publish” area. You can choose to “preview” what your new product will look like (which will open a new window/tab), save it as a draft if you have more work to do, or publish it.
If you’re done, hit that publish button and set your product free into the interwebs!
A quick note about the SEO score – this is a best case/world scenario. If you have an SEO application added by your web guy/gal, don’t let the score scare you.
Way to go! You’ve just created your first product for your WooCommerce store!
Please let us know if you found this tutorial helpful.
If you need help with maintaining your we can help you find a maintenance plan that works for you.
*This post contains affiliate links. We may receive compensation if you sign up and/or purchase using the links*