Category

E-commerce

beginners guide to theming Woocommerce

How to make a WordPress Theme, Woocommerce Compatible from scratch

By | E-commerce, Ecommerce, PHP, Programming, Theming, Woocommerce, Wordpress | 6 Comments

In this post I’ll going to explain how I took a WordPress Bootstrap Theme and made it Woocommerce Compatible. I couldn’t find many good tutorials on this so I’m writing this one, so that it might help someone else.

The Process to make a theme Woocommerce Compatible

I’m going to take the very nice DevDmBootstrap3 theme and make it Woocommerce Compatible.

  1. I created a child theme of DevDmBootstrap3
  2. I added the required stuff needed to that child theme

I’ll skip over 1 (there are plenty tutorials of how to do that out there), and move right onto 2.

Complete code below (can be put in functions.php)

Sidebar Code for Woocommerce (wp-content/themes/THEME/sidebar.php )

The DevDmBootstrap3 theme didn’t have a sidebar.php so I added one to my child theme with the following:

Explanation of Code

Remove the Woocommerce default wrappers (this drops wraps the Woocommerce content in the theme, so everything looks nice), see remove_action lines.

Next, we need to make our own wrappers so Woocommerce can nicely be wrapped into the theme and all looks good. See functions gbb_theme_wrapper_start() and gbb_theme_wrapper_end(), in these functions I wrap the content in the theme (todo this on different themes this will vary slightly).

Roughly speaking the contents of the 2 wrapper functions will be output between the header.php and footer.php files of the theme you are using.  As you can see below I’ve added content to drop in relevant stuff from the DevDmBootstrap3 theme such as the menu e.g. ‘topnav’ .

 

Essentially what I’ve done is created a bootstrap row with 2 columns: column 1 is two thirds width and column 2 is one third width.

Column 1 (col-md-8)

This contains the main Woocommerce content.

Column 2 (col-md-4)

This contains the Woocommerce sidebar.

After that I declare Woocommerce support in the theme, and lastly create a sidebar for the theme (that I can use as my Woocommerce sidebar). The sidebar can be seen in the themes sidebar.php template file (which I created for this theme as it didn’t have one).

And thats about it in nutshell as they say, hope you find this useful.

 

 

 

 

References:

Woocommerce third party theming

Theming Jigoshop , this is the best resource I could find (Jigoshop is a fork of Woocommerce or vice versa)

 

Update 27 June 2016

To Download the latest version of the Woocommerce Compatible theme click here

In this version there is no sidebar on woocommerce pages (except on cart / checkout, this can be switched on/off via devdm-theme-options is needed).

To have a sidebar in the shop / product page etc this can be setup via the wrapper functions see file: make_theme_woocommerce_compatible.php (as in the tutorial above).

 

TODO at a later date I will do a part 2 to this tutorial to  create the rollover cart contents script (that will be put in the header to quickly preview whats in the cart).

 

 

 

woocommerce table rate shipping plugin

Woocommerce Table Rate Plugin charge per item example

By | E-commerce, Ecommerce, Plugins, Woocommerce, Wordpress | No Comments

The Table Rate Plugin is one of the most useful plugins for Woocommerce. However if you’ve never used it before it may have you scratching your head as to how to use it. In this tutorial I’ve go over how to use it to charge per item and how to apply different rates based on the shipping location.

1. Create Shipping Classes

Select Products on left menu and choose shipping class from the submenu. From this page you can set up your shipping classes. For this example I’ve setup 2 Shipping classes called: Small and Large (e.g. in add/edit product for a small item you’d select the Small shipping class).

2. Create Shipping Zones

Firstly we need to create Shipping Zones in this example we’ll have 3:

  • UK
  • Europe
  • Rest of World

After we configure them we’ll end up with this:

Screen Shot 2015-06-19 at 16.08.22

Table Rate Plugin charge per item example

So lets start with the Table Rate Plugin charge per item example. In the left menu goto Woocommerce -> Shipping Zones, fill in the zone name e.g. UK and fill in the countries for that zone (just the UK in this case) and click ‘add shipping zone’. Do the same for Europe but add the different countries (or select EU states if you only doing EU).

Woocommerce has a catch all Zone (Default Zone) so we can use this as the zone for the rest of the world. Use the method title to change what the user will see on the front end (in this case I changed it to Rest of World).

woocommerce configing the table rate plugin

Configuring Shipping Zones to have their own shipping costs

Next we can configure each of our shipping zones to use the relevant shipping class/es. Click on a zone (see below):

Shipping Zones

On the page below select Table Rates and click add:

blog_flatrate2

Table Rate Plugin charge per item example

Scroll to the bottom of the page below (and use the setting in the screenshot). Then we can configure the costs of the shipping for the first shipping class:

blog_flatrate4

Finally we add in the other shipping class and configure it as below:

table rate shipping expert london

In the  screenshot above I have configured shipping costs for large and small items for this particular shipping zone. To setup shipping costs of the other zones, repeat the steps from Configuring Shipping Zones to have their own shipping costs section to here.

This way you end up with different costs for Small and Large items based on where they will be delivered to. So logically you have something like this table below (for the cost of delivery for the different items to different parts of the world):

 

UKEuropeRest of World

Small Items £2 £6 £10
Large Items £4 £10 £18