How To Make Money Customizing WooCommerce
E001 - Sean Barton - Woo Layout Injector
Ecommerce is huge and growing bigger every year. From huge stores like Amazon and WalMart to small startups, more and more people are setting up shop online.
In fact, online sales reached almost $2 trillion dollars in 2016, a whopping 23.7% growth from the previous year. And it doesn’t look like it’s going to stop anytime soon. Emarketer.com predicts sales will double to over $4 trillion by 2020.
With all this growth dozens of store owners are setting up shop every week. Many of which are using the free WordPress plugin ‘WooCommerce’ to power their online stores.
With over 21 million downloads, WooCommerce now powers over 28% of all online stores, making it the most popular e-commerce platform on the web.
This has created huge opportunities for freelance designers, developers, and WordPress experts.
Despite the clean design that ships by default with the plugin, the simple truth is that any e-commerce store requires extensive testing in order to optimize sales and conversions.
For example, online retailer RIPT Apparel increased their online sales by 63% by simply adjusting the size, position and color of their ‘Buy Now’ button.
Many other elements, such as product description, price alignment and product image size can have a huge effect on sales.
In fact, a study by ConversionXL Institute showed that image sizes significantly affect perceived value depending on the item being sold.
Fashion items, surrounded by more white space, performed better with smaller images, while tech products favored larger images.
Many stores, however, fail to test even the most basic of elements and miss out on thousands of dollars of lost revenue.
And WooCommerce doesn’t make it particularly easy.
In order to tweak the layout and design of many of the built-in pages, you need a pretty extensive set of coding skills to modify even the basic configuration.
Luckily, though, with the power of Divi’s drag-and-drop builder and a nifty little plugin you too can make money creating custom WooCommerce layouts for your clients, no coding required.
Imagine how happy your customers will be if you can double, triple or even quadruple their online sales. Not only will you seem like an optimization wizard but you’ll be able to command a healthy sum for your efforts.
In this article, you will learn how to test which layouts for the WooCommerce single product pages and shop pages produce the highest sales.
There is nothing you can do ‘out of the box’ with Divi & WooCommerce to make the product pages look like anything other than what you get by default.
You are stuck with the basic layout:
If you want to change the design and say, move the ‘Add to Cart’ button below the product title, use a three-column layout or move the product image to the right hand side you are forced to open up the code editor.
WooCommerce has dozens of ‘hooks’ that can be used to get the job done but the process is time-consuming and tedious.
What is an Action Hook?
In WooCommerce various functions are ‘hooked’ onto specific locations in the template files. In order to add, remove or change the position of the various WooCommerce elements (add to cart, related products, star rating etc.) one would need to add additional ‘actions’ onto those hooks.
Without a decent understanding of PHP and a familiarity with WordPress development, it’s probably not even worth attempting.
For the rest of us, it’s much easier to use a plugin. While there are several available most of them have been built for Visual Composer.
Luckily, though, Sean Barton has created a very helpful plugin called the ‘Woo Layout Injector’ specifically for the Divi Page Builder.
Sean Barton is a freelance PHP website Developer based in Crewe, Cheshire. He is one of the most prolific plugin developers in the Divi Community. More details about his work and services can be found on his website Tortoise IT. All of his plugins can be purchased via Elegant Marketplace.
What is the Woo Layout Injector?
The Woo Layout Injector makes customizing the WooCommerce single product pages and archive pages (shop, category, tag) a breeze.
Upon activating the plugin a whole range of new modules become available.
Each module represents one of the WooCommerce elements and can be positioned in any way you like using the Divi Page Builder interface we all know and love:
Furthermore, each of the ‘ET Woo’ modules can be further customized with extensive options within the module settings.
For example, the ‘ET Woo Product Image’ module allows you to adjust the image size, toggle on or off the thumbnails, adjust the thumbnail columns and even link the images to the product pages.
Additionally, in the ‘Advanced Design Settings’ there are further options for settings such as background color, borders and the ability to set a custom margin.
For more granular control you can even set a custom CSS class or ID and tweak to your heart’s content.
This unrivaled level of control over the WooCommerce layout makes this plugin the perfect option for any freelancer.
In just a few minutes you’ll be able to optimize your client’s storefront and maximize their conversion rates like a true professional.
What Modules Are Available With the Woo Layout Injector?
The plugin ships with no less than eighteen custom WooCommerce modules:
How Does The Woo Layout Injector Work?
The plugin gives you the ability to customize both the single product pages and the archive pages (shop page, category pages and tag pages).
This is achieved by creating custom layouts within the Divi Library which are then linked to the appropriate WooCommerce template file via the plugin settings.
What is the Divi Library?
The Divi Library lets you store your favorite layouts, sections, rows or modules for later use. Whenever you save an item to your Divi Library, you can access it easily from within the modal window when adding a new layout, module, section or row to the page.
For the single product pages it works like this:
All of the custom WooCommerce layouts are created within the Divi Library itself. It is here that you can add the modules in any configuration you desire.
After creating the layout it is then linked to the appropriate WooCommerce template file via the Woo Layout Injector’s settings screen.
So first navigate to the Divi Library and click ‘Add New’ to create your first layout:
You can call the layout anything you want, but to keep things simple, we will use the name ‘Woo Single Product’ so it’s easy to refer to later.
Set the template type to ‘Layout’ and check the ‘Global’ box:
You will now see the Divi Builder and can start designing your layout. Any of the section types and column options can be used for your design.
To start adding the WooCommerce single product elements click on ‘Insert Module(s)’.
Once you have added all of the Woo Modules for your layout it’s time to ‘connect’ the layout to WooCommerce.
This is done via the plugin settings:
Simply choose the layout that created in the first step and link it to the single product page.
Now you have a global layout that will be displayed on all of your single product pages.
This may be the best option as customers will likely appreciate a standard format across the shop.
However, it’s also possible to create custom layouts for each product category or tag. To achieve this simply create another layout with the WooCommerce modules and link it to the appropriate category or tag.
And, additionally, if the need calls for it, specific layout configurations for specific products.
This can be set on the product page itself. The plugin adds an additional meta box to the product pages that allows you to choose which layout for that unique product:
Creating custom layouts for the archive pages works in a similar way but this time you have to create two layouts:
The first layout is the ‘Loop Item’. This creates the layout for each instance of the product as displayed on the archive pages:
The second layout is the archive page itself which uses the ‘Loop Archive’ module to display all of the products.
What is the WordPress Loop?
The loop is used in WordPress themes and plugins to display a list of posts (or in this case products) on a page. It ‘loops through’ all of the items, displays them and keeps checking for further instances until complete.
For the loop item you can choose from any of the custom WooCommerce modules. For example:
For the archive page itself you can add any of the standard Divi modules but must include the ‘ET Woo Loop Archive’ module for the products to display…
In the general settings for this module you simply need to select the loop layout you previously created:
And then, finally, link it all together on the plugin settings page:
You can set custom layouts for the shop page, category archives and tag archives. Each category or tag can be overridden with additional custom layouts.
The Woo Layout Injector is a must-have plugin in any freelancer’s toolkit. Not only does it give you unparalleled control over the WooCommerce product and archive pages but it saves many hours of custom coding.
Providing your clients with real-time testing and optimization is a proven path to making money with Divi. By increasing conversion rates you have the power to generate additional profits for your clients and in return generate a substantial income as an e-commerce optimization expert.