HostGator Web Hosting

Free WooCommerce Extensions that are sure to Enhance your eCommerce Site

As I’m writing this tutorial, the WooCommerce plugin has been downloaded a total of 1,471,547 times.  Just today (9/26/2013 at 2:00pm CST) it’s already been downloaded 3,981 times according to WordPress.org.  It’s no secret that WooCommerce has greatly increased the popularity of WordPress by making it possible for small business owners to create professional eCommerce sites on their own terms.  Brick and mortar stores that just a few years ago could not afford the cost of a web design firm are now able to sell their products online thanks to WordPress and WooCommerce.

New WordPress themes and add-ons (premium and free) built specifically for WooCommerce are launching each day.  In this tutorial, I’m going to highlight four free extensions for Woocommerce that I think are awesome and will benefit many eCommerce sites.  Specifically, I’m going to introduce you to free plugins that do the following; add video to product pages, customize pages without writing code, display a total savings badge, and add a grid/list toggle button to product archives.  Let’s start by introducing you to an extension that is sure to help increase your sales conversion rate via the use of video.

Free Extension 1 – Increase Conversions by Adding Videos to your Products with WooCommerce HTML5 Video

Imagine owning an eCommerce site that sells stand up paddle boards.  How would you structure your product detail pages so that they convert visitors into paying customers?  First of all, a well written and informative product description is an essential component, especially from an SEO perspective.  Great product images are also critical to achieving consistent paddle board sales.  However, that’s where most eCommerce site owners leave it… Long description, short description and product images.

What if you were to take it one step further and do something that your competitors most likely are not doing?  I’m talking about adding video at the product detail level with the free WooCommerce HTML5 video plugin…

Now envision your site visitors watching a video of a happy couple paddle boarding through emerald green water and seemingly having the time of their lives.  That’s going to create an emotional need for the product and push people to click the Add to Cart button…

WooCommerce HTML5 Video plugin

How to use the WooCommerce HTML5 Video Add-on

Step 1:  Install the WooCommerce Add-on.

In the WordPress admin go to Plugins > Add New > search for “woocommerce html5 video” > click “Install Now” > Activate the plugin

Step 2:  Embed or Upload your video.

Go to Products > find the product you want to add a video to and click Edit > scroll down to the “Product Data” section and click on the Video link > there you’ll have two options… you can Embed a video from YouTube or you can Upload a video from your computer > when finished click Update and the video will appear at the product detail level on your site.

Look at HTML5 Video plugin setting in WP admin

Important Notes:

  • If you choose to upload videos from your computer, the supported video formats are MP4 and Ogg.
  • This plugin works with all themes and all product types.
  • You can also download the plugin here…  Click Here to Download WooCommerce HTML5 Video

Watch our video below to learn how the HTML5 Video plugin will enhance your eCommerce site…

Free Extension 2 – WooCommerce Customizer

In our last tutorial, we showed you how to override WooCommerce template files via the use of a child theme.  Overriding files allows you to make deep customizations to any of the WooComm pages.  However, that method is somewhat advanced and does require editing PHP code.  The beauty of the WooCommerce Customizer plugin is that you can still make many customizations to your site without touching any code.

example of woocomm customizer plugin in action

How to use the WooCommerce Customizer add-on

Step 1:  Install the plugin.

In the WordPress admin go to Plugins > Add New > search for “woocommerce customizer” > install and activate it

Step 2:  Go to the plugin settings and make your customizations.

Once the plugin has been activated go to WooCommerce > Customizer > there you’ll be able to make updates to Shop Loop, Product Page, Checkout and Tax labels

List of customizations you can make with woocommerce customizer pluginYou can also download the plugin here…  Download the WooCommerce Customizer plugin

Watch our tutorial video below to see how to use the WooCommerce Customizer…

Free Extension 3 – Display Total Savings Amount with WooCommerce Smart Sale Badge

This free plugin beefs up the WooCommerce Sale badge functionality.  The extension automatically calculates and clearly displays the total savings your customers will receive for on sale items.  Seeing the actual savings amount is much more powerful that a simple sale badge so use this extension to help increase your sites’ conversion rate.  WooCommerce Smart Sale Badge works with all product types and all themes.  Using this plugin is simply a matter of installing and activating it.  When you put an item On Sale, the badge will display the total savings amount as seen in the screen capture below.

WooCommerce Smart Sale Badge Plugin

Click the following link to get the plugin… Click Here to download WooCommerce Smart Sale Badge

Watch our video below to see how easy it is to use the WooCommerce Smart Sale Badge plugin…

Free Extension 4 – WooCommerce Grid / List Toggle plugin

The WooCommerce Grid/List Toggle extension allows your site visitors to choose how they want to shop on your site.  The plugin adds a Grid / List toggle button to the Shop and Product Category pages.  With most themes, the Grid/List toggle button will display under the Default Sorting drop down.  Its easy to remove the default sorting drop-down from the shop page if you don’t want it to look too cluttered.  There is no setup / configuration required with this free plugin.  Simply install and activate it.

WooCommerce Grid / List toggle button

Click the following link to download the plugin…  Click Here to download WooCommerce Grid/List Toggle

Watch our video below to see the WooCommerce Grid / List Toggle plugin in action…

Please tell us about your favorite WooCommerce extensions and how you use them to enhance your site…  Share with us in the Upload WP Community Forums.

HostGator Web Hosting

24 COMMENTS

  1. HI Teddy,

    I have the Canvas theme from woothemes. I also have wooommerce installed. I want to sell both digital products and hard copy books. For some reason, woocommerce will not allow me to disable shipping information on digital products but at the same time keep the shipping functionality for my hard cover books. It makes me either select it across the board or disable this feature across the board. What if I need shipping info for my hard copy products, but want to disable this feature for people paying via paypal and downloading my virtual/digital products?

    • That's a great question Diamond. I created a tutorial video that shows you how to eliminate the required shipping fields in WooCommerce when you sell both digital and physical products and your customer wants to purchase only a digital download product. The main thing is that when you setup the digital download product you need to make it Virtual AND Downloadable. You do that by going to…

      Products > click on your digital product > scroll down to Product Data > select both "Virtual" and "Downloadable" check boxes

      Shipping methods will only show up if their is a physical product included with the digital download product. Watch our tutorial on "Eliminating Required WooCommerce Shipping Fields for Digital Download Products" here…

      http://youtu.be/xj2ZEIZEw38

  2. I am going to install one woocommerce site with mayashop theme.

    How I can insert a custom form box in product page with letter limitation.
    So that customers can write their short message in each products with limited alphabets (10 to 15)

    Thanx in advance
    PARMES

    • Hi Parmes,

      Thanks for your question. The easiest way to do it is probably via the use of a WooCommerce product extension. If you look through the available extensions chances are good you'll find one that provides the functionality you're looking for.

  3. Pinterest is huge in the world of online shopping. Even if a customer is not ready to purchase your product, they may wish to bookmark it for later or add it to one of their boards to show their friends. By giving customers the option to easily pin your content to their Pinterest boards, you give them a simple way to interact with your brand and gain more exposure for your products. The more boards your product link is on, the greater the number of people that will see it.

    The Pinterest Pin It Button extension for WooCommerce takes all the guess work and coding out of seamlessly integrating your products to your customers Pinterest pages. This extension for WooComm is very straight forward and easy to use. However, there is one small catch not listed in the documentation.

    To begin, visit the WooCommerce extension library, sort by “free” and locate the “Pinterest Button” extension. Download, install and activate your new plugin. Then go to your first product listed and under “Product Data” there will be a new Pinterest option. If you click this, you will see the box to enable the button is activated. You may however notice, the button does not yet appear on the front-end product detail page of the site. To fix this you need to Update the product. You must do this individually for every product you wish the button to appear on.

    Watch Adam B demonstrate how the "WooCommerce Pinterest Button Extension" can enhance your eCommerce site…

    http://youtu.be/F2EfvZbqkek

  4. The easiest way to limit / control the display of information at the product detail level is via the use of the "WooCommerce Product Details Customiser" extension. This extension has a five star rating and it allows you to display or hide main components such as related products, tabs, up-sells and product images.

    Watch our tutorial video to see how easy it is to use the WooComm Product Details Customiser extension…

    http://youtu.be/cfhGCxguYVk

  5. Loyal customers know your current product catalog well. When those repeat customers return to your site they may only be interested in your latest listings. With the "WooCommerce New Product Badge" extension, you can easily display a bright red “NEW” badge below the product thumbnail images. This free extension allows you the eCommerce site owner to determine the number of days that a product should be considered New.

    Take a few minutes to watch our tutorial video on the WooCommerce New Product Badge extension for WooComm…

    http://youtu.be/5Zp-qJXUPpk

  6. The WooCommerce Product Archive Customiser extension offers a simple and efficient way to change your product display pages. The plugin is rich in functionality and includes features found in the new badge and grid list toggle plugins. With this free extension, you'll be able to easily customize over 10 product display page options including number of columns, categories, stock and sale flashes.

    Watch Adam demonstrate how to use the "WooCommerce Product Archive Customiser" extension…

    http://youtu.be/59vol-qAI_U

  7. Hello,
    I am soo happy with all your video tutorials, THANK YOU FOR THEM!
    I have two questions, I already download the Magnifier Plugin and it's not working properly, the slider is working perfect, but the "mouse hover" it's not working. If I click in the picture another page appear and I can click the pic and it goes zoom, but if I pass the mouse over the thumbnail picture or any other, nothing happen… Can you please help me with this?

    My second question is I am working with word press and Elegant themes (eStore template), the slider in the home page brings some small squares to ad pics… I create and upload with WooCommerce the slider pic in the "Featured Product Alternative Image" with the correct size, but if I upload a picture in the "Featured Image" area, then the "Featured Product Alternative Image" dissapear and it's replaced by the small one creating a bad look of the slider… Can you also help me with this question?

    Best Regards,
    Carmen
    http://www.journeyangels.com

    • Hi Carmen,

      First of all, thanks for the positive feedback! Your support and encouragement is really appreciated. The Magnifier plugin issues could be caused by the eStore theme or by other plugins. If you could please post your questions in the Upload WP Community Forums here… http://uploadwp.com/community/index.php

      And provide screen captures / as much details of the issues as possible we'll do our best to help find solutions. Thanks

  8. Hi there, first, thanks for the links n vids 🙂
    I am currently working on a shop, i am new to wp and woocommerce I want to add an input text to the attributes/variables, it has everything for this yet doesn't seem to work. It is to customize textiles with embroidery so it's just text fields. Have you found a work around or plugin that covers this?

  9. Hi Teddy,
    Having prob with product column. How many number of column want to add. I want to do two things and couldn’t figure it out.
    1. How to remove sidebar from my Home/Shop page.(First page)
    2. How to increase # of columns of product per page
    I have tried so many different method from your website tutorials but nothing is working. I have created child theme and test it but didn’t work. Also tried function from your website but having problem. It was showing first row with 5 items but then second row shows one only.
    So not sure how to fix the issue. I don’t know what I’m doing wrong. Please please help. Thank you so much….
    Erfan.

  10. Hi, thank you for all the tutorials.. I couldn’t have set my website up without them.. I need some help now that my product is selling like hot cakes.. I use stamps.com, I need the website to calculate shipping costs and send tracking info to their emails.. Is this possible? I also want to spruce up the look of the home page with a picture at the top then the business name below. Any suggestions on that? Thank you so much for your help.. Your awesome ..

  11. I have installed both WooCommerce Product Badge and WooCommerce Smart Sale Badge. The New button shows but now that button is not the same color as my site, have no clue where to change it. The smart sale badge is not working, I have also added a new product to start the proces from fresh, still not showing up.

LEAVE A REPLY