Design woocommerce themes – Web designers guide

woocommerce theme tutorial

Designing woocommerce themes

This tutorial is aimed at making you understand basic concept of woocommerce theme development. After completing this tutorial, you will be able to create your own woocommerce themes. There are three things you need to know before starting this tutorial.

  • Good knowledge of HTML/CSS
  • Basic understanding of wordpress themes
  • Passion to learn and acquire skills.

Developing woocommerce themes tutorial

Why woocommerce themes ?

1> As a web designer you should be looking at different available platforms, where you may publish your designs. This helps you to unlock your potentials, leading at more sales for your themes & templates.

2> This era marks, rise in online dealings. Pioneers of online shopping were ebay and Amazon and today it has become a trend. Wait for the day, when all retail shops, small or big, will have their online store. So, as a eCommerce theme designer, you are destined to make more gold.

3> Woocommerce is a plugin developed for WordPress(biggest open-source CMS platform in the world), that being said, you will get amply woocommerce resources online. You will have no questions on woocommerce that is left unanswered on forums and communities.

Woocommerce themes tutorial (wordpress)

Getting started with woocommerce themes

I assume that you already have WordPress installed on your online or local web server. If not then, download the lastest version of WordPress. After you set up your WordPress install, download woocommerce plugin and activate it, upon activation you will be presented with WooCommerce Onboarding Wizard, it will help you in setting up your shop

on board wizard, woocommerce themes

WooCommerce Onboarding Wizard, presents you with basic setup.

1> The first thing you have to do is to set up pages like Product catalogue page , cart page, checkout page, Account page. Woocommerce takes your headache, by creating all those pages automatically. If you want to do it yourself, then you can skip this step.

2> Next, on store locale page setup, you have to choose your country, currency, currency position, decimal separator, product unit and and product dimension.

3> Shipping & Tax setup allows you to set up shipping price and associated sales tax. This setup is necessary for physical products. You may skip this step if you choose to sell, downloadable/ virtual products.

4> Final step is to choose payment methods, you have got paypal option over there, you may setup paymal email address. Offline payment methods include Cheque payment, Cash on delivery, Bank Transfer. Select the appropriate option.

5> Kudos, you have completed your Woocommerce setup, Next step is to create some example products. Create four to five example products, before you start creating theme for woocommerce.

woocommerce themes setup

Woocommerce theme support

In order to make your theme compatible with woocommerce, you need to add four lines of code in your WordPress function.php file.

add_action( ‘after_setup_theme’, ‘woocommerce_support’ );

 

function woocommerce_support() {

 

add_theme_support( ‘woocommerce’ );

 

}

Adding these four lines in functions.php makes your theme compatible with WooCommerce. Most of the modern themes comes with WooCommerce support, but if your theme doesn’t have it, consider adding these four lines.

Create a new file and name it woocommerce.php and place it at the root of theme’s file where your page.php and index.php resides. Copy the content of page.php file and add it to woocommerce.php and then add the below mentioned snippet replacing the page loop.

<?php woocommerce_content(); ?>

This code goes in place of page loop which usually appears like

<?php if (have_posts()) : while (have_posts()) : the_post();

get_template_part( ‘content’, ‘page’ );

endwhile;

endif; ?>

Replace all this and add

<?php woocommerce_content(); ?>

Now your woocommerce.php will appear something like this.

<?php get_header(); ?>

<div id=”wrap” class=”container clearfix”>

<section id=”content” class=”primary” role=”main”>

<div id=”post-<?php the_ID(); ?>” <?php post_class(‘type-page clearfix’); ?>>

<?php woocommerce_content(); ?>

</div>

</section>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

Congratulations, after completing this step, your theme now fully supports WooCommerce.

woocomerce themes support

Woocommerce themes customization

Finally here comes the most important part. As a web designer, you will not want to have default look of woocommerce. You will want to change the colors, styling and layout of woocommerce pages. Whether you want to use this template for yourself, or for your client or for marketplaces, to achieve the unique design, follow these steps.

Overriding Templates

Copy the template file located in woocommerce plugin and paste it in your theme’s folder. Rename it as woocommerce, now you can do changes in templates. Please don’t directly change the template in plugin, if you do so, any update might break the theme. Template files in woocommerce consists mark up for frontend and HTML emails.

Overriding Style

The default stylesheet of woocommerce can be found inside plugin’s assests/css . The folder contains woocommerce.css (minified file). This file is responsible for default style. Don’t change anything over there, as it won’t be permanent, and theme upgrade will break your changes, rather you may, use it as reference and the class and ids responsible for HTML elements, copy the class/ id and apply your own style in your theme’s stylesheet. If you want to make major change, and dont want any styling by woocommerce, then you might want to completely switch off the default styles. For doing so, add this code inside your theme’s functions.php

// Remove each style one by one

add_filter( ‘woocommerce_enqueue_styles’, ‘jk_dequeue_styles’ );

function jk_dequeue_styles( $enqueue_styles ) {

unset( $enqueue_styles[‘woocommerce-general’] ); // Remove the gloss

unset( $enqueue_styles[‘woocommerce-layout’] ); // Remove the layout

unset( $enqueue_styles[‘woocommerce-smallscreen’] ); // Remove the smallscreen optimisation

return $enqueue_styles;

}

// Or just remove them all in one line

add_filter( ‘woocommerce_enqueue_styles’, ‘__return_false’ );

Adding this code in your theme’s functions.php will disable all styling by woocommerce and you can start creating your own dream layout/style by scratch.

Kudos, now you are ready to create your own woocommerce theme. In the later part of tutorial I will show you how you can convert a HTML5 template into a WordPress and WooCommerce powered theme Do comment, if you think that, I missed some step, or if you have any doubts, do leave words of appreciation, if this tutorial helped you.

*Please note that, you should’nt touch any files, if you don’t have good knowledge of HTML/CSS and you don’t know basics of WordPress, if you do so, you might break your website. This tutorial is not for you, consider hiring a developer for doing your task.

0 Vote

saurabh

Saurabh chaudhary is expert in web design, he writes about web design inspiration, bringing all beautiful websites together in a showcase.

You may also like...

3 Responses

  1. samdani says:

    We know to make pro eCommerce responsive and dynamic site the necessity of woo commerce theme is very essential . But new comers in this sectors can not get fully concept on the necessity of woo commerce.
    And this is why like this article the articles can be described as great tonics . Thanks for sharing valuable article here .

  2. Inspirearun says:

    Good to know that I can convert old magazine themes into WooCommerce supporting themes.

  3. Technocrab says:

    Woocommerce is may favorite E-commerce website developmemnt becasue as a web designer you should be looking at different available platforms, where you may publish your designs.

Leave a Reply

Your email address will not be published. Required fields are marked *