Loads and loads of you are buying and loving Sean Barton’s plugin for the Woo Layout Injector. Based on the customer report tickets we realized that the users who could be called designers (as opposed to developers, ie the Eileen’s of the community) were struggling and needed a guide. In comes the fantastic Randy A. Brown to our rescue. He spent a good long time going through the plugin and creating the complete Woo Layout Injector Users Manual. I am including the text in this blog post, but if you want the full manual, download it here and within the 22 pages you will find many images to really clarify the explanations. Randy also included two JSON files for product pages and archive pages to help you jump start your design process.
Selfishly I wanted this Manual, as I am already working on some e-commerce pages for clients. Which reminds me, Randy has created two JSON files for you to download and use with the plugin.
- Get the Woo Layout Injector Plugin
- Download Divi Builder Layouts Woo Archive List JSON File & Divi Builder Layouts Woo Product Example JSON File
- The Ultimate Manual on the Woo Layout Injector
- Visit the Woo Layout Injector Product Page for a Video Interview with Sean and watch him explain / set up product pages.
The Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout that you’ve created in your Divi library. Create a layout to use for every product page, for a specific category or tag, or override the default layout on the page level. In this manual, we’ll take a look at what it can do and provide the information you need to get started quickly.
The plugin is easy to use, requiring only a few steps to display your own layouts:
- Install and activate the plugin
- Create Divi Layouts in the Divi Library using the new WooCommerce modules
- Choose the default layouts, categories, and tags in the Settings page
- Choose specific layouts within each individual page
Let’s look at each in more detail.
1. Installation and Activation
Upload and activate the plugin. Make sure you have the WooCommerce plugin installed.
Go to WooCommerce in the dashboard and select Woo Layout Injector. The first item is called Plugin Licensing. Enter your license key and click Save License Key.
2. Creating a Layout
Layouts are created in the Divi Library. Go to the Divi Library within the Divi menu in the dashboard. Select Add New.
Name the template and choose Layout for the template type. Select Submit.
This will open the Divi Builder where you can create your layout. Insert your columns and start adding the new WooCommerce modules to build your custom layout.
Divi Builder Modules
Each of the WooCommerce elements has been made into a module within the Divi Builder, for a total of 18 modules that you can drag and drop to build the desired layout. Most are self-explanatory. We’ll look at a few in detail.
As you can see in this example you can use any of the Divi modules in your product layout.
3. Choose Default Layouts
The settings page is located within the WooCommerce dashboard menu. These are global settings where you can choose the default layouts for products, archive pages, categories, and tags. You can override these for each product if you want. We’ll see this in step 4.
General Settings include:
Admin test mode – preview a layout before it goes live.
Disable WooCommerce Image Zoom – keep the product image from zooming on hover.
Disable Cart Cross Sell – turn off similar products.
Add to Cart button label – change the text on the Add to Cart button.
Placeholder Image URL – choose a default image that will display as a placeholder if there isn’t a product image selected.
Product Page Layout
Product Page Layout – choose the layout that will display by default.
Category/Tag Overrides – choose a layout for each category or tag. I added a category and tag called “Watch”. You’ll see all of your categories and tags in the list. You can choose a different layout for each category and tag.
Shop Page / Product Archive / Product Categories / Product Tags Layout
Shop Page / Product Archive / Product Categories / Product Tags Layout – choose the default archive layout for the shop page, category archives, and tag archives.
Category/Tag Overrides – choose an archive layout for each product category and tag individually. I have two categories – Watch and Belt. Each category has its own drop-down box. All of your products categories and tags will appear in this list.
4. Choose Layouts Per Page
A new feature is added to the Product page (on the right side) called Woo Layout Injector. This will override the default layout. Simply select your layout from the list that you want to display for this product.
After selecting the layout from the Woo Layout Injector drop-down box, the product page now uses the layout you built in the Divi Library. You can make changes to this layout and those changes are automatically reflected in every product that uses this layout.
Each of the WooCommerce elements has been made into their own module so you can arrange them anyway you want within your layouts. Most modules are self-explanatory and all use the familiar Divi settings. Here’s a look at those that might need more information.
Additional Info Tab
The Additional Info Tab module displays the information from Woo attributes.
You can see the addition info tab content in this example under the heading Additional Information. It displays custom attributes that I’ve added to the product.
Woo General (legacy)
The Woo General (Legacy) module contains only the title, price, description, quantity, add-to-cart button, categories, and tags.
It provides the features to give you a basic Woo layout, but also lets you add your own header, footer, column layout, etc., to give you a head-start on creating a layout. I recommend using the individual modules as they give you more control, but this is a good place to start if you want this layout.
Woo Loop Archive
The Woo Loop Archive module creates archive pages using layouts that you’ve made. This module is used on a page rather than in a layout that you create in the Divi Library.
“Loop” is a confusing term. It just means that the module will display a list of products – similar to the Shop Module.
Create a layout for the loop to display in the Divi library as normal. You’ll select this layout from the Woo Loop Archive module. I’ve created a simple layout that includes the product title, thumbnails, and an excerpt with read more button.
Create a page that will display your archive list and drop the Woo Loop Archive module within your Divi layout.
Within the Loop Archive module select the layout in the Loop Layout dropdown box. Next, select the layout design. Your choices are List and Grid. If you choose Grid, select the number of columns the grid will display. You can choose 2, 3, or 4 columns.
You can create a custom query if you want more control. Enter the number of posts to display, the offset number (this is helpful if you’re displaying another product on the page), and taxonomies.
The module will display the layout you created using the layout design you choose. I’ve chosen a 2-column grid layout.
To set the page as the archive, go to Woo Layout Injector settings in the WooCommerce dashboard menu. Scroll to Shop Page / Product Archive / Product Categories / Product Tags Layout and choose the page within the dropdown box. I’ve set a layout called archive list as the Category Archives page. Now when the category is clicked this is the page that will load.
Here’s a list of the common problems and their solutions. If something isn’t working as expected please check this section for a solution.
This plugin doesn’t support global modules. If you add a global module to a layout it breaks the page.
You can still use global modules, but you’ll need to disable the global feature.
Right-click on the global module and then click Disable Global.
The module is no longer global (which means I will change the admin label), but all of the global features for this module up to this point are intact.
Third-party plugins don’t work in the visual builder. Any layouts that include Woo Layout Injector modules will show No Results Found if you try to view it using the Visual Builder. Don’t worry though, they are visible in the normal Divi Page Builder view. This is normal and is expected.
If your product isn’t showing the layout you wanted, make sure that you’ve selected the layout in the Woo Layout Injector dropdown box to the right of the editor. You’ll have to create the layouts first.
You have several options for archive pages. You can create a generic layout to cover all types of archives, or create different archive page for the shop, product category archive, tag archive, or individual terms.
Shop Page / Product Archive / Product Categories / Product Tags Layout
There is a known bug that was introduced in Woo 3.0 that causes the hover zoom animation to sometimes work and sometimes not. You can disable the WooCommerce Image Zoom in the Woo Layout Injector General Settings in the dashboard menu. A future update to Woo Injector will disable the hover zoom function of WooCommerce and replace it.
The page builder for Divi is different than other WordPress themes – the Injector is not compatible with other Woo plugins because it is specifically designed to be used with Divi and hence has requirements other themes don’t have.
Because of this a lot of third party plugins won’t function properly, but this doesn’t mean it will cause issues. If the third party plugin effects the product page then it may not work. If it effects any other part of the Woo system then it will most likely work fine.
I know this can be a problem, so I’m willing to help on a per case basis. To get help open a support ticket and include a copy of the plugin you want to use. I’ll get it integrated ASAP.
To create a support ticket, go to: Tortoise IT Support Ticket System
Or paste this URL into your browser’s address bar: http://www.sean-barton.co.uk/support/
We’ve included the product page and archive layout examples from this guide as JSON files to help you get started quickly. Here’s how to import them.
To import them, navigate to Divi, Library in the dashboard and select Import & Export at the top left of the screen.
Click Import and select Choose File. Navigate to the folder where you’ve placed the file and select it. Click Import Divi Builder Layouts. Wait for the import to complete. The layout will now be available in your Divi Library.
You can see the basic information, a video demonstration, and examples here: Woo Layout Injector Basic Information
Alternately, you can copy and paste this URL into your browser’s address bar: http://docs.tortoise-it.co.uk/woo-layout-injector/
Create a support ticket here: Tortoise IT Support Ticket System
Alternately, you can copy and paste this URL into your browser’s address bar: http://www.sean-barton.co.uk/support/
Note – The product images in this guide are from Unsplash.com and are not included with this plugin.
This post does not include all of the images in the Guide, please Download the 22 page manual for the full content.