Add a product to your website using WooCommerce

How to Set Up WooCommerce on your WordPress Website

Running a business is tough work. It is even more difficult when you decide to branch out with your brick and mortar business and start to sell your products online.

FEAR NOT!

This article will take you through the process to get WooCommerce, the most popular free e-commerce software, and install it on a WordPress website. We will even show you how to add a basic product on WooCommerce and display a category on a WordPress page.

Where to find WooCommerce

WooCommerce can be installed from the WooThemes website for free.

The reason we choose WooCommerce is because they have a larger support package and extensions (that are purchasable from their site) and are the biggest group out there.

Just like you would trust us as a major force with WordPress themes, WooCommerce is the dominant force that you would want to trust your company with for e-commerce.

How to Install WooCommerce on a WordPress website

Installing WooCommerce on WordPress is simple.

How to Install WooCommerce

You login to WordPress and from the back-end go to Plugins > Add New. From there, you can select the “Upload” tab and select the zipped file for WooCommerce that you downloaded from the WordPress repository.

If you are comfortable bringing in the plugin through your FTP, you can still use that method with the unzipped file on your server. Otherwise, stick with the above method of uploading the plugin.

A note about our WordPress themes

All of our e-commerce testing was done using our Epic Pro theme and our Modern Business Pro WordPress theme, which is designed cleanly to accept e-commerce plugins and work well with WooCommerce out of the box.

However, this plugin works well with all of our themes.

Not every theme is clean enough to easily manage WooCommerce. A note that WooCommerce will give you a notification saying that the theme is not designed for WooCommerce. You can hide that notice. WooCommerce has templates that they have specifically built or that are built specifically for this purpose from outside sources.

WooCommerce Settings Help

Once you have installed your plugin, you can tweak the settings from the WooCommerce > Settings section. This is the place to go to change your country, currency type and all sorts of information.

We recommend playing with the settings before you jump in to creating products.

There are lots of awesome things you can do with WooCommerce, like add your Google Analytics tracking code to track sales and set e-commerce goals!

Change Colors of Buttons in WooCommerce

From the general settings area, you can also change the color of the displayed buttons to make it fall more in line with your brand colors or pop out more on the website.

By default, buttons will be purple and the price will be green.

Change Colors of buttons woocommerce

Adding payment to WooCommerce

Once you have tweaked a lot of your settings, you can go to the settings tab for Payment Gateways and check and move around the payment gateways that you have.

As PayPal is the most commonly used, if you are using PayPal, you can drag the box to the top of the page and click on the button next to “PayPal” to make it the default payment gateway.

You can then click on the tab at the top that reads “PayPal” to edit your specific account settings.

How to Add a Product

Adding a product with WooCommerce can get complex (that is where we come in), but to get started, you can go to the Products section on the left sidebar of the WordPress back-end and add a product from there.

Once you are in the create a product page, you can go in and start entering the information.

The top text area is where you enter the name of the product, and the content area below is good for placing photos or other content to try and sell your product. The short snippet of text that goes with your product on other pages is to be entered further down the page.

Set the price of a product online

As you go further down the page, you will notice an area to enter more specific details about the product, like price and digital versus tangible good.

Then you can move on to setting a featured image for the product and creating or assigning a category…

Sort by Product Category with WooCommerce

Another great feature of WordPress is the ability to create product categories. If you are a clothing shop, for example, you could create products of the “shirt” category or “pants” or whatever it is that you sell.

On the page where you create a product, you can assign it or create a new category in the section titled “Product Category”.

This will allow you to easily sort items together both in the back-end of WordPress and on pages for customers to easily browse your products.

Display a Product Category on a Page with WooCommerce

Sometimes, you want a page to display products of a certain category. Let us say that you had just created a few of those widgets and want to display them, you can try typing this shortcode on one of your pages to display a list of products by the category of “widgets” for example.

So what you could do is create a “New Page” called Widgets in this case, and simply paste the shortcode in the text area. That’s it.

Display categories on a page with WooCommerce.

NOTE: Make sure that you either enter the shortcode in the “Text” area of the WordPress page edit section or that you go in there and make sure the “Pre” tag is removed if you are pasting the shortcodes over from the WooThemes website.

Once you have published the page, you can view it on the front end. It should display a list of all products in that category.

Example List of Shortcodes for WooCommerce

  • Display Certain Products – [products ids=”1, 2, 3, 4, 5″]
  • Add to Cart Button for a product – [add_to_cart id=”1″]
  • Display list of products by category – [product_category category=”category”]
  • Display Top Rated Products – [top_rated_products per_page=”12″]
  • Display Best Selling Products – [best_selling_products per_page=”12″]

Need Help getting e-Commerce on your Website?

We specialize in getting your product selling on a website. You can check out our themes here. If you need additional help with the install or consulting on how to sell your brand, product, or service online, you can check out our month by month EmbraceWP service as well.

Take a demo of our Modern Business theme page, which features an e-commerce demo of Modern Business functioning with WooCommerce.

Additionally, here is a video to get you started as well.

4 thoughts on “How to Set Up WooCommerce on your WordPress Website”

  1. Hmm it looks like your blog ate my first comment (it was super long) so I guess I’ll just sum it
    up what I had written and say, I’m thoroughly enjoying your blog.
    I too am an aspiring blog blogger but I’m still new
    to the whole thing. Do you have any points for novice blog
    writers? I’d really appreciate it.

  2. Hi! thanks for this nice article….i was wondering about the concept of “Best Selling Products” woocommerce using….can you plz explain, how woocommerce plugin display a product as best seller. do i have to make any settings in admin panel…

    Plz let me know via mail ([email protected])

    thanks in advance… 🙂

  3. I wish to have the products display in subcategory order rather than just a random order
    Currently I have input a display list of products by category – [product_category category=”annie-sloan”]

    How would I modify this short code to display subcategories as well in order so that all product categories are kept together? Thanks in advance

    John

Leave a Comment

Your email address will not be published.