3 Steps to Integrate Your Own Theme with WooCommerce

Updated on June 5, 2021

Actually there are no additional required actions to make WooCommerce work with your custom theme. Sometimes, if your theme has correct single.php and page.php templates, it will be enough.

All the functionality WooCommerce integrates with shortcodes and action hooks. It also has its own CSS files.

Step 1 – Declare WooCommerce Support

When you activate your custom theme, probably you will see this notice.

Declare WooCommerce support notification.

I do not recommend just to dismiss it, the first step to theme integration is to add the following line to your theme functions.php file:


add_theme_support( 'woocommerce' );

If you did it correctly, the message should disappear after page refresh.

Step 2 – WooCommerce Default Stylesheets

WooCommerce connects to your website 3 CSS files, which are used to style its own system pages, like Member’s Area, Cart, Checkout, Product pages.

But Nothing Works without body_class()

Everything begins with body_class() function. I mean any rule in WooCommerce CSS begins with classes that are connected to the page body. If you do not have the below line, nothing happens.


<body <?php body_class() ?>>

If your website <body> already has body classes and you can not just remove them, pass your classes to the only parameter of the function, like in this example:


<body <?php body_class('misha class_2') ?>>

How to Remove Default CSS

If you would like to remove WooCommerce default CSS or to replace it, you can use this piece of code in your theme functions.php file.


add_action( 'wp_enqueue_scripts', 'misha_remove_woo_styles', 20 ); // priority 20 and higher

function misha_remove_woo_styles() {
 	wp_deregister_style( 'woocommerce-general' ); // the main CSS file
 	wp_deregister_style( 'woocommerce-smallscreen' ); // for max-width: 768px
 	wp_deregister_style( 'woocommerce-layout' ); // layout only
}

It is also possible to disable all styles at once:


add_filter( 'woocommerce_enqueue_styles', '__return_false' );

Step 3 – Overriding Templates

You can copy any template from plugins/woocommerce/templates to themes/{YOUR THEME}/woocommerce keeping the same file structure and the copied file will override the default WooCommerce file.

To change a default template just copy it to woocommerce folder in your theme. — WooCommerce plugin directory on the left and your theme folder on the right.

I know, you can say: “Wow, I can change everything now”, but try to avoid large amount of changes because when WooCommerce will be updated, you should take care of all outdated templates (only in case if these templates original files were changed during the update). Go to WooCommerce > System status to check it.

woocommerce.php / woocommerce_content()

I do not use this file in my themes but sometimes you can find it when you work with some ready templates.

The woocommerce.php file is used to display single product pages and product archive pages and it has the higher priority than single-product.php and archive-product.php templates.

Usually it has the similar content to page.php file with WooCommerce loop function woocommerce_content() inside.

# WooCommerce