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

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

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

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

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.