Tutorial on How to Develop a WordPress WooCommerce Theme

woocommerce theme development tutorial step by step

woocommerce theme development tutorial step by step

WordPress woocommerce theme development : woocommerce is the most popular ecommerce plugin for wordpress , we will learn how to develop a wordpress woocommerce theme step by step in this tutorial and will make a proper ecommerce theme, first we need to know the strunture to create a ecommerce theme, the header content the cart link with price and total item, the menu content for a myaccount link, the homepage content the featured product , recent product , sale product etc and there will be a shop page and a cart page and a checkout page and a my-account page.

** First must install woocommerce plugin to your project

Step 1

First have to make the theme woocommerce compatible and for that go to theme option and write the code

Step 2

The Header portion contain the cart value and total cart item , and sometime it content the mini cart description and for that write the code

woocommerce theme development tutorial step by step

woocommerce theme development tutorial step by step

The code of cart item count with price and cart link

<?php global $woocommerce; ?>
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
Cart Items: <?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?>  -
Price: <?php echo $woocommerce->cart->get_cart_total(); ?>

Cart Items (Product) Loop for mini cart

<?php
global $woocommerce;
$items = $woocommerce->cart->get_cart();

foreach($items as $item => $values) { 
    $_product =  wc_get_product( $values['data']->get_id() );
    //product image
    $getProductDetail = wc_get_product( $values['product_id'] );
    echo $getProductDetail->get_image(); // accepts 2 arguments ( size, attr )

    echo "<b>".$_product->get_title() .'</b>  <br> Quantity: '.$values['quantity'].'<br>'; 
    $price = get_post_meta($values['product_id'] , '_price', true);
    echo "  Price: ".$price."<br>";
    /*Regular Price and Sale Price*/
    echo "Regular Price: ".get_post_meta($values['product_id'] , '_regular_price', true)."<br>";
    echo "Sale Price: ".get_post_meta($values['product_id'] , '_sale_price', true)."<br>";
}
?>

Step 3

Now get the product by custom loop for homepage or any other page template and print the porducts with html according to your design with post per page with price template and add to cart template and after end of the loop dont forgot to reset the query

Code of woocommerce recent product loop

<!-- woocommerce latest product -->
<section id="recent">
    <h1>Recently Added</h1>
    <ul class="row-fluid">
        <?php
        $args = array( 
        			'post_type' => 'product', 
        			'stock' => 1, 
        			'posts_per_page' => 4, 
        			'orderby' =>'date',
        			'order' => 'DESC' 
        		);
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
            <li class="span3">    
                <a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                    <?php 
                    if (has_post_thumbnail( $loop->post->ID )): echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); 
                    else: 
                    	echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="65px" height="115px" />'; 
                    endif;
                    ?>
                    <h3><?php the_title(); ?></h3>
                   <span class="price"><?php echo $product->get_price_html(); ?></span>
                </a>
                <?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
            </li><!-- /span3 -->
        <?php endwhile; ?>
        <?php wp_reset_query(); ?>
    </ul><!-- /row-fluid -->
</section><!-- /recent -->

Now for the other loop I am going to write the argument array as the rest of the portion is same as the ‘Code of recent product loop’ located above that is the code from $loop = new WP_Query( $args ); through the while loop to wp_reset_query().

The argument array code of woocommerce salable product loop

<!-- woocommerce salable product -->
$args = array(
    'post_type'      => 'product',
    'posts_per_page' => 8,
    'meta_query'     => array(
        'relation' => 'OR',
        array( // Simple products type
            'key'           => '_sale_price',
            'value'         => 0,
            'compare'       => '>',
            'type'          => 'numeric'
        ),
        array( // Variable products type
            'key'           => '_min_variation_sale_price',
            'value'         => 0,
            'compare'       => '>',
            'type'          => 'numeric'
        )
    )
);

The argument array code of woocommerce to display featured product loop

$args = array(
           'posts_per_page' => -1,
           'post_type' => 'product',
           'post_status' => 'publish',
           'tax_query' => array(
                              array(
                                  'taxonomy' => 'product_visibility',
                                  'field' => 'name',
                                  'terms' => 'featured',
                                  'operator' => 'IN',
                              ),
                           ) 
       );

The argument array code of woocommerce to display sale product loop

$args = array(
			'posts_per_page' => 5,
			'post_type' => array('product', 'product_variation'),
			'meta_key' => '_sale_price',
			'meta_value' => 0,
			'meta_compare' => '>='
			'meta_type' => 'NUMERIC'
		  );

The argument array code of woocommerce to display product loop in price range for both sale and regular

<!-- or display product on a pricerange -->
$args = array(
        'posts_per_page' => 100,
        'post_type' => array('product', 'product_variation'),
        'meta_query' => array(
				            'relation' => 'OR',
				            array(
				                'key' => '_price',
				                'value' => 5,
				                'compare' => '<=',
				                'type' => 'NUMERIC'
				            ),
				            array(
				                'key' => '_sales_price',
				                'value' => 5,
				                'compare' => '<=',
				                'type' => 'NUMERIC'
				            )
				        )
		);

The argument array code of woocommerce to display product loop between price range

<!-- display product by price range -->
$args = array(
        'posts_per_page' => 5,
        'post_type' => array('product', 'product_variation'),
        'meta_query' => array(
            'relation' => 'OR',
            array(
                array(
                    'key' => '_price',
                    'value' => 10,
                    'compare' => '>=',
                    'type' => 'NUMERIC'
                ),
                array(
                    'key' => '_price',
                    'value' => 15,
                    'compare' => '<=',
                    'type' => 'NUMERIC'
                )
            ),
            array(
                array(
                    'key' => '_sale_price',
                    'value' => 10,
                    'compare' => '>=',
                    'type' => 'NUMERIC'
                ),
                array(
                    'key' => '_sale_price',
                    'value' => 15,
                    'compare' => '<=',
                    'type' => 'NUMERIC'
                )
            )
        )
);
The argument array code of woocommerce to display out of stock product
<!-- Product out of stock -->
$params = array(
        'posts_per_page' => 5,
        'post_type' => array('product', 'product_variation'),
        'meta_query' => array(
            array(
                'key' => '_price',
                'value' => 5,
                'compare' => '<',
                'type' => 'NUMERIC'
            ),
            array(
                'key' => '_stock_status',
                'value' => 'instock'
            )
        )
);

Step 4

Now go the page.php file of your theme folder and paste and rename as woocommerce.php and then remove the <?php if(have_posts()): while(have_posts()): the_post() ?> to <?php endwhile; endif; ?> portion and in place of it write <?php woocommerce_content(); ?>
** that file will show the shop page product loop and the archive loop and the single product page

woocommerce theme development tutorial step by step

woocommerce theme development tutorial step by step

Step 5

Now go to your plugin folder open, woocommerce , open template folder(wp–content/plugins/WooCommerce/templates) and copy the content and paste in your theme folder (suppose your theme folder name is abvdef then open abcdef) and make a folder name woocommerce and inside that paste the coppid files.

now change the design of the templates and make change the default html structure of woocommerce display portion here is the mostly used templates

cart/cart.php : your cart page
cart/cart-empty.php : your empty cart page
single-product.php : use to display your product details page
archive-product.php: The list of products according to category and date
content-product: Each product in the archive page grid

Step 6

Or you can create any page template and write the custom query and fetch the product loop and the code example is:

<!-- A sample product loop -->
<ul class="products">
	<?php
		$args = array(
			'post_type' => 'product',
			'posts_per_page' => 12
			);
		$loop = new WP_Query( $args );
		if ( $loop->have_posts() ) {
			while ( $loop->have_posts() ) : $loop->the_post();
				wc_get_template_part( 'content', 'product' );
			endwhile;
		} else {
			echo __( 'No products found' );
		}
		wp_reset_postdata();
	?>
</ul><!--/.products-->

woocommerce theme development tutorial step by step

woocommerce theme development tutorial step by step


Hope you have enjoyed the tutorial post for woocommerce theme development and please give your valuable comment

Thanks for reading

Share The Post On -

Add a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.