How to Setup ECommerce for WordPress Website
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 “How to Setup ECommerce for WordPress Website” 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 WooCommerceYou 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.
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 – 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.
|
1 2 3 4 5 |
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 “woocommerce” 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 “archive-product.php” and “single-product.php” as shown below to match up with the Openstrap Theme.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?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(); ?> <?php $col = 9; ?> <div class="col-md-<?php echo $col;?>" role="content"> <div id="primary" class="site-content"> <div id="content" role="main"> <?php do_action('woocommerce_before_main_content'); ?> <?php while ( have_posts() ) : the_post(); ?> <?php woocommerce_get_template_part( 'content', 'single-product' ); ?> <?php endwhile; // end of the loop. ?> <?php do_action('woocommerce_after_main_content'); ?> </div><!-- #content --> </div><!-- #primary --> </div><!-- .col-md-<?php echo $col;?> --> <?php get_sidebar('product'); ?> <?php get_footer(); ?> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<?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(); ?> <?php $col = openstrap_get_content_cols(); $col = 9; $os_layout = of_get_option('page_layouts'); ?> <?php get_sidebar('shop'); ?> <div class="col-md-<?php echo $col;?>" role="content"> <section id="primary" class="site-content"> <div id="content" role="main"> <article class="article"> <?php do_action('woocommerce_before_main_content'); ?> <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?> <h1 class="page-title"><?php woocommerce_page_title(); ?></h1> <?php endif; ?> <?php do_action( 'woocommerce_archive_description' ); ?> <?php if ( have_posts() ) : ?> <?php do_action( 'woocommerce_before_shop_loop' ); ?> <?php woocommerce_product_loop_start(); ?> <?php woocommerce_product_subcategories(); ?> <?php while ( have_posts() ) : the_post(); ?> <?php woocommerce_get_template_part( 'content', 'product' ); ?> <?php endwhile; // end of the loop. ?> <?php woocommerce_product_loop_end(); ?> <?php do_action( 'woocommerce_after_shop_loop' ); ?> <?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?> <?php woocommerce_get_template( 'loop/no-products-found.php' ); ?> <?php endif; ?> <?php do_action('woocommerce_after_main_content'); ?> </article> </div><!-- #content --> </section><!-- #primary --> </div><!-- .col-md-<?php echo $col;?> --> <?php get_footer(); ?> |
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 ‘product’ and ‘shop’. We will define that in our functions file only if the plugin is active.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
register_sidebar( array( 'id' => 'openstrap_shop_sidebar', 'name' => __( 'Shop Page Sidebar', 'openstrap' ), 'description' => __( 'This sidebar is located on the right-hand side of Shop Page.', 'openstrap' ), 'before_widget' => '<div id="%1$s" class="woocommerce-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="woocommerce-widget-title">', 'after_title' => '</h4>', ) ); register_sidebar( array( 'id' => 'openstrap_single_product_sidebar', 'name' => __( 'Single Product Sidebar', 'openstrap' ), 'description' => __( 'This sidebar is located on the right-hand side of Single Product Page.', 'openstrap' ), 'before_widget' => '<div id="%1$s" class="woocommerce-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="woocommerce-widget-title">', 'after_title' => '</h4>', ) ); |
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-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
add_filter( 'get_product_search_form' , 'woo_custom_product_searchform' ); function woo_custom_product_searchform( $form ) { $form = '<form class="form-inline" role="form" method="get" id="searchform" action="'.esc_url( home_url( '/' ) ).'"> <div class="input-group"> <input type="text" class="form-control" name="s" id="s" placeholder="'.__( 'Search Products..', 'openstrap' ).'"> <input type="hidden" name="post_type" value="product" /> <span class="input-group-btn"> <button type="submit" class="btn btn-primary">'.__( 'Search', 'openstrap' ).'</button> </span> </div> </form>'; 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.
I also highly recommend you to try this link: https://www.youtube.com/watch?v=cWL_TEirLGE. It will help you explain everything
you want especially for Setting up an eCommerce website.
Since I’m looking for a tutorial like this, thank you with all my heart for him …It fits perfect for my theme
Hi there, I just use your snippet for Openstrap and Woocommerce, one word: Thanks!
I’m having only a small problem, I don’t know why but the pagination doesn’t work 🙁 any idea for help me?
Sorry, here is the page website http://mastropino.synology.me/thebox/categoria-prodotto/pneumatici/
As you can see the pagination for sub category doesn’t appear 🙁
Forgive my last comment, I fixed by myself!
Thanks again mate, you are my hero today!
Not really a comment but a question: HELP!
I have posted on WP/Woo support forums, theme developer, but NO answers:
1) I have added a T-Shirts and Jerseys page and added them to the sub-menu as well. When I visit these two pages, they are regular pages, and NOT Shop pages with no “Add To Cart” buttons. What have I not done?
2) I would like to change the font color of “Add to Cart” and the box border. I found the code that needs to be inserted into the functions.php – but where do I paste this code?
Thank you very much! Cannot sleep at night with all these Woo issues/problems.
Hi Charlie,
Have you added those as woocommerce categories? If not please add and update your menu with this category. Regarding, “Add to cart” color I think you need to update your styles.css and not functions.php
e.g.
.woocommerce div.product form.cart .button, .woocommerce #content div.product form.cart .button, .woocommerce-page div.product form.cart .button, .woocommerce-page #content div.product form.cart .button {color: red;
background-color: blue;
}
This will be helpful for me as I’m developing a site with ecommerce functionality. Will be looking forward to your next article Pavan!
Thanks Jon. Will update you on next article