How to make a Theme WooCommerce Compatible

Hi friend,

Today we are going to discuss about WooCommerce and our theme compatibility. Most of the theme are not Compatible with WooCommerce, so We are going to discuss that how to make theme compatible with WooCommerce.

First we have to install WooCommerce plugin and Activate, after that we need to add general details into woocommerce settings

After This we need to add theme support for woocommerce in our theme.

Just go to functions.php and add the given code:

function webkul_add_woocommerce_support() {
	//Add WoocCommerce theme support to our theme
    add_theme_support( 'woocommerce' );
	// To enable gallery features add WooCommerce Product zoom effect, lightbox and slider support to our theme
	add_theme_support( 'wc-product-gallery-zoom' );
	add_theme_support( 'wc-product-gallery-lightbox' );
	add_theme_support( 'wc-product-gallery-slider' );
}

add_action( 'after_setup_theme', 'webkul_add_woocommerce_support' );

We do not need to add all three gallery support, we have to choose or we can also use all these gallery supports.

After Adding theme support we need to create woocommerce.php file in our root folder

#! Add WooCommerce.php
theme
|__ style.css
|__ functions.php
|__ index.php
|__ page.php
|__ single.php
|__ woocommerce.php        // We need to add this file
|__ ...

#! WooCommerce.php
<?php
get_header(); ?>

<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main">

			<?php
			if ( have_posts() ) :
				woocommerce_content();
			endif; // End the loop.
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- #.wrap -->

<?php
get_footer();

After creating woocommerce.php we need to override WooCommerce templates in our theme to make changes in WooCommerce pages and to keep our changes safe after WooCommerce plugin update. Template structure must be same as woocommerce->templates, example: for override cart page template we need to use

plugins/woocommerce/templates/cart/cart.php to themes/our-theme/woocommerce/cart/cart.php

We also can do one thing to save our time simply we need to Go to wp-content/plugins/woocommerce /templates

copy all files and folder from templates folder and paste it to our theme after creating a folder name woocommerce

#! Add WooCommerce templates in our theme
theme
|__ style.css
|__ functions.php
|__ index.php
|__ page.php
|__ single.php
|__ woocommerce.php
|__ woocommerce
    |__ auth
    |__ cart
    |__ checkout
    |__ index.html
    |__ index.html
    |__ index.html
    |__ index.html
    |__ index.html
    |__ index.html
    |__ index.html
    |__ ...
|__ ...

For verify that our templates are working properly we just open woocommerce/single-product/title.php and print ‘hello dev’ before template parts. and check it on our product detail page

#! woocommerce/single-product/title.php
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}
echo "hello dev";
the_title( '<h1 class="product_title entry-title">', '</h1>' );

Now our theme templates will be use and we can edit them as our requirements.

If you want to make major changes in style and layout then you can disable woocommerce default styling by add_filter in functions.php

#! functions.php
add_filter( 'woocommerce_enqueue_styles', '__return_false' );

After doing woocommerce_enqueue_styles return false, the woocommerce default styles and css not applying in our themes woocommerce pages and we can make layout styling as per our need.

Thank You!

If you need custom WordPress Development services then feel free to reach us and also explore our exclusive range of WordPress WooCommerce Extensions.

!!Have a Great Day Ahead!!