Integrating WooCommerce With Visual Composer

I will be the first to admit that sometimes I can be a little stuck in my ways. Yes, I like to do things the way I’ve always done them. So when my friend Paul sent over an idea he had for a post for Market Blog about combining WooCommerce and Visual Composer, I was a bit hesitant.

After admitting to Paul that I had in fact never used Visual Composer (I like to create my own themes using the WP StartBox framework), I thought this might be an interesting experiment. Take an old curmudgeon (me) and pair it with a very popular tool (Visual Composer has well over 50,000 sales on CodeCanyon) and we’ll see just how well it handles the challenge of WooCommerce.

My research quickly led me to discover that, if you want these two plugins to play nicely, you’ll need the WooCommerce by Anps add-on to Visual Composer. If you have some knowledge of how WordPress works, you might be able to get by without the add-on. That said, it kind of defeats the purpose of using Visual Composer. After all, it’s meant to do all the heavy lifting of creating awesome, responsive layouts in a very intuitive way. With the WooCommerce by Anps add-on costing a mere $16, why not go all the way and fully integrate things?

With the proper tools in place, I started work on my fictional store. As Visual Composer is said to be compatible with any theme, I decided to give this a shot with my typical StartBox child theme.

Here’s what I started out with:

As you can see, not much is going on yet. But I’ve added a few products to WooCommerce and want to see just how easy it’s going to be to feature them on my homepage. So I turned on Visual Composer’s Frontend Editor to see what I could accomplish:

Using the Featured Products element, I was able to decide how many products I wanted to display, how many columns I wanted to use and how to sort them:

Tip: Make sure you mark the featured products inside WooCommerce you want to use for this element in Visual Composer. Otherwise, you’ll wonder where your products are, like I did 🙂

So, in about 30 seconds, I had my featured products on the home page. Sweet!

Beyond just featured products, you can easily add an individual product or combination of products you wish to show. Display them in columns or one per row. You may also show related products, top-rated or best-selling products.

You also have the ability to add shortcodes for WooCommerce’s My Account, Cart and Checkout pages. Pretty much all the functionality that comes with WooCommerce out-of-the-box is available at the click of your mouse.

Note that the WooCommerce by Anps add-on will not actually help you to create products. You’ll still have to go into the WordPress backend and create new products the old-fashioned way with WooCommerce.

I have to say, this is all very easy to use. I can see it being a huge help for small business owners or hobbyists who don’t necessarily know how to code and don’t have the budget to hire a professional developer.

Using Visual Composer along with the WooCommerce by Anps add-on can certainly take some of the mysticism out of creating an inviting eCommerce experience. This setup allows you to create an appealing WooCommerce site without having to become an expert.

I can also see why many web professionals seem to like Visual Composer. It allows you to rapidly create layouts and add compelling content. There are plenty of reasons to like it.

If you’re looking to set up shop on the web, grab yourself copies of Visual Composer, the WooCommerce by Anps add-on, and a great WordPress theme. You might be surprised at how quickly you can be up and running.