Beginners Guide: How to Make Woo commerce Theme from Scratch

//Beginners Guide: How to Make Woo commerce Theme from Scratch
Beginners guide - how to make woocommerce theme from scratch

OVERVIEW

Popularity of woo commerce platform is not hidden from anybody. Woo commerce is one of the best ecommerce platforms. Ok! Actually woo commerce is not a platform it’s a plug-in. Yes! Plug-in which can add all basic and advance ecommerce features to your WordPress CMS.

Confused? Let me explain more clearly for you. Actually woo commerce is a plug-in to convert WordPress CMS into ecommerce platform like Magento, Shopify and Big commerce.

WordPress is very popular CMS and powers almost 75 million websites on internet according to the one article on Forbes.

I am not going to go deep into WordPress and what WordPress really is, as I assume you are reading this article with at least little bit of WordPress customization knowledge.

In this guide, I will dive deep and show you how you can create your own woo commerce theme from scratch. I was researching a lot on issue which I got stuck for one of my client who wanted a woo commerce website. I did complete renovation of that project from squarespace CMS to Woo Commerce. During my research I found that there is no guide or any article available on Google which can clearly explain how to create woo commerce theme from scratch. So, I thought to create one for you.

Statistical Report on usages of woo commerce platform

It’s very strange that after being so popular and having strong community also, there is no step by step guide available for beginners who have little bit of PHP/MYSQL and HTML/CSS knowledge.

Ok! So here is my steps following which you can surely create your own woo commerce theme from scratch.

Step 1 – Setting up environment for theme development

Let’s use XAMPP as our local server in order to install WordPress first. You can download the XAMPP from the official website and select whatever version suits your OS. XAMPP is available for almost all types of OS.

I am using windows here.

There are many other options also available other than XAMPP such as WAMP. WAMP is also very famous among USA based developers .

Next, you need to install and make your XAMPP run on your computer/PC/Laptop.

Now you need to download the WordPress CMS. Ok! You must be thinking why to download WordPress when we are making woocommerce theme. I will remind you that WordPress is CMS and woocommerce is a plug-in to bring all possible ecommerce features for you to sell your products

Now, download WordPress from official website i.e. wordpress.org

Copy and extract the downloaded file under root folder of your local server. Now before visiting the folder location through browser you will need to create database name in your Phpmyadmin.

Now, visit your folder path in your browser and follow the step by step process to install WordPress.

Steps 2 – Understanding the folder structure of WordPress and Woo Commerce

In above image you can see the folder structure of woo commerce files. I took the above image from Git hub repository, this image explains you the details of every single folder and php files.

After installation of WordPress you can see that by default a theme is active, this is default theme by WordPress.

Now, go to plug-in from right side menu on your WordPress dashboard. Click on “Add New” It will take you to the page of WordPress plug-in. Search woo commerce plug-in using search bar and install woo commerce or you can download the woo commerce file directly from woo commerce website and upload. In the image below you can see where to search plug-in and where to upload the woo commerce downloaded file.

Your woo commerce plug-in is installed on your WordPress CMS based website, now you can see woo commerce on right side of your admin dashboard menu.

Once you setup woo commerce accurately you will be able to see following pages under your All pages menu of admin dashboard.

-Checkout
-Cart
-My Account
-Shop

These are the basic pages which you get directly from installation.

In next step, you will see how you can use the free or premium version of wordpress theme as framework.

Step 3 – Using pre-built WordPress theme as framework and customizing the design

You will need to create a WordPress theme first. If you have good knowledge in PHP/MYSQL and understand the functions, tags and WordPress hooks you can easily create your own WordPress theme from scratch. Here in this guide my focus is on beginners who have knowledge of customizing existing WordPress theme and wants to create own woocommerce theme from scratch.

I like keeping things simple and so I will advise you to use prebuilt WordPress theme as framework.

Install any WordPress theme you already have, use free version from WordPress themes if you want.

I think you know very well how to install and activate WordPress theme. So, now you need to create child theme.

Why to create child theme?

WordPress updates very frequently these days and so do woo commerce plug-in. You should not do any changes in the core files and theme and instead use the child theme. In order to make the theme compatible with the latest version, author can update it any time and you can lose all your efforts which you put to customize theme as framework.

It is explained very clearly in the codex of WordPress website.

Here, is the process using which you can cook child theme.

1) Create a child theme directory and name it“–child” extension to theme which you are using
Ex- twentyfifteen-child

2) Create Style.css file in your directory. This directory should contains the some details such as follows

3) You will have to create functions.php and this is required to attach your style.css file with the parent theme which you are using as framework.
You will need to add the following code in your functions.php which will ensure that your theme’s style sheet will also load with your Childs style.css

4) Now save the file and activate your child theme. It should load your child theme without any issue and if there is any issue then there is error in your functions.php.

Step 4 – Designing and Overriding the woo commerce template files

Now you have all the basic pages which come with woocommerce and if you are beginner you can just create shop page, categories and product detail pages. You can use inspect element technique to overwrite the CSS classes. All the new classes with attributes which you will write should be in child directory style sheet. This is what I will recommend to beginners.

WordPress Platform is highly customizable, using the above technique you can give your store very new look and design without any major coding.

If you want to go little further and want to change the woocommerce template structures as per your design. Then, you will have to overwrite the core template files of woocommerce.

Steps to follow in order to overwrite the woocommerce template structure:

1) Copy all the files from woocoomerce/templates/ to yourtheme/woocommerce/

2) Now, you know about the folder and file structure of woocommerce as I have already explained it above. Beside every folder and file the detail description is written in picture which will help you in understanding the functionality of every single files and folders.

3) Now, analyse your requirements and start customizing your woocommerce templates in your theme directory.
You can use HTML and CSS classes and even move the php hooks, tags and function of WordPress ( note: do this only if you understand the WordPress and woocommerce functions well).

Maybe you are trying hard to learn and code woocommerce at advance level but you cannot ignore the basic steps which can save your energy. Even if you are startup or business owner and want to create your own branded store by yourself, you need to know all the above formulas to succeed in branding your store.

Custom woocommerce theme from scratch will give your store unique look and feel for your visitors. This will increase your conversion rate too.

“Design is what which holds people when they visit your store very first time.”

“Is your woocommerce website/store is well designed to hold your visitors?”

What technique you follow to design custom woocommerce theme from scratch? If you have any other method please let me know through your comments.

1 Comment

Post your idea here

Your email address will not be published.