opencodez

How to Setup ECommerce for WordPress Website

Pavan

Every business old or new, need a strong online presence to reach out to millions of people across the globe. If you are planning to sell something then mere creating a super cool website wont suffice, you need to adopt an eCommerce platform and setup a shop online. The article xHow to Setup ECommerce for WordPress Websitex will take you through the exact process that is required to setup your own online shop.

There are many ecommerce plugins or platforms available in market like ZenCart, Open Cart, OSCommerce and Magento etc. All are good in their own way but being an WordPress fan, I am looking for a solution that is easily fit in to WP framework and precisely for this point WooCommerce stands out clearly on top of all. Here we will see how and where to get woocommerce, how to setup, how to update your theme for correct pages.

Get WooCommerce and Install

Amazingly WooCommerce is freely available on their official site as well as WordPress Plugins Repository. You can simply go and download a copy for yourself. It is a fully open-source e-commerce plugin for WordPress. It offers a stable and secure platform built right on top of the WordPress Core making it easy to customize setup e-shop easily.

Download WooCommerce

You can install this plugin either manually by uploading the unzipped archive to your plugins directory or you can install plugin automatically from WP Repo. I would prefer automatic install from your WP Dashboard, as it saves lots of trouble involved in uploading plugin files to your host. The moment you activate your plugin you will be presented with a notice on top of your page.

x

Nothing to worry about this. This is not going to break you sites functionality, it will only affect layout of your newly setup shop. To remove this notice, you need to add woocommerce support in your theme.

WooCommerce x eCommerce for WordPress Theme

Most of the WooCommerce templates will integrate nicely with WordPress themes. Sometimes WooCommerce content wrappers do not match your chosen themes and it may break your layout on WooCommerce pages and shifting your sidebars into incorrect positions. This layout issue may affect the shop page, the single product page and the taxonomy pages (categories and tags) because WooCommerce uses templates of its own. Other “pages” (checkout, cart, account) are not affected because they use your theme’s page.php template.

 update functions.php

This step is required and you need to update functions.php from your themes folder with following code. Here I am adding woocommerce support only when the WooCommerce plugin is active.

if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {

add_theme_support('woocommerce');

}

Override WooCommerce Templates

We would need to override the templates for shop and single product pages. By default the plugin uses templates that are available in plugins directory. But we can simply override that by creating template in your theme folder with same name. Just create a directory named xwoocommercex and copy the templates you want to override from plugins folder and changes them as you please. But remeber to use woocommerce specific functions and wrappers. I have overridden xarchive-product.phpx and xsingle-product.phpx as shown below to match up with the Openstrap Theme.

x?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays single product of woocommerce
 * by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package Openstrap
 * @subpackage Openstrap
 * @since Openstrap 0.1
 */

get_header(); ?x

x?php $col = 9; ?x
xdiv class="col-md-x?php echo $col;?x" role="content"x
	xdiv id="primary" class="site-content"x
		xdiv id="content" role="main"x
			x?php do_action('woocommerce_before_main_content'); ?x
				x?php while ( have_posts() ) : the_post(); ?x
					x?php woocommerce_get_template_part( 'content', 'single-product' ); ?x
				x?php endwhile; // end of the loop. ?x
			x?php do_action('woocommerce_after_main_content'); ?x
		x/divxx!-- #content --x
	x/divxx!-- #primary --x
x/divxx!-- .col-md-x?php echo $col;?x --x
x?php get_sidebar('product'); ?x
x?php get_footer(); ?x

x

x?php
/**
 * The template for displaying Product Archive pages.
 *
 * Used to display archive-type pages if nothing more specific matches a query.
 * For example, puts together date-based pages if no date.php file exists.
 *
 * If you'd like to further customize these archive views, you may create a
 * new template file for each specific one. For example, Openstrap already
 * has tag.php for Tag archives, category.php for Category archives, and
 * author.php for Author archives.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package Openstrap
 * @subpackage Openstrap
 * @since Openstrap 0.1
 */

get_header(); ?x

x?php 
	$col =  openstrap_get_content_cols();
	$col = 9;
	$os_layout = of_get_option('page_layouts'); 	
?x
x?php get_sidebar('shop'); ?x
xdiv class="col-md-x?php echo $col;?x" role="content"x
	xsection id="primary" class="site-content"x
		xdiv id="content" role="main"x
		xarticle class="article"x			
				x?php do_action('woocommerce_before_main_content'); ?x
					x?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?x
						xh1 class="page-title"xx?php woocommerce_page_title(); ?xx/h1x
					x?php endif; ?x
					x?php do_action( 'woocommerce_archive_description' ); ?x
					x?php if ( have_posts() ) : ?x
						x?php do_action( 'woocommerce_before_shop_loop' ); ?x
						x?php woocommerce_product_loop_start(); ?x
							x?php woocommerce_product_subcategories(); ?x
							x?php while ( have_posts() ) : the_post(); ?x
								x?php woocommerce_get_template_part( 'content', 'product' ); ?x
							x?php endwhile; // end of the loop. ?x
						x?php woocommerce_product_loop_end(); ?x
						x?php do_action( 'woocommerce_after_shop_loop' ); ?x
					x?php elseif ( ! woocommerce_product_subcategories( array( 'before' =x woocommerce_product_loop_start( false ), 'after' =x woocommerce_product_loop_end( false ) ) ) ) : ?x
						x?php woocommerce_get_template( 'loop/no-products-found.php' ); ?x
					x?php endif; ?x
				x?php do_action('woocommerce_after_main_content'); ?x

		x/articlex

		x/divxx!-- #content --x
	x/sectionxx!-- #primary --x
x/divxx!-- .col-md-x?php echo $col;?x --x
x?php get_footer(); ?x

Add Special Sidebar Widget Area

As mentioned earlier shop, single product page may break the layout. We will declare special widget areas that will be used on these woocommerce pages. You can see in above files I am using a different sidebar xproductx and xshopx. We will define that in our functions file only if the plugin is active.

	register_sidebar( array(
			'id' =x 'openstrap_shop_sidebar',
			'name' =x __( 'Shop Page Sidebar', 'openstrap' ),
			'description' =x __( 'This sidebar is located on the right-hand side of Shop Page.', 'openstrap' ),
			'before_widget' =x 'xdiv id="%1$s" class="woocommerce-widget %2$s"x',
			'after_widget' =x 'x/divx',
			'before_title' =x 'xh4 class="woocommerce-widget-title"x',
			'after_title' =x 'x/h4x',
		) );

	register_sidebar( array(
			'id' =x 'openstrap_single_product_sidebar',
			'name' =x __( 'Single Product Sidebar', 'openstrap' ),
			'description' =x __( 'This sidebar is located on the right-hand side of Single Product Page.', 'openstrap' ),
			'before_widget' =x 'xdiv id="%1$s" class="woocommerce-widget %2$s"x',
			'after_widget' =x 'x/divx',
			'before_title' =x 'xh4 class="woocommerce-widget-title"x',
			'after_title' =x 'x/h4x',
		) );

Now, at this stage You have successfully added a templates that works well with your chosen theme. Just explore the Plugin and setup your shop. Add products, set categories, define payment gateways and lots more you can do with the help of woo. You can even make the look, feel and functionality better with the help of hooks. Woocommerce support variety of hooks and filters that you can use to enhance the user experience. One such filter is for Product Search Box, that comes by default with plugin-

add_filter( 'get_product_search_form' , 'woo_custom_product_searchform' );

function woo_custom_product_searchform( $form ) {
	$form = 'xform class="form-inline" role="form" method="get" id="searchform" action="'.esc_url( home_url( '/' ) ).'"x	
		xdiv class="input-group"x
		xinput type="text" class="form-control" name="s" id="s" placeholder="'.__( 'Search Products..', 'openstrap' ).'"x
		xinput type="hidden" name="post_type" value="product" /x
		xspan class="input-group-btn"x
			xbutton type="submit" class="btn btn-primary"x'.__( 'Search', 'openstrap' ).'x/buttonx
		x/spanx
		x/divx
	x/formx';		
	return $form;	
}

I hope you find this article to setup ecommerce for wordpress website useful. Please watch for our next article that will cover WooCommerce Plugin Functionality.