Woocommerce Plugin Template overriding (Karma WordPress Theme)

Posted in: ,

Important

The Karma Theme uses Woocommerce hooks and filters to add codes that are required to wrap woocommerce plugin with Karma Theme’s layout. The theme does not use ‘woocommerce template overriding’ so we do not encourage adding these to the theme as sufficient coding knowledge will be required.

The hooks and filters for WooCommerce are located within the Karma theme here:  …wp-content/themes/Karma/framework/extended/woocommerce.php

If you’re looking to implement woocommerce template overriding please visit the following WooCommerce documentation page to understand how it works.
http://wcdocs.woothemes.com/codex/template-structure

Please note that this type of customization is not covered under normal theme support. We suggest that you have a comfortable level of PHP/HTML/CSS coding knowledge. If you are in need of custom coding assistance for this tutorial we recommend 2 very highly trusted theme customization partners: WPQuestions.com and Codeable.io

Introduction

Woocommerce is a third party plugin created by WooThemes and they actively updates the plugin, therefore their template code may change without any notice. This tutorial is a working example written for Karma 4.0.2 and Woocommerce 2.1.2, which may not work with other versions.

Tutorial

In this tutorial we will be referencing the “Shop Page”. The Shop Page is the page which woocommerce plugin creates that automatically populates all of your WooCommerce content.

Here is a demo shop page.
http://themes.truethemes.net/Karma/shop

Steps:

1) Open up Karma Theme and create a new folder, called woocommerce. The file structure will be:  /Karma/woocommerce/

2) Download the ZIP file below which contains the following file: archive-product.php.zip

archive-product.zip
This archive-product.php is created using woocommerce plugin’s archive-product.php (woocommerce/templates/archive-product.php) and some Karma Theme codes.
If you are a programmer and interested to have an idea of how this page is made, Please use a diff tool to compare this archive-product.php and the original woocommerce/templates/archive-product.php in woocommerce version 2.1.2. The diff tool will highlight what has been modified.

3) Unzip the file and upload archive-product.php into the woocommerce folder you’ve just created. The file structure will be: /Karma/woocommerce/archive-product.php

4) That’s it. Your WooCommerce Shop Page will now use Karma’s “full-width page template” instead of the “right sidebar” page template.

Here’s a screenshot of what it will look like now.
Screen Shot 2014-02-16 at 2.57.22 PM