Learn how to build an E-commerce site using
Woo Commerce & Visual Composer Plugin.
Here is workshop outline on how to create an WordPress Ecommerce site to match a Magento.
1) You will need a WordPress demo site to create a mockup copy of the Magento Site.
2) You will need to learn the following skills :
A. WordPress Content Creation with Pages & Posts
B. Working with a WordPress Theme that is compatible with Woo-Commerce Plugin.
There are several free WordPress themes that are good starter sites. for Ecommerce
3) The three important plugins you need to learn are :
A. Revolution Slider ( Homepage slide show )
B. Visual Composer Page Builder
C. Woo-Commerce Plugins using Shortcode
Here is a free Youtube Tutorial on how to use Revolution Slider. See sample demos here
Another important skill to learn is using Woo-Commerce Plugin..Here is a free tutorial
Watch how to build a powerful E-Commerce Site using only two plugins Visual Composer & Woo Commerce!
For demo purposes, we will use the content from the Magento Site https://www.cabinets.com/kitchen-cabinets
With Visual Composer now called WPBakery Page Builder for WordPress, we can match the look of the page below.
The Visual Composer Backend Editor
The backend editor includes easy to use options to add page elements or select page templates
If you click on the + symbol the Visual Composer will open a window to add elements. Here you will find all of the Visual Composer and Total page building modules. To add a page element simply click on it.
Woo Commerce Shortcodes
To be able to see products on a page or post, you will need to add Woo Commerce Shortcodes.
Page Shortcodes ↑ Back to top
[woocommerce_cart] – shows the cart page
[woocommerce_checkout] – shows the checkout page
[woocommerce_my_account] – shows the user account page
[woocommerce_order_tracking] – shows the order tracking form
Products
The products shortcode is one of our most robust shortcodes, which can replace various other strings used in earlier versions of WooCommerce. For WooCommerce version 3.1 and lower, please use this document instead.
The [products] shortcode allows you to display products by post ID, SKU, categories, attributes, with support for pagination, random sorting and product tags, replacing the need for multiples shortcodes such as: [product_category], [featured_products], [sale_products], [best_selling_products], [recent_products], [product_attribute], and [top_rated_products], which are needed in versions of WooCommerce below 3.2. Review the examples below.
Woo Commerce Plugin
After you add product categories and products, the next step is to add or buy a product filter plugin. These are sample screenshots on how to use the product filters on the sidebar or footer menu.
