Reading list Switch to dark mode

    How to make a Theme WooCommerce Compatible

    Updated 16 April 2024

    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.

    Add WooComerce Theme support

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

    Searching for an experienced
    Woocommerce Company ?
    Find out More
    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.

    Add woocommerce.php

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

    #! Add WooCommerce.php
    |__ style.css
    |__ functions.php
    |__ index.php
    |__ page.php
    |__ single.php
    |__ woocommerce.php        // We need to add this file
    |__ ...
    #! WooCommerce.php
    get_header(); ?>
    <div class="wrap">
    	<div id="primary" class="content-area">
    		<main id="main" class="site-main">
    			if ( have_posts() ) :
    			endif; // End the loop.
    		</main><!-- #main -->
    	</div><!-- #primary -->
    </div><!-- #.wrap -->

    Override WooCommerce templates with our theme

    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
    |__ 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
        |__ ...
    |__ ...

    Verify that our theme overriding wooCommerce Templates

    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.

    Disable wooCommerce default styling

    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!!

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content