woocommerce theme development tutorial step by step
WordPress woocommerce theme development: woocommerce is the most popular e-commerce plugin for WordPress, we will learn how to develop a WordPress woocommerce theme step by step in this tutorial and will make a proper e-commerce theme, first we need to know the structure to create an e-commerce theme, the header contains the cart link with price and total item, the menu content for a my-account link, the homepage contains 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 contains the cart value and total cart item, and sometimes it contents the mini cart description and for that write the code
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 products with HTML according to your design with a post per page with price template and add to cart template and after the end of the loop don’t forget 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 the 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 the 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
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 abcdef then open abcdef) and make a folder name woocommerce and inside that paste the copied files.
now change the design of the templates and make change the default HTML structure of woocommerce display portion here is the most 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
Hope you have enjoyed the tutorial post for woocommerce theme development and please give your valuable comment
Thanks for reading