Blog Featured Image with text overlay. Topic - WooCommerce - How to add a product.

WooCommerce – How to add a product

Do you have an ecommerce site and use WooCommerce? Are you trying to figure out how to add a product yourself so you can bug your web guy/gall less?

Categories

[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”4.20.4″ custom_margin=”0px||||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}”][et_pb_row admin_label=”row” _builder_version=”4.20.2″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_margin=”0px||0px||true|false” custom_padding=”0px||||false|false” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_text admin_label=”Intro Text” _builder_version=”4.20.4″ _module_preset=”default” link_font=”|800|||on|||#0B9958|” link_text_color=”#0B9958″ global_colors_info=”{}”]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.20.2″ _module_preset=”default” custom_margin=”2%||0px||false|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”Step 1 – Login” _builder_version=”4.20.2″ _module_preset=”default” custom_margin=”0px||0px||true|false” custom_padding=”0px||1%||false|false” global_colors_info=”{}”]

Step 1: Login to your WordPress website admin area

[/et_pb_text][et_pb_text admin_label=”Login to WP Admin” _builder_version=”4.20.2″ _module_preset=”default” custom_margin=”||2%||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][et_pb_text admin_label=”Step 2 – Find Product” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||0px||true|false” custom_padding=”0px||1%||false|false” global_colors_info=”{}”]

Step 2: Locate the “product” area in the left menu

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”2_3,1_3″ _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||0px||true|false” custom_padding=”0px||2%||false|false” global_colors_info=”{}”][et_pb_column type=”2_3″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|3%|||false|false” global_colors_info=”{}”][et_pb_text admin_label=”Product Menu” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||2%||false|false” global_colors_info=”{}”]

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”.

[/et_pb_text][et_pb_text admin_label=”Add product menu” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||2%||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][et_pb_text admin_label=”Add Prod Page” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||3%||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-Add-Prod-All-Prod-Pg.jpg” alt=”Screenshot of %22All Products%22 menu for WooCommerce.” title_text=”WC-Add-Prod-All-Prod-Pg” show_in_lightbox=”on” align=”center” admin_label=”All product page” _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][/et_pb_image][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|1%||1%|false|true” global_colors_info=”{}”][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-Add-Prod-Find-Menu.jpg” alt=”A screenshot with a red arrow pointing to where to find the product menu for WooCommerce.” title_text=”WC-Add-Prod-Find-Menu” show_in_lightbox=”on” align=”center” admin_label=”Product Menu” _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.20.2″ _module_preset=”default” custom_margin=”2%||0px||false|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”Step 3: Add new product” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||0px||true|false” custom_padding=”0px||1%||false|false” global_colors_info=”{}”]

Step 3: Add a new product

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”2_5,3_5″ _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||5%||false|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”2_5″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|1%|||false|false” global_colors_info=”{}”][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-Add-Prod-New-Dup.jpg” alt=”Close up screenshot of the two different ways you can add a product – add new or duplicate.” title_text=”WC-Add-Prod-New-Dup” show_in_lightbox=”on” align=”center” admin_label=”Add product ” _builder_version=”4.20.4″ _module_preset=”default” custom_padding=”||3%||false|false” global_colors_info=”{}”][/et_pb_image][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-Add-New-Prod.jpg” alt=”Screenshot showing the areas that should be filled in when adding a new product for WooCommerce.” title_text=”WC-Add-New-Prod” show_in_lightbox=”on” align=”center” admin_label=”Add new product ” _builder_version=”4.20.4″ _module_preset=”default” custom_padding=”||3%||false|false” global_colors_info=”{}”][/et_pb_image][/et_pb_column][et_pb_column type=”3_5″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|||3%|false|false” global_colors_info=”{}”][et_pb_text admin_label=”Add Prod ” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||3%||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][et_pb_text admin_label=”Add Prod ” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][et_pb_text admin_label=”Add Prod ” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”3%||||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.20.2″ _module_preset=”default” custom_margin=”2%||0px||false|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”Step 4 – Product Details” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||0px||true|false” custom_padding=”0px||1%||false|false” global_colors_info=”{}”]

Step 4: Add product details

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.20.2″ _module_preset=”default” custom_margin=”0px||0px||true|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|1%|||false|false” global_colors_info=”{}”][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-New-Prod-Desc.jpg” alt=”Screenshot of new product details with %22hero tray%22 underlined in red in multiple areas.” title_text=”WC-New-Prod-Desc” show_in_lightbox=”on” align=”center” admin_label=”Product Details” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”||5%||false|false” global_colors_info=”{}”][/et_pb_image][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|||2%|false|false” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||2%||false|false” global_colors_info=”{}”]

Now’s the fun part – adding all the details!

There is a lot here, even if it doesn’t look like it.

[/et_pb_text][et_pb_text _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||3%||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.20.2″ _module_preset=”default” custom_margin=”0px||0px||true|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|1%|||false|false” global_colors_info=”{}”][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-New-Prod-Data-Gene.jpg” alt=”Screenshot showing product data and what information needs to be added for a new product.” title_text=”WC-New-Prod-Data-Gene” show_in_lightbox=”on” align=”center” admin_label=”Product Details – General Data” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”||5%||false|false” global_colors_info=”{}”][/et_pb_image][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|||2%|false|false” global_colors_info=”{}”][et_pb_text admin_label=”Prod Data – Sim Prod” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”Prod Data – Sim Prod” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||3%||false|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|1%|||false|false” global_colors_info=”{}”][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-New-Prod-Data-Inventory.jpg” alt=”Screenshot showing the information that should be included when adding product inventory.” title_text=”WC-New-Prod-Data-Inventory” show_in_lightbox=”on” align=”center” admin_label=”Product Details – Inventory” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”||5%||false|false” global_colors_info=”{}”][/et_pb_image][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|||2%|false|false” global_colors_info=”{}”][et_pb_text admin_label=”Prod Data – Sim Prod” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||3%||false|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|1%|||false|false” global_colors_info=”{}”][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-New-Prod-Data-Shipping.jpg” alt=”Screenshot of the shipping details page and what information needs to be included.” title_text=”WC-New-Prod-Data-Shipping” show_in_lightbox=”on” align=”center” admin_label=”Product Details – shipping” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”||5%||false|false” global_colors_info=”{}”][/et_pb_image][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|||2%|false|false” global_colors_info=”{}”][et_pb_text admin_label=”Prod Data – Sim Prod” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||3%||false|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|1%|||false|false” global_colors_info=”{}”][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-New-Prod-Linked-Prod.jpg” alt=”Screenshot showing what kind of information is required for the %22linked products%22 section of the product data menu.” title_text=”WC-New-Prod-Linked-Prod” show_in_lightbox=”on” align=”center” admin_label=”Product Details – Linked Prod” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”||5%||false|false” global_colors_info=”{}”][/et_pb_image][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|||2%|false|false” global_colors_info=”{}”][et_pb_text admin_label=”Prod Data – Sim Prod” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||3%||false|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|1%|||false|false” global_colors_info=”{}”][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-New-Prod-Adv-Note-Rvw.jpg” alt=”Screenshot showing the %22advanced%22 product data menu.” title_text=”WC-New-Prod-Adv-Note-Rvw” show_in_lightbox=”on” align=”center” admin_label=”Product Details – Advanced” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”||5%||false|false” global_colors_info=”{}”][/et_pb_image][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|||2%|false|false” global_colors_info=”{}”][et_pb_text admin_label=”Prod Data – Sim Prod” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.20.2″ _module_preset=”default” custom_margin=”2%||0px||false|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”Step 5 – set product image” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||0px||true|false” custom_padding=”0px||1%||false|false” global_colors_info=”{}”]

Step 5: Set Up the Product Image

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.20.2″ _module_preset=”default” custom_margin=”0px||3%||false|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|3%|||false|false” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||5%||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][et_pb_text admin_label=”Product image” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}”]

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. 

[/et_pb_text][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|||1%|false|false” global_colors_info=”{}”][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-Add-Prod-Image-Attribution.jpg” alt=”Screen shot of %22file information%22 found under File in the Adobe Photoshop Menu.” title_text=”WC-Add-Prod-Image-Attribution” show_in_lightbox=”on” align=”center” admin_label=”Image Attribution” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”||5%||false|false” global_colors_info=”{}”][/et_pb_image][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-New-Prod-Image-Settings.jpg” alt=”Screenshot of the %22save as%22 screen when exporting the image for %22web%22 use.” title_text=”WC-New-Prod-Image-Settings” show_in_lightbox=”on” align=”center” admin_label=”Image Save for Web” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”||5%||false|false” global_colors_info=”{}”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”Product image” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.20.2″ _module_preset=”default” custom_margin=”2%||2%||true|false” custom_padding=”0px||1%||false|false” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”Step 6 – set prod image” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||0px||true|false” custom_padding=”0px||1%||false|false” global_colors_info=”{}”]

Step 6: Set product image

[/et_pb_text][et_pb_text admin_label=”add image” _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”]

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. 

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_3,2_3″ _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||3%||false|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”1_3″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|1%|||false|false” global_colors_info=”{}”][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-New-Prod-Set-Image.jpg” alt=”Set Product Image screenshot.” title_text=”WC-New-Prod-Set-Image” show_in_lightbox=”on” align=”center” admin_label=”set prod image” _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][/et_pb_image][/et_pb_column][et_pb_column type=”2_3″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|||3%|false|false” global_colors_info=”{}”][et_pb_text admin_label=”set prod image” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||2%||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_3,2_3″ _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||3%||false|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”1_3″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|1%|||false|false” global_colors_info=”{}”][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-New-Prod-Image-Detailsjpg.jpg” alt=”Adding alt text to a product image, screenshot of menu.” title_text=”WC-New-Prod-Image-Detailsjpg” show_in_lightbox=”on” align=”center” admin_label=”set prod image alt text” _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][/et_pb_image][/et_pb_column][et_pb_column type=”2_3″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|||3%|false|false” global_colors_info=”{}”][et_pb_text admin_label=”set prod image” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||2%||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.20.2″ _module_preset=”default” custom_margin=”2%||2%||true|false” custom_padding=”0px||1%||false|false” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”Step 7 – prod short description” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||0px||true|false” custom_padding=”0px||1%||false|false” global_colors_info=”{}”]

Step 7: Product Short description

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”2_3,1_3″ _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||3%||false|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”2_3″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|1%|||false|false” global_colors_info=”{}”][et_pb_text admin_label=”prod short desc” _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”]

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.

[/et_pb_text][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|||3%|false|false” global_colors_info=”{}”][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-New-Prod-Short-Desc.jpg” alt=”Screenshot of the product short description.” title_text=”WC-New-Prod-Short-Desc” show_in_lightbox=”on” align=”center” admin_label=”prod short description” _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.20.2″ _module_preset=”default” custom_margin=”2%||2%||true|false” custom_padding=”0px||1%||false|false” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”Step 7 – prod categories” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||0px||true|false” custom_padding=”0px||1%||false|false” global_colors_info=”{}”]

Step 8: Product Categories

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_3,2_3″ _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||3%||false|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”1_3″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|1%|||false|false” global_colors_info=”{}”][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-New-Prod-Cat-and-Tag.jpg” alt=”screenshot of the product categories and tags menu.” title_text=”WC-New-Prod-Cat-and-Tag” show_in_lightbox=”on” align=”center” admin_label=”categories and tags” _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][/et_pb_image][/et_pb_column][et_pb_column type=”2_3″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|||3%|false|false” global_colors_info=”{}”][et_pb_text admin_label=”set prod image” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||2%||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}”]

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”. 

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.20.2″ _module_preset=”default” custom_margin=”2%||2%||true|false” custom_padding=”0px||1%||false|false” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”Step 9 – SEO” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”10px||10px||true|false” custom_padding=”0px||1%||false|false” global_colors_info=”{}”]

Step 9: Optional SEO information

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”2_3,1_3″ _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||3%||false|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”2_3″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|1%|||false|false” global_colors_info=”{}”][et_pb_text admin_label=”SEO rankmath” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||2%||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}”]

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.

[/et_pb_text][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|||3%|false|false” global_colors_info=”{}”][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-New-Prod-Snippet-Basic-SEO.jpg” alt=”Screenshot showing where and how to add SEO information if using the application, RankMath.” title_text=”WC-New-Prod-Snippet-Basic-SEO” show_in_lightbox=”on” align=”center” admin_label=”prod short description” _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.20.2″ _module_preset=”default” custom_margin=”2%||2%||true|false” custom_padding=”0px||1%||false|false” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”Step 10 -publish” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”10px||10px||true|false” custom_padding=”0px||1%||false|false” global_colors_info=”{}”]

Step 10: Publish Product

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_3,2_3″ _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||3%||false|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}”][et_pb_column type=”1_3″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|1%|||false|false” global_colors_info=”{}”][et_pb_image src=”https://sbarnesdesigns.com/wp-content/uploads/2023/04/WC-New-Prod-Publish.jpg” alt=”Screenshot of the menu area to publish a product.” title_text=”WC-New-Prod-Publish” show_in_lightbox=”on” align=”center” admin_label=”pub prod” _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}”][/et_pb_image][/et_pb_column][et_pb_column type=”2_3″ _builder_version=”4.20.2″ _module_preset=”default” custom_padding=”|||3%|false|false” global_colors_info=”{}”][et_pb_text admin_label=”pub prod” _builder_version=”4.20.4″ _module_preset=”default” custom_margin=”0px||2%||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}”]

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. 

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.20.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.20.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.20.4″ _module_preset=”default” link_font=”|800|||on|||#0B9958|” link_text_color=”#0B9958″ global_colors_info=”{}”]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.19.4″ _module_preset=”default” text_font=”|300|on||||||” text_font_size=”17px” text_orientation=”center” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″ admin_label=”Affiliate Link Disclosure”]

*This post contains affiliate links. We may receive compensation if you sign up and/or purchase using the links*

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

Shawna's handwritten signature.
Leave a Reply

Your email address will not be published. Required fields are marked *

S. Barnes Designs, LLC is registered as a Service-Disabled Veteran-Owned Small Business (SDVOSB) through the Small Business Administration (SBA).
(Cage Code 9MAX2, NAICS 541512)

Site designed & maintained by S.Barnes Designs | © 2023 - Present. 

 

All Rights Reserved and Retained by S. Barnes Designs, LLC