WordPress eCommerce with WooCommerce
Today we will build an ecommerce store for a hypothetical tee-shirt company with WordPress eCommerce. And, we will be using WordPress and the free Woothemes theme called “Wootique” for WooCommerce. For those of you that are not familiar with WooCommerce, it is a plugin for WordPress that transforms a traditional website into an ecommerce store. It is easy to use, free, and the plugin integrates nicely into WordPress. WordPress eCommerce is collectively a very thorough eCommerce platform that is easy-to-use and because its built on the WordPress platform, your WordPress website can utilize a beautiful theme and the outcome is beautiful, professional and easily managed.
WooCommerce includes payment gateway extensions so you can accept PayPal or credit cards. The plugin includes a shipping module so you can offer free shipping or flat rate shipping. WooCommerce provides the capability to easily manage your digital inventory or physical products. With WooCommerce, you can even delegate the task of inventory management to a manager in your organization. WordPress eCommerce with WooCommerce makes tax classes and local rates easy. The marketing and reporting capabilities in WooCommerce are streamlined and efficient.
Now let’s get started building our store…
What will the store look like?
At the top of the page you will have your logo, then below that you will have your menu, and below that you will have a nicely organized product slider. As you hover over a product image, two calls-to-action will open: you can click on the title of the product which will take the visitor to the product detail page or the visitor can click “Add to Cart” to add the shirt to their shopping cart. Below the products slider, you will have a “recent products” area with the same two call-to-action links. On this design, there are few distractions. The viewers’ eyes will be on the products and the calls-to-action. There are few distractions and that is how you want an ecommerce website to be. Minimalist themes are good for ecommerce sites because, after all, you want to sell product. Distractions are not part of your business strategy.
On the right hand side of the page, there is a side bar of which will contain your custom content. The “search for products” widget will be on the top followed by the “top rated products” and then the “on sale now” area. Below these, there is an area for social media buttons so that your visitors can keep in contact with you.
The product page contains the title, price and a short description of the product. You can create different prices for the same product. This is useful if you have frequent buyers and you wish to offer them a discount. Price variations might also exist for different sizes or different colors, for example. If you click on the image, a pop-up image will open in a light-box. The product gallery on your product page is very useful for ecommerce shops.
Below the introduction area for each product, you will have 3 tabs:
- a descriptions tab
- an “additional information” tab
- a “review” tab.
Cross-sales or up-sales can be setup for your products with this theme. This is very useful to encourage multiple purchases.
Internal pages include an “About” page, a “Blog” section, a “Contact” page with a call-to-action which provides a form so people can contact you directly through your website. Keeping your blog updated is a great idea because search engines love fresh content. Adding fresh, unique content to your blog is a great way to increase traffic without spending a fortune on advertising. Image galleries in your blog posts are a great way to not only increase traffic to your website, but to also drive traffic from the blog posts to your shop.
The Checkout Process
When a visitor adds a product to their shopping cart, they can easily click the “View Cart” option or go directly to the checkout. The “View Cart” button shows a summary at the top with the number of items in the cart and the amount of the items in the cart. The “View Cart” page also contains a thumbnail, the price and quantity. The “cart totals” show a sub-total, shipping, and the “order total”. You can also setup coupons for your customers to use and they will click “apply coupon” and at that point the visitor will see the discount and the new title. It is a great feature of this design.
When the visitor clicks “Proceed to Checkout” they will see the “Order Summary” with the product, shipping, the order discount and the order total. This theme uses PayPal. So, the customer can pay with PayPal or with their credit card (if they do not have a PayPal account). In this situation, the customer will be paying as a “guest”. This makes it easy for the customer and the payment methods are streamlined.
How much will this website cost?
You will need a domain name and web hosting. You can use a coupon for the web hosting to save on that too. GreenHostIt offers a 20% discount with coupon code “summersale”. To design this ecommerce website, you need to set aside about two hours.
Steps to WordPress eCommerce with WooCommerce:
- Get a domain and web hosting
- Install WordPress
- Build the website
Get Web Hosting and a Domain
Most likely a small business owner can choose the small hosting package for a start-up. If you already have a domain, you can use it. You can either transfer it to our service or just edit the name servers so that your domain points to your new web hosting account.
Install WordPress eCommerce with WooCommerce
After you setup your web hosting and register your domain, you will need to install WordPress. Login to your cPanel control panel and scroll down to “Software/Services” section and click the “WordPress” icon to install. Now that you have WordPress installed, you will see the bare-bones WordPress site that is setup by default. Let’s get started building out this theme.
Login to your WordPress dashboard and change the theme of the website. Click “Appearance” then you will see you are in the “Manage Themes” screen. To install the new theme, go to Woothemes.com, and in the top navigation click “themes”. You will see that there are a lot of premium themes, but we are going to select the free theme called “Wootique”.
Wootique, Woothemes and WooDojo.. what?
After you have downloaded Wootique theme, you need to return to your WordPress dashboard and install it. We like to save to the desktop so that downloads are easier to find. In your WordPress dashboard, look for a tab at the top that says “Install Themes”. Upload your theme by clicking “Upload”. Choose your file from your desktop and upload it. Once the file has been chosen click “Install Now”. The next step is to activate it. Once you have activated it, you will see a new window opens with many Woothemes options. This is where you will see the many add-ons for Woothemes. The one that is needed for this exercise is WooDojo. Download WooDojo and install the plugin. Another add-on plugin that you might want to consider is “SEO by Yoast”. WooDojo is from Woothemes, which is good because we will be using a theme and features plugin made by the same company — Woothemes.
In your WordPress dashboard, select the “WooDojo” link on the left. Choose “WooCommerce” from the tool kit. Select the “WooCommerce ecommerce” plugin. Download and activate it. From there click “Install WooCommerce Pages”. This is a very important step because the demo pages and content will be installed for you by clicking this button. It will save you a lot of time! The sample pages and the right tool bar will be installed for you.
Finish Building your Website
The “General Settings” of the Wootique theme from WooCommerce is where you will start. This is the tab that will begin your setup for your new store. To build out your store you will need to go through the various tabs within Wootique.
Go to the “Wootique” -> “Theme Options” screen. On this page you will see all the options to setup your theme.
These options include the following:
- General Settings
- Homepage Settings
- Styling Options
- Layout Options
- Dynamic Images
- Footer Customization
- Subscribe & Connect
General Settings of WordPress eCommerce
These theme options are important for the overall design and layout of your store. You will want to go through all of these options and complete customize your site. The screen is very self-explanatory.
Theme options is a good screen in which to spend some time. This is where you define the inner parts of your ecommerce store. Once your general options have been updated, in the Homepage settings, we recommend that you not display your blog post on the home page because you want people to see the featured products and sale products only. Turn off this option in the dashboard -> Wootique -> Theme Settings -> Homepage settings. Un-check the box that says “Display your latest post on the home page”. Again, by un-checking this box you will put the focus on your products. In the “Homepage featured products” we like to select “Slider” and in the entries, enter 8. This shows your featured products in a nice slider and by displaying only 8, your home page does not become crowded.
Add Products to WordPress eCommerce
Add products by clicking “Products” under “WooCommerce” on the left of your dashboard. After you have added your products, keep in mind that you will need to assign at least eight of these products as “Featured”. In the products section, you can get as detailed as you like or as vague as you like. You can specify inventory, shipping class such as weight and dimensions. “Linked products” is where you specify if you want to cross sell or up sale products. You will want to come back to this area later (after you have added your products). In the “Attributes” section you will need to add colors. Check the box to display the variable on the product page. This is where you specify which products are offered in which size and which color, for example. Save your attributes.
Different prices for different sizes
If you want to setup different prices for different sizes, for example, this can be done in the “Product Data” -> “Variations” section. Click on the size and within this screen, you can select to setup a price for small size or medium, for example. A product that has many sizes is called a “Variable Product”.
Add to Cart button on Product Page
It is really important that when you have an ecommerce site is to have an “Add to Cart” button visible on the product description page. The “Add to Cart” button is a “call to action”. Make sure that on every product page the “Add to Cart” button is always visible when the visitor arrives on the product detail page. To make sure that the “Add to Cart” button is always displayed on your product pages, edit each product, scroll down to the product data screen, click on “Variations”. In the drop down list for “Default Selections”, always set a default size or default variation. Then click “Update”. Now the product page will display the default size and the “Add to Cart” button is visible on each product page. This is a great way to make it easy for your visitors to buy your product.
Add images to Product Gallery
It is important to add images for all your products. Be sure to add a title and alternate text for your images because this will help your search engine optimization (SEO) efforts in search engines. In your product gallery, click “Upload Files”. Here you can choose files from your local computer and upload them to display in your product gallery.
Featured Product Slider
On the home page, as you recall, we set it up so that the product slider would display front and center. Go to the dashboard, then click on “Products” under “WooCommerce”. Click “Quick Edit” and then tick the box that says “Featured”. This will make the product appear on the “Featured Product Slider”. Remember, we need 8 total because that is what we setup earlier. After you make these changes, you will see that 8 products display on the “Featured Products Slider”.
Note: to be sure blurry images do not show up in the “Featured Product Slider”, follow these 3 steps.
3 Steps to Fixing the “blurry images” Problem:
1. Add a plugin called “Regenerate Thumbnails”. Click “Plugins” and search. You will see it comes right up in the Plugin search tool. Click “Install Now”. Next, activate it by clicking “Activate Plugin”.
2. Hover over “WooCommerce” -> “Settings”. Click the “Catalog” tab. On the options screen, scroll down to the bottom to where it says “Product Thumbnails”. Select 550. Add 550 to the width and the height, and save the settings. We have tested this and 550 seems to be the best dimension for removing that “blurry” look.
3. Click on “Media” and re-generate all the thumbnails. Select all boxes, choose “Bulk Actions” and select “Regenerate Thumbnails”. Click “Apply” to generate the new thumbnails in the new sizes. Now, you will notice when you refresh on the home page that all the images on the home page in the “Featured Product Slider” look crystal clear.
Internal Pages: About and Contact
Add two pages to the website. Click on “Dashboard” > “Pages” and click “Add New”. Give the page a title such as “About”. Add an image to make this page look interesting. To add an image click “Add Media” then “Upload a File” from your local computer, “Open” it. Assign a title and select alignment. We like to use left aligned with “link to” set to “none”. We also choose the thumbnail size as “medium”. Click “Insert into Page”. Next we are going to create a “Contact” page. Follow the same steps as we did for the “About” page. Select “Contact Form” under “Template” then click “Publish”. This will automatically create a really nice contact form. When someone submits a message directly via your website, it will e-mail to the email address you have listed in your settings.
Create a Button for the About Page
Click “Insert Woothemes Short Code” > “Button” to create a short code for that. A window will open with many options for you to create your button. The link can be your “Contact” page. You can add different colors if you like. Scroll to the top and click “Insert”. The button will be inside your WordPress page with the short code that you specified. Be sure to save your work by clicking “Update” in the “Edit Page” screen.
Create a Main Menu
On your main menu, you will most likely have a lot of sample content and some of the items in the menu are not necessary. To clean up your menu, just make it more simplified. So, to create a new menu click “Appearance” > “Menus”. Enter a menu name, then click “Create Menu” button on the right. Under “Theme Locations” > “Primary Menu” drop down and select the menu that you just created. Next, click “Save”. Scroll down the page and select which items you would like to be displayed in your new menu. To do this, tick the box next to the page that you wish to include. On the right hand side of the page, you can re-arrange the pages to suit the order that you like. Click “Save Menu”.
In your WordPress dashboard, hover over “Products” > “Shipping Classes”. Here you will create a new shipping class. Shipping classes are used to group products of a similar type, and these groups can then be used by certain shipping methods to provide different rates to different products. Ordinarily, you will want to create two shipping classes. One is “Free” and one is “Standard” shipping class. Add those and click “Add New Shipping Class”. Next hover over “WooCommerce” > “Settings”. Click the “Shipping” tab. On this page you will see all the options to setup the shipping. By default, flat-rate shipping is enabled. Scroll down and you will see that the “Shipping Methods” is set to “Flat Rate”. If you can offer free shipping, that is best to build incentive and increase sales. Note, if you are going to offer a “Flat Rate” shipping, you can disable the “Shipping Calculator” so that it does not display. Then click “Save Changes”. Click “Flat Rate” in the “Shipping Options” screen. Enable it by clicking the box that says “Enable this Shipping Method”. With “Flat Rate” shipping, you can add a “Per Order” fee. You can also add “Shipping Classes” so you can activate your “Free” shipping class that you created in the previous step. You can test your new shipping rates by editing a product. You should see (on the right) a shipping class that you can activate for a specific product. Or you can select many products in bulk, then go to the top and click “Bulk Actions” > “Edit”. Next, click “Apply” to activate this shipping for all the products at once. Click “Visit Site” to see what your website looks like now. You should be able to select a product, a size, and a color. You should be able to “View Cart” or go directly to the checkout. You want to ensure that just one shipping rate is displayed. So, this is what you want to check when you view your site. Pretend that you are a customer purchasing a product and go through the checkout steps to test your design work.
Payment Gateways and Analytics
In “WooCommerce” > “Settings” > “Payment Gateways” you can enable PayPal. Disable the options that you do not want to use. When you click on PayPal, you will need to add your PayPal e-mail address to enable this so customers can pay for products using PayPal. Anyone who wants to buy something can either sign into their PayPal account or pay via credit card if they do not have a PayPal account. Be sure to disable “Enable PayPal Sandbox” because this is used for testing. Click the “Emails” tab and be sure that you have the accurate e-mail addresses entered so that you will get notification of orders. Click on “Integration” and add your Google Analytics ID so you can track people through your website and track their steps to checkout. Visit your website and go to your cart to be sure that all the settings that you have enabled are accurate. Test. Test. Test.
Add Posts to your Blog
Be sure to add new content to your blog on a consistent basis. Remember, search engines like fresh, unique content and, because you are a start up, you will want to take advantage of methods of which you can utilize to increase traffic without spending a lot of money on advertising. Content is the great equalizer on the Internet. Small business owners can build traffic to a website just like the big companies do with their paid advertising. It may take a little more time with content marketing than it does with pay-per-click, but it is a lot less taxing on the budget.
There you go. That is how you add all the different features to the Wootique theme using Woothemes and WordPress. By following these steps you can setup a WordPress eCommerce website using the Wootique free theme.