How To Create Custom WooCommerce Theme and Add It To A Theme

on March 03, 2018

WooCommerce nearly powers 28% of all the online stores on the internet with over 32 million downloads. WooCommerce is one of most the most comfortable to customize e-commerce platform. With its flexible nature, you can create and integrate WooCommerce custom theme to your WordPress theme easily.

how-to-create-custom-woocommerce-theme

As I informed in our previous post about WooCommerce extensions; we will be making a separate segment for WooCommerce customization. In this post, I will be covering how to add custom WooCommerce theme to your WordPress theme. To stay updated please signup, if you haven’t.

Creating custom WooCommerce Theme

Creating custom WooCommerce theme includes two major methods.

  • Using a Plugin
  • Using Child Theme

The plugin method is better for making minor changes, especially for minor stylesheet modification.

While the child theme best for making a completely new custom theme. For example, you completely change the entire look of your shop page, product single page and each default elements in the WooCommerce.

Creating custom WooCommerce theme purely depends on your needs and your custom store design. If we include all the possible customization then this post will become a course material. As for this post, we will give you a basic idea and best practices for creating a custom WooCommerce theme and how to add the custom WooCommerce theme to your existing WordPress theme.

Customizing Using Plugin

The plugins which WooCommerce personally recommend for minor customization is Jetpack and Code Snippets for PHP. If you are using WordPress, you might be knowing how huge the jetpack plugin, the impact of this plugin on your site performance is huge. The basic speed optimization hack for a new WordPress site is to disable the Jetpack plugin. This is one of the reasons why people go directly for child theme custom CSS, even for minor changes. But luckily you have SASS plugin as an alternate for this task.

Another important tool you need to make the minor CSS WooCommerce customization is a browser. The preferred browsers are Chrome and Mozilla Firefox.

Step 1: Install the Jetpack plugin on your site.

Step 2: Go to your WooCommerce store. For instance, I want to change the call to action button color from default #96588a color to #c1d222. Right-click on the button and select the inspect element option. You will get a similar window like below.

chrome-dev-tool-woocommerce-customization

In the style area, you can find the .button CSS style. Change the color to your desired color, for me now the color is #c1d222. Copy this custom CSS file, the CSS for this change will be like the below snippet.


.button
{
    background-color: #c1d222;
    border-color: #c1d222;
    color: #ffffff;
}

Step 3: Now go to your jetpack plugin and go to Appearance >> Edit CSS.

chrome-dev-tool-woocommerce-customization

Paste the code and save the custom CSS file. Rest of the work is taken care by the Jetpack. The advantage of using the Jetpack for this customization is it keeps the custom changes intact even if you update the WooCommerce. Now refresh your store and the color of the button will be changed to the one we changed, just like in the below image.

woocommerce-customization-using-plugin

Customizing Using Child Theme

Child theme is one of the best practice that all professionals recommend. The reason is you can do an innumerable amount of changes to the WooCommerce store and also can add custom functionality. Again creating a custom WooCommerce theme is purely depends on your needs. This post of WooCommerce gives you some basic idea about how to set up and use child themes. In this post they have also provided you a basic custom child theme to download. Use it to get a better idea. If you are new to WordPress, then this Codex post will give you a complete idea about the child themes.

Once you have created the custom WooCommerce theme you can add them effectively to your site by two methods. That’s what we are going to see next.

Basic Methods to Add WooCommerce Custom Theme

WooCommerce custom theme can be integrated to your WordPress theme in two ways.

  • Using WooCommerce Content
  • Using WooCommerce Hooks

In the WooCommerce plugin files, you will find the WooCommerce template files. If you are customizing a particular WooCommerce page, you can use these templates in your WordPress theme.

The second method is a developer-friendly method and also the most preferred one. WooCommerce hooks are like calling and inheriting your custom WooCommerce functions without disturbing the core file.

One Click Solution:Use our WooCommerce customization support services to create and customize your WooCommerce store.

WooCommerce Content Method

As now we have an idea how a custom WooCoomerce theme varies from a normal WooCommerce theme lets get into how to create a custom WooCommerce theme. In the content method, you are creating a custom WooCommerce theme by creating a new WooCommerce PHP page in your theme file.

Note:The content method uses all the WooCommerce default taxonomy and post type.

By default, WooCommerce plugins come with the template files. The template file contains all the necessary pages and their page structure. All you have to do is to copy and paste the template in your custom WooCommerce theme file.

Create a New Custom WooCommerce Theme File

Log into your cPanel, head to the directory where the WordPress and the theme files are located. Find the page.php file and duplicate the file. Now rename the file as woocommerce.php file and save it.

The file path should be like this now wp-content/themes/NAME OF YOURTHEME/woocommerce.php.

Adding Template to Custom WooCommerce Theme File

After creating the new custom WooCommerce theme file, we have to place the required file template in the custom file. You can find the template files at the following location;

wp-content/plugins/woocommerce/templates

woocommerce-plugin-template

For example, if I have to change the cart page, copy the cart page template and paste it in the new custom WooCommerce theme file created in the theme file.

By doing this, the cart page in the theme file will be called first before the default cart template. By default the custom WooCommerce theme will have the default looks of the WooCommerce only, to change the look of the custom WooCommerce theme you have to create your own custom WooCommerce CSS file. I will explain about this in detail in our next WooCommerce customization post.

Pro Tip:Since you are making changes to the core file, each time when you are updating WooCommerce or your theme, you have to do the changes manually again.

After you feel all the customized functions are working fine, you have to declare the WooCommerce support to hide the message, “Your theme does not declare WooCommerce support.” Paste the following code in your functions.php file.

add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
    add_theme_support( 'woocommerce' );
}

WooCommerce Hooks Method

Creating a custom WooCommerce theme by the content method has certain limitations. Always try to keep the WooCommerce customization by the content method as the last option, because you have to look out for compatibility issues regularly before every WooCommerce and theme update.

“Always try to keep the WooCommerce content method customization as the last option”

Hooks method is the most preferred and easy to maintain WooCommerce customization method. This technique best suits for integrating custom WooCommerce to a non-WooCommerce compatible WordPress theme.

In this method, you are calling the fundamental characteristics of a WooCommerce page into your custom WooCommerce theme. Creating a custom WooCommerce theme by hooks method involves the following steps.

Unhook WooCommerce Wrapper

WooCommerce function file contains the default wrappers; you have to remove these default opening wrappers to hook your custom functions.

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

Hook Your Custom WooCommerce File

Now you have to place your own wrappers to hook these function files into your custom WooCommerce theme.

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '
<section id="main">';
}

function my_theme_wrapper_end() {
  echo '</section>

';
}

This process is more or less like throwing a lasso and hooking the functions you need.

Example of hooking a cart page to display the Up-sell product per page/per line; that is the number of products shown in the recommended products segment

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_upsells', 15 );
 
if ( ! function_exists( 'woocommerce_output_upsells' ) ) {
	function woocommerce_output_upsells() {
	    woocommerce_upsell_display( 3,3 ); // Display 3 products in rows of 3
	}
}

In this code, we have mentioned that only one three products to be displayed in a row of the upsell section. The result for the product will be like this in your custom WooCommerce theme’s cart page will be like this;

woocommerce-upsells-single-product-page

After you find all the custom functions working fine with your custom WooCommerce theme, declare the WooCommerce support by placing the following code in the functions.php file;

add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
    add_theme_support( 'woocommerce' );
}

Pro Tip:Please take a look at the list of hook functions for your reference.

Best Custom WooCommerce Themes

Before getting started let us see some of the best custom WooCommerce themes so that you have a better idea how the custom WooCommerce themes look. Following are the best custom WooCommerce theme with a minimal look, which I personally used and some of our customers also uses. The level of customizations on these custom WooCoomerce themes is elegant and also gives end users plenty of options to make their shop unique.

Elsey Responsive eCommerce Theme

Elsey is a fully customized WooCommerce theme. Right from the homepage till the car page, each element is optimized perfectly to the look of the template.

Experience theme here>>

elsey-custom-woocommerce-theme

Seese Responsive eCommerce Theme

Seese is similar to the Elsey eCommerce theme. The WooCoomerce functionalities are well blended to the look of the theme, at the same time the features of the WooCommerce are preserved.

Experience theme here>>

sesee-custom-woocommerce-theme

Ready to Integrate WooCommerce

These are the methods you can use to customize WooCommerce and integrate it with your WordPress theme. With our future WooCommerce customization tutorials I will explain in detail how to customize each section of a WooCommerce page.

If you find any errors in the code or need any help in solving the issues; feel free to reach us our experts are here to help.

Experts

Easy One Click Solution: Customize your WooCommerce store easily in one click. Get the required WooCommerce support services

If you haven’t yet subscribed to our blog newsletter; please subscribe to stay updated and to get new WordPress tips and tricks right in your inbox. Happy website!!

Altaf Rahman

Altaf is in the field of online from 2006 starting his career as WordPress trainer for students and completed number of projects. He is a successful entrepreneur of Cyberspace Builder started in 2011 and served nearly 4000+ customers helping them to complete about 3000+ projects.

WordPress SupportAnd Maintenance Services
  • Bill Parlaman

    “ Really great to work with. Listens to my issues and works hard until they get it done perfectly. ”

  • Alex Petrou

    “ Always a pleasure working with WPTS. Their work is fantastic and timely. Maintain our website regularly. ”

  • Thomas Carlson

    “ WP Team Support was very responsive and Increased my website efficiency by 53%. ”

Get Started Now
Feature

Support teams across the world

Feature

Safe & Secure online payment