Add WooCommerce Plugin to Any WordPress.org Theme
Now anyone can easily create a free, fully functional and ecommerce site in WordPress by ad
ding WooCommerce plugin to any WordPress.org website.
ding 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.
Jump to The Different Steps of This Tutorial
- Download & Install the WooCommerce Plugin to your WordPress Site
- Install WooCommerce Pages
- Setting Up The WooCommerce General Settings
- Add Products to the WooCommerce Store
- Displaying the Products on Your Site
- Setting Up Variable Products in WooCommerce (Ex. Shirts w/ different Colors & Sizes)
- 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.
2. Install WooCommerce Pages
2A) 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.
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.
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.
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.
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.
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).
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.
6H) 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.
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.
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).
No comments:
Post a Comment