Ecommerce design with WordPress and WooCommerce
Easily Build an E-commerce Website with your Web Hosting Account, WordPress and WooCommerce. This article will explain step-by-step how to build an commerce website using the WooCommerce plug-in, WooStore and your Web Hosting account.
WordPress and WooCommerce
We are going to build a T-shirt website from start to finish. This article will explain how to build a professional, fully functional website with WooCommerce, WordPress and a web hosting account. Now, although WooCommerce is called a plug-in, it is more like an e-commerce engine. WooCommerce is a free plug-in and it comes with free themes, but we are going to use a Premium theme called WooStore because it results in a more professional looking and functioning store. It works for physical products, digital products and you can even use it to sell other company‘s products as an affiliate.
Step 1 – Install the WooCommerce plug in.
Click “plug-ins” and click “add new”. Search for WooCommerce and click install, then activate it. When you activate it, you will be asked if you want to automatically want to create your WooCommerce pages right away. Click yes, because then it will automatically create the shopping cart, check out, the account pages, and more. This is a real time saver!
After you activate WooCommerce, you will see it on the left-hand section of the WordPress dashboard. You will see a link for “products” which are completely separate from blog posts which is great because then you can have a blog and keep the products and product categories separate. You will several links on the left in the WooCommerce section that gives you the ability to create products, add products, tags, shipping classes and attributes for each product. There is a great deal of functionality with WordPress and the WooCommerce plug-in.
Step 2 – Install the WooStore theme.
- For this demonstration, we are going to use the WooStore theme. It has featured image sliders, featured products and works well for any style products that you plan on selling online on your website. No matter what WordPress theme you choose, as long as it is a WooCommerce built theme, they will all pretty much work the same and build a fully functional and professional e-commerce website.
- To install the WordPress theme, you can upload it through the WordPress admin dashboard by clicking “install themes” then “upload”. From there you can browse to find a theme or you can use FTP with Filezilla (free download) or whatever FTP client you use. Now if you go to “Appearance” and then click “themes” you will see the theme that you just installed. Click “activate” to publish your new theme on your WordPress website.
- After you have activated your theme, you will see a new category of settings on the left-hand side of your WordPress dashboard: WooCommerce, WooProducts and WooStore.
- The next step is to customize the WooStore theme and setup your products and categories plus setup a payment gateway with PayPal.
Step 3 – Setup the WooCommerce settings.
- Go to WooCommerce and click on “settings”. Start with the general options, and choose the base country/region to choose your geographic area and your currency. choose countries that you want to allow people to purchase your products from. Most people choose their own country. Here in America, many companies choose the United States for their specific countries field because the merchant does not want to pay for International Shipping. It depends on your specific business model, but it is important to know that you can customize your store and specify which countries to which you wish to sell.
- Scroll down to the “Checkout and Accounts” section. Most of these settings can be left as the default. You can change these settings later after your store is up and running and then you can fine-tune and tweak these settings.
- Scroll down to the “Styles and Scripts”. This is where you can customize the look and feel of your store and the check out pages.
- Scroll down to the “Digital Downloads” section. This area is for people that want to sell downloadable products like images or news. This is where you can setup the actions that are performed after your consumers complete their purchase. In this case, we are selling T-shirts so we do not need to focus on digital downloads. In summary, your first pass-through of this section is mainly where you setup your country, state and currency.
- Next click on the “Catalogs” tab at the top. This is where you setup your product catalogs. You can manage how your product catalog is setup. The default product sorting is alphabetically or by price. Most of these settings can be left as the default and then after your store is up and running, you can fine tune these settings. Always inspect the “redirects” section because this is something that you will need to decide which option works best for you and your store. We we recommend you check the first box “redirect to cart after adding product to the cart” because we feel it helps increase conversions. for example, if one of your customers adds a T-shirt to their cart, they will automatically be re-directed to the shopping cart so it is easy for them to check out. Most of these details, however, are dependent on your business model and personal preference.
- The “Product Data” section is where you can enable as much information about the products as you want such as SKU, weight, dimensions. Weight and dimensions is for shipping and it can get as complicated or as easy as you require, which is dependent on your product model and your products that you are selling. In this scenario we do not enable weight or dimensions because we are selling T-shirts
- The “Pricing Options” is where you can specify how pricing is going to display on the website.
- The “Image Options” section is where you will specify how your catalog images will display such as the size and how you want to crop them. We recommend you leave these as the default for now and after your store is up and running you can fine-tune these settings. Next, click “Save Settings”.
- The “Pages” tab at the top is the next section we need to address. We recommend you leave as the default. The “Shop Pages” are pages that were automatically created when you activated the WooCommerce plug-in and it asked you if you wanted to create the shop pages right away. As you recall, we recommended that you accept that option to automatically create these pages so you should have Cart Page, Checkout Page, Pay Page, Thanks Page, My Account Page, Edit Address Page, View Order Page, and Change Password Page in this section. These pages need to be here for the WooCommerce platform to work correctly.
- The next tab is the “Inventory” tab. This is where you can choose to manage inventory stock. If you want to keep track of inventory, enable the “manage stock” option so that you will get an e-mail from the system when your inventory gets low. This will notify you when your low so that you will know to order more product or take that product off of your website. The rest of the options we recommend you keep at the default settings.
- The “Tax” tab is where you setup your specific tax options such as “tax calculations”, “catalog prices”, “additional tax classes” such as reduced rate or zero rate. Taxes are completely different depends on which state you live in so be sure to do your research to find out more about the sales taxes that you are required to charge and pay the state. Be sure to check with your tax accountant for the specific settings on this tab because these settings are very important that you setup correctly dependent on where you live.
- The “Shipping” tab also depends on what you are selling and your business model. You can setup whatever shipping you need that are custom to your business. Some companies that sell T-shirts or other clothing choose a “flat rate” shipping charge and then if the customer spends above $50, the shipping can be free. Again, shipping and taxes are completely unique to your business model. But just know whatever you need to setup can be customized in the shipping and tax tab.
- The “Payment Gateways” tab is where you can enable your payment gateway such as Authorize.net or PayPal. Many stores use PayPal because it is easy and free and you do not need to go through the process of getting a payment gateway, merchant account and setting up a SSL certificate. To use PayPal, click the PayPal tab, enter your PayPal e-mail address, and you are setup and ready to take orders through PayPal. It is very easy to use PayPal but many merchants prefer to have more control over their store by getting a payment gateway such as Authorize.net and their own merchant account. In that case, the customer can pay directly with Visa, MasterCard, Discover or American Express. WooCommerce has the option to setup many different payment gateways and the choice is yours and dependent on what works better for your business model and your store. There are extensions that you can purchase from WooCommerce for any payment gateway extension that you might need.
- The “Emails” tab is where you setup your notification emails that come to the store owner, plus you can also customize the e-mail template that goes out to customers. This section is very specific to your business so we will not go into details. Again, this is something that you will need to decide what works best for you and your business model.
- The “Integration” tab is where you can enter your Google Analytics ID and a “Share your Cart” account so that customers can share what they have purchased with their friends. It is a social media type campaign which allows your satisfied customers to talk with their friends about the products that they have purchased. These are the more important items that you will need to get started with your store and then after your commerce website is setup you can tweak your settings.
- WooCommerce has a “Reports” section which provides reports on sales, customers, stock, and more. The reports detail items such as total sales, total orders, average order total, customers, discounts used, and more. You can really see a lot of information that can be sorted by sales by day, month, product sales, top sellers, and top earners. If you click on “orders” you can see the details of each order, the customers, you can setup coupons which is great for marketing. You can then market your store on coupon sites such as retailmenot.com and others that are free ways to drive traffic to your site.
Step 4 – Setup the WooStore theme settings.
WooCommerce is the engine that drives the e-commerce store, and WooStore is the engine that allows you to upload a custom header, a favicon and customize the look and feel of your store.
- Login to your WordPress admin and click “WooStore” then “Theme Options”. The Quick Start section includes the “Theme Stylesheet” which is a real time saver to choose a color scheme that is professional and fast to setup. Then you can upload a custom logo in the same location. Fivver.com is a great place to get logos created for a good price. To upload your image, browse and find the image on your local PC then upload it. In the same location you can upload a favicon.ico. Then underneath there is a “Tracking Code” section where you can add your google Analytics code.
- Next go to “Subscription Settings” you can add an RSS URL for feed burner, E-mail subscription URL if you use Mail Chimp, your Contact form E-mail to enter your e-mail address so it will automatically send you an e-mail anytime someone completes the e-mail form on your website.
- “Display Options” is where you can customize the CSS (cascading style sheet) but at this point in time, we recommend you use a standard “theme stylesheet” in order to save time. In this section, however, we do recommend that you select “display bread crumbs” so that your visitors can easily determine where they are on your website at any time. Everything else you can leave just as the default.
- So now we have done the “general settings”, “styling options” and now we are going to work on the “background”. For this demonstration we are going to use all white. You can also use a background image, you can do that here. Customize how this looks then click to save changes. You can change the color of the links on the website, the hover color of hyperlinks, and typography section lets you choose the text of your website — the style, color and font size. Pretty much everything can be customized here in the typography section.
- In the “Homepage Layout” we recommend leaving everything as the default. In the “Homepage Featured Products” you can change that to anything but we recommend showing four. Then “Homepage Recent Product Entries” we recommend setting that to two.
- On the “Slider Settings” page we also recommend you leave everything as the default. Same as the “Layout Options” tab and the “Dynamic Images” as well. This is something that you can tweak later after you have your site setup.
- “Footer Customization” allows you to have up to four default widget settings. We recommend have three, but you are able to have up to four. Widget areas are good for SEO so we do not recommend having none. You can also enable more text under the widget area such as links and text which is also good for SEO. The “Powered by WordPress and WooThemes” link can be changed as well. This is done by changing these links so that they link to your own site instead of linking to WordPress or WooThemes. Login to the WordPress admin, click “appearance” and then “editor”. Click on the footer.php file on the far right. Scroll down until you see the “Powered by WooThemes” and enter the text you wish to display and the link that you prefer to link to, rather than linking to WordPress.org.
- In the “Subscribe and Connect” tab you can add your Twitter, Facebook, YouTube, Flicker, Delicious, and Google+ pages as well as MailChimp to collect e-mail addresses. It is very easy to set this up and very helpful in generating traffic to your store.
- These tips will help you to get started with your WooTheme and your WooStore. The first step is probably getting your logo created and your domain name and web hosting account. The professional logo only costs $5.00. Next you want to style your store.
Choose a good web hosting provider
A professional web hosting firm is something that you will need. We recommend using cPanel and a web host that has a solid data center with many bandwidth providers… preferably more than fifteen. Many web hosts will choose a data center with only one or two bandwidth providers, but this can cause problems for you down the road in terms of downtime. A good web host does not skimp on their data center and a good data center can have upwards of fifteen or even as high as seventeen bandwidth providers. Choose a web hosting provider that is experienced with WordPress, has a solid reputation and a good track record of several years in the web hosting industry.