Add WooCommerce Plugin to Any WordPress.org Theme

Now anyone can easily create a free, fully functional and ecommerce site in WordPress by adAdd WooCommerce Plugin to Any WordPress.org Themeding WooCommerce plugin to any WordPress.org website.

Whether you’re trying to sell just four digital downloads or 400 different t-shirts, WooCommerce has you covered. The free plugin includes most of the functionality stores will need, but WooCommerce also has a set of premium modules that will provide extra capability for more unusual needs.

This tutorial will walk you through adding the WooCommerce plugin to any WordPress theme and show you how to set-up the required fields to get your eCommerce site ready to start making money. Throughout this tutorial, you will see screenshots of the process of building an example ecommerce site  using the default theme, Twenty-Twelve, as the base theme.Add WooCommerce Plugin to Any WordPress.org Theme

Jump to The Different Steps of This Tutorial

  1. Download & Install the WooCommerce Plugin to your WordPress Site
  2. Install WooCommerce Pages
  3. Setting Up The WooCommerce General Settings
  4. Add Products to the WooCommerce Store
  5. Displaying the Products on Your Site
  6. Setting Up Variable Products in WooCommerce (Ex. Shirts w/ different Colors & Sizes)
  7. Shipping & Payment Gateways

1. After setting up your theme, Download & Install the WooCommerce Plugin to your WordPress Site

1A) Navigate to Plugins>Add New. Type “WooCommerce” into the search bar on that page and click “Search Plugins”.

1B) The first result should be “WooCommerce – excelling eCommerce”. Click “Install Now” and activate the plugin after it installs.
Add WooCommerce Plugin to Any WordPress.org Theme

2. Install WooCommerce Pages


Add WooCommerce Plugin to Any WordPress.org Theme
Add WooCommerce Plugin to Any WordPress.org Theme2A) WooCommerce is Easy! They have an option to automatically create all the necessary pages to get your store off the ground. Once you’ve installed WooCommerce, you should see a purple bar at the top of your dashboard with a button that reads “Install WooCommerce Pages“–click that button.
2B} Clicking “Install WooCommerce Pages” creates 11 pages for you: Cart, Checkout, Checkout-Pay, Order Received, My Account, Change Password, Edit My Address, Logout, Lost Password, View Order, and Shop. You may want to add some of these pages (most importantly Shop and Cart) to your main navigation menu in Appearance>Menus. All of these pages are already set up and require no extra modification, but you can edit them if you’d like by clicking “edit” by any one of these pages.

3. Setting up the WooCommerce General Settings.


3A) When you installed WooCommerce a new tab was created in the left navigation bar in your dashboard. Select WooCommerce>Settings. You’ll see a tab bar with different pages of options up at the top of the settings page. For now we will just be dealing with the “General” settings, we will get to the other necessary settings such as shipping and payment later in this tutorial.

3B) Set the appropriate settings here for your Base Location, Currency, and Allowed Countries (countries you will ship to).

3C) Make sure to turn on “Enable site-wide store notice text”. This will put a banner at the top of your site saying that the store isn’t set up completely, so no one accidentally orders from your site before you’re done setting it up. You can change what the exact notice reads. An Example of this bar is in the picture below.Add WooCommerce Plugin to Any WordPress.org Theme

3D) Read through the rest of the options and set them as you wish. If you are trying to make the checkout process easier, I recommend checking the box for “Enable guest checkout (no account required)”. This will make it so someone doesn’t have to sign up for an account during the checkout process. This also usually makes the store maintenance and site easier to keep up with because you don’t have to manage people’s user accounts or have all the account pages cluttering your menu.

3E) Below is a picture of the options  on the”General Settings” page that I would recommend for a simple eCommerce site.

Add WooCommerce Plugin to Any WordPress.org Theme

4. Add Products to WooCommerce Store


4A) When you installed WooCommerce a custom post type was created for your site called “Products”. A tab in the main dashboard menu was created for these products and you can add them in a similar fashion to how you add a post. Go to Products>Add New.

4B) Title your product, add your product description into the normal content area, and add a featured image by clicking “Set featured image” towards bottom of the right sidebar options. Select or Drag an image from your desktop into the add media window, and click “set featured image”. WooCommerce displays all of the featured images as squares so it’s a good idea to make the product image square before you upload it. To have the images display crisply, the uploaded product images should be 300×300 pixel squares.

4C) If you plan to differentiate product types, categorize your product on the right of page by either clicking “+ Add New Product Category”, type the category name, and select “”Add New Product Category.” Or if you’ve already added categories, simply check the box/es of the categories the product is in(Ex. of Categories: T-Shirts, Shoes, Hoodies, Accessories etc.).

4D) Give this product a price by entering a number in the “” field in the Product Detail area directly underneath the main content area. Below is an image showing the different areas of the edit product page with the content I have entered.Add WooCommerce Plugin to Any WordPress.org Theme

4E. 4B-4D are the absolutely necessary things to add for each product. Depending on the product and the options you wish to set up for it, there are plenty of other things you could set up for each product. Repeat steps 4A-4D at least 4 of your products. We will go over some additional product options later in the tutorial after we set up these initial products to display on your website.

5. Displaying the Products on your Site


If you’re using a theme that is built to be used with WooCommerce there may be different sections already set up that display the products nicely.  You can also display these images as a shop page, using project shortcodes, or using widgets.

5A) The Shop Page: You can view the products you’ve already added to your site by viewing the “Shop” page that was automatically created when you installed the WooCommerce pages. You can click on any of the product images on the “Shop” page and it will take you to that product’s individual page, or click “Add to cart” to see how the cart works (and that it already (almost) works without any fuss). Below is my shop page after following step 4’s instructions to add four products. “Select options” under the “It’s Never Too Late” is the button that will show for variable products which will be explained in step 6 of this tutorial.Add WooCommerce Plugin to Any WordPress.org Theme

5B) Product ShortCodes: WooCommerce has built-in shortcodes that you can add to any widget, post, or page. There are shortcodes to display featured products, recent products, products by category and you can also select how many products you want to display with each shortcode. An example of the “recent products” shortcode, with a 4 product maximum display, can be found on the home page of the example site created for this tutorial. Here is the “recent products” shortcode that was used[recent_products per_page="4" columns="4" orderby="date" order="desc"].

5C) WooCommerce Product Widgets: There are a handful of WooCommerce Product widgets that are automatically added as “available widgets” when you install WooCommerce. You can add these widgets to any of the widget areas. You may want to add the WooCommerce Cart widget to your main sidebar to have a convenient way for people to view their cart. Play around with adding these different widgets to your sidebar and see what you think would be helpful to have on your site. Add WooCommerce Plugin to Any WordPress.org Theme

6. Setting Up Variable Products in WooCommerce (Ex. Shirts with mult. colors and sizes).


Variable products are products that have different attributes such as sizes or colors that the buyer can select from. If you are not selling variable products, you can skip this step.

6A) First you will add some attributes that you can assign to your products. Attributes would be things like Color and Size for T-shirts, Dimensions if your selling art prints, or Format if your selling music in both CD and digital download formats. Navigate to the Product Attributes page by click on Products>Attributes in the main WordPress dashboard menu. Create your Attributes by filling out the “Add New Attribute” page options and selecting to “Add Attribute” (pictured below).Add WooCommerce Plugin to Any WordPress.org Theme

6B) Create or navigate to a product that is a Variable Product. In the “Product Data” section, at the top, switch “Simple product” to “Variable Product.”

6C) Navigate to “Attributes” in the product data section.

6D)  Add the product attribute/s that relate to the product you’re editing.

6E) Add the different attribute values. For example the values you fill out for color might look like this: Black | Blue | Green | White. Sometimes, instead of typing in the values, you can click the value field and select from a drop down . Either way you add the values, the end result is the same.

6F) Check “Used for Variations.” Checking “Visible on the product page” will display the product attribute values on the product page. Repeat steps 6B-6E for each attribute that relates to the product you’re editing.

6G) Save the Product. You need to do this step in order for the values you filled out in the previous step to show up.

Add WooCommerce Plugin to Any WordPress.org Theme6H) When you are finished adding values to your product attributes, navigate to the “Variations” tab in the Product Data section.

6I) Add any variation that will have a unique property such as different image, different price, unique stock (if you’re managing product’s stock) etc. You have to fill out the price for each variation even if it is the same as the parent product. You can add an image to a variation by clicking the (+) sign in the box on the left. Select the best looking variation down at the bottom for the default image. When finished, click the “Save attributes” button.Add WooCommerce Plugin to Any WordPress.org Theme

6J) If you have a product with variations that have unique images, you may want to add a “Product Gallery” to the product page so people can see all the variations without moving through the drop down selector. On the product edit page, on the left hand side, you’ll see “Product Gallery”. Click “Add product gallery images” and add all the product variation images. Save the Product and take a look at the product page. Take a look at the results on the product page on the example site or the image below.
Add WooCommerce Plugin to Any WordPress.org Theme

7. Shipping, Payment Gateways, & Other Setting Necessitates


7A) Shipping costs can be set up by using product shipping classes so you can charge different shipping for different product groups. If you have products that will ship at different rates, go to Products>Shipping Classes and set up your various classes. Then go to WooCommerce>Settings>Shipping>Flat Rate, turn on flat rate shipping, and you can add additional costs to any product groups that may be more expensive to ship. There are other WooCommerce add-on plugins that allow more in-depth shipping options should you want to ship around the world and with varying shipping options. To set up a complex table to specify shipping per City, State, Country, or area, you can download the Table Rate Shipping plugin. Or, there is also a FedEx Shipping Method plugin if you’d like to ship through FedEx and offer a similarly complex shipping table.

7B) Payment Gateways can be set up by going to WooCommerce>Settings>PaymentGateways. There are plenty of options available: Direct Bank Transfer, Check Payment, Cash On Delivery, Credit Cards, and PayPal. For easy set-up and transaction handling, I recommend setting up PayPal as your sole payment gateway. Through the PayPal payment gateway, customers can choose to pay with their PayPay account or, if they don’t have one, can pay with a credit card. This means you can set up the credit card gateway through Mijireh Checkout but it is unnecessary if you already have the PayPal gateway set-up (which is much easier to setup).

About Michael Earley

Michael lives in Atlanta, loves music and Intown living. At New Tricks he does graphic design and WordPress. He is a fantastic speaker and very patient trainer. Plus, he's a helluva nice guy.

Comments

  1. shipping rate . This is your international shipping rate .Freight transport is a physical process of transporting goods and real goods and cargo. Ships term originally referred to transportation by sea

  2. MartinE says:

    Thanks Michael, this is a great tut, there's so little out there for people new to Woocommerce. Can I get you to clarify how to use the shop page, should it double as the home page? Or is it best to have a normal page as the home page with the shortcode for the products you wish to display? I couldn't work out how to modify the shop page? Cheers

  3. djtamuli1 says:

    Thanks Michael for your nice post.
    I am looking for guidance for my site. I am not a pro.
    Is there any plugin I can use to show drop down list of currency along with every product. Like in your demo T shirt $20. I would like to get a drop down list in USD, EURO, GBP, etc.
    I am trying to build a site with affiliate links in a shop format. When buyer will click, "Buy" it will take to the affiliate sites.
    I want to include both Amazon UK, Amazon.com and other affiliate products, but having issue with currency change.
    Any tips will be appreciated.
    Regards,
    Dhruba

  4. R Garland says:

    Micheal:

    Let me tell you, I've learned more about Woo Ecommerce from this page than any support or Woo ecommerce site.

    Thanks so much, great stuff!
    R. Garland

  5. Thanks Michael,

    If you please say where ill add short code it will great for me.

  6. Thank for good tutorial

  7. Michael,
    Killer tutorial!

    To Martin: The shop page is up to you how you want to display. most clients I have tend to have their main homepage with featured items, top sellers, some articles, etc.
    My recent post Tips to Protect Yourself from Scamming, Sleazy Cold Calling Sales Agents.

  8. Great guide. Thank you!
    My recent post Vår nya showreel är färdig!

  9. Michael:
    Very good and helpful tutorial. Thanks for this. My question follows:
    1. I have already installed a WP site and my custom theme. How do I add the woocommerce plugin that uses my existing theme without too much coding or buying another wootheme?
    2. Can you please share the woocomm theme and WP theme that you shared here on this tut.?
    3. I want to keep my WP primary on my main site like it is now. However I want to display the featured products from Woocomm to my site somewhere on the bottom as a slider or a section. How to do this?
    Again thanks for the info.

    • Max, To Add Woo themes to a theme you just go to your site to Plugins, Add New and add the Woo Commerce plugin, which is free. You may need to buy some of the paid extensions if you need Authorize.net or a Shipping schedule from Fed Ex or such. You then need to go to Woo and purchase them and then upload them to your site and configure.

  10. Kristen Feighery says:

    Hi Michael. Thanks for the awesome tutorial. Quick question…..on my shop page, it has ‘shop’ above my products and ‘showing all results’ almost on top of it. I can’t figure out how to get rid of one of them so it doesn’t looks so sloppy. And at the bottom of the page, all my pages are listed which makes the shop page super long and not so professional looking! Is there a way to change that? Thanks so much!

  11. Tamika Hall says:

    Thank you so very much for writing this tutorial! I was at a loss until I typed in my question in google and your article popped up!! I have subscribed to your newsletter :-)

  12. Thanks, very useful information indeed!

Add Comment Register



Speak Your Mind

*

Sign up for the Free Video Training Series, Getting Started wIth WordPress
Join Us!