Setting up a WooCommerce shop with the Customizr theme

You want to set up an online shop and you have decided to use WordPress for the purpose. You installed WordPress and then chose to use the Customizr Theme. What next?

Of course WooCommerce!  WooCommerce is a free eCommerce plugin and it is very popular because of its ease of installation and the speed with which you can set up your online store. 

In 2015, WooCommerce has been acquired by Automattic, the company behing WordPress.org, this will of course guarantee the quality and the perenity of this plugin.

The Customizr WordPress theme has been made 100% compatible with WooCommerce. ( Check out the demo shop page ) The following documentation will cover how to create your WooCommerce shop with the Customizr theme in a few simple steps.

Installation

Installation is simple and straightforward, like any of the WordPress plugins. Login into your WordPress site as admin. From the dashboard, click on Plugins> Add New. Type WooCommerce in the search box and from the results click on Install Now next to the WooCommerce plugin.

Once installation is completed, click on Activate.

The WooCommerce Onboarding Wizard takes over to help you set up your store.

You can choose to install your store using this wizard or return later to set up shop.

If you choose to go ahead, the first and most important screen that appears is the Page Setup. The Shop, the Cart, the Checkout and the My Account pages will be automatically created.

After this screen comes the store locale screen. Here you can make changes regarding the store's location, currency and other details.

Following this screen, there are a few more setup screens, specific to shipping, tax and payments. Once you have customized these, you are done and ready to go.

The above settings can also be accessed anytime from WooCommerce > Settings from the dashboard.

Set up shop - add list of products

Once installation is complete, you can visit your store by going to your-site-url/shop/. This is the default url for the store. You can alter it in the settings. As of now, you store is empty. You have to add your products. Here is how:

From the dashboard, click on Products > Add Product. The WordPress Post editor appears. Give a name to the product in the title box. The product's description can be typed into the editor. You can choose one or more categories for the product on the metabox to the right.

Below the editor, you will find the Product Data metabox. The data is organized in various tabs.

The General tab has details about SKU (stock keep unit) used to track products. It must be unique. Then the prices - Regular Price and Sale Price.

The Inventory tab allows you to manage stock for the product individually.

The Shipping tab shows the Weight, Dimensions and Shipping Class.

The Linked Products tab is used to cross promote your products with one another. They can be added by searching for a particular product and selecting the product from the dropdown list.

On the Attributes tab, you can assign attributes to a product. Once you have chosen an attribute from the select box, click add and you can apply the terms attached to that attribute to the product. You can hide the attribute on the frontend by leaving the Visible checkbox unticked.

From the Advanced tab you can enter a Purchase note (an optional note to send the customer after purchase) and a Menu order. You can also enable customer reviews for this item.

Finally, you can add an excerpt that should be a short product description. Typically this appears next to the product's image on the listing page, and the long description appears in the Product Description tab.

You can also add an image to your product by clicking on Set Featured Image.

In the publish panel, you can set catalog visibility for your product.

Visibility can be set to:

Catalog and search – visible everywhere Catalog – visible in catalogs, but not search Search – visible in search results, but not in the catalog (categories/shop page) Hidden – only visible on the single product page

Now, click on Publish and your product is added to your shop.

Visit the Store and shop

After adding a few products, visit the store by going to your-site-url/shop/. Now you can see the products listed on the screen.

The customer can browse through the products using the paginated listing. The sorting order can be changed.

Clicking on any particular product brings up the product page.

The product's short description is displayed. The Customer reviews and ratings are also shown. Related products which were selected from the Linked products tab are shown. The Cost Price and Sale Price are also displayed.

Reviews for the product can be seen from the Reviews tab.

Customers can add an item to their cart simply by changing the quantity and clicking on Add to Cart.

Checkout

After adding the required items to the cart, clicking on View Cart brings up the cart and its items. The items are listed with the per item price, quantity and Total. Shipping charges and Tax, if set up, will be applied.

Click on Proceed to Checkout for checkout.

Give the billing details and payment method in the Checkout screen. Click on Place order to finalize the order.

Once the order is placed, the customer can return anytime to his My Account page to view his orders.

Adding store pages to the menu

To facilitate the view of the shop, the cart and account details for the customer, it is advisable to add these links to the site's menu. Though these pages are created by WooCommerce, you will have to add them manually to your site's menu for easy navigation.

Go to Appearance > Menus from the admin dashboard. You can see the newly created pages. Choose them and click on Add to Menu.

On addition of the pages, you can rearrange the items according to your convenience. Then click on Save Menu.

Once the Menu is saved, you can view the items on your site's header menu (if you have added them to the header menu).

That brings your store live! What are you waiting for? Add all your products and start selling right away! Customizr and WooCommerce together make an attractive combination for your exciting new store!

Adding a shopping cart icon to the header

Shopping cart in the header

The Customizr theme includes an option to display a WooCommerce shopping cart icon in the header. It shows the number of items in the cart, and gets updated without refreshing the entire page when a customer clicks on "Add to cart". There's a specific documentation page about this here

Doc created by: Menaka S.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.