Woo Layout Injector is by far the most powerful plugin designed for Divi/Extra to give a huge amount of control over your WooCommerce site. It allows you to edit the layout and styling of the WooCommerce single product pages, the shop page, the product category pages, the cart page, the checkout page AND the my account pages. Some of these can be done either centrally or on a per product basis.
The ideal Divi Commerce solution, Woo Layout Injector works on Divi and Extra, neither of which allow any configuration at all unless you are able to code in PHP and CSS. Even a seasoned developer will spend a while getting their WooCommerce layouts just right and to look ‘non-stock’. This plugin facilitates that.
In literally minutes you can create both a shop layout and product page layout and assign them to your site. You can set the layouts centrally via the settings page meaning if you want to change your store at any time then you need only edit one layout. You can also override the layouts by product category or even on a per product basis making this plugin ideal for any type of store. If you want to really fine tune your experience you can tailor make your cart page, checkout page and my account pages. All using the Divi Builder!
A Michelle Nunan of Divi Soup uses the Woo Layout injector in her ecommerce child themes too – it really is a fantastically appreciated Divi Plugin
To really put the icing on the cake you have a beautiful header mini cart and a whole raft of custom made modules to allow you to design your pages as you see fit!
In short, this plugin adds a number of bespoke and highly configurable custom modules to the Divi Builder and a settings page to link them together. You have the freedom of the Divi Page Builder which we all know and love to construct a variety of layouts to suit your needs!
Using Woo Layout Injector you can create a very flexible and configurable layout for your WooCommerce archives and product category pages. To make this as flexible as possible we create TWO layouts. One that will be used for the archive page itself and another which is repeatedly used for each item (product) in ‘the loop’.
Let’s say we have an archive page showing 9 items in 3 rows of 3 items. We first create a ‘loop item’ template in the Divi library (Divi Library > Add new > Layout (non global)). This will feature normally an image, title, price, read more button etc.. Once that is saved you can create the second layout which will be the archive. This may feature a nice header, the ‘loop archive’ module and then a footer or anything else to suit your design! Within the loop archive module you can select list or grid view. I find that list view works well especially when your ‘loop item’ layout has multiple columns of it’s own or a grid of products such as that used on elegantmarketplace.com.
For a Deeper Dive and full instructions on how to use this plugin once installed – have a look at this great article where you can download a full instructional PDF.
Each time you want to make a change to the layout just visit the Divi Library page and edit your layout as before. No need to relink or anything else. This really is a set and forget plugin that will yield a unique and bespoke looking WooCommerce store without you having to write any code at all 🙂
There are no fewer than custom 37 modules available to you using Woo Injector. Each has a purpose and a place to be used with the bulk of them being universal. Details below:
- Billing Address
- Shipping Address
- Checkout Coupon – so you can position the coupon form anywhere you like and style accordingly
- Checkout Review – so you can see what you’re about to buy
- Checkout Payment – final pay now button and links to the payment processors
- Cart products – the cart/basket itself showing a list of products with their quantities and costs
- Cart Totals – A table showing the total cost and shipping calculator
- Account Page – the account page itself. Used as a container for all of the other accounts.
- Account Navigation – the list of links to the account sub pages.
- Account Downloads – the Downloads Tab
- Account Orders – a list of your orders and receipts
- Account Details – your personal information, a profile
- Account Addresses – a place to set your default billing and shipping details
- Content – the product description
- Short Content – the shorter product description/excerpt
- Read More – a simple button to allow you to create links to your product pages easily
- Title – the product title
- Shop Category Title – Similar to the title module except that it shows the title of the category page you’re on
- Notices – notices such as “Product has been added to your cart” etc
- Gallery – the product images with my own zoom/lightbox functionality
- Thumbnails – the additional product images with the option to split and show in various positions on your pages
- Add to Cart
- Rating – star rating for the product you’re looking at
- Reviews – a separate module if you don’t want the reviews to feature part of the tabs
- Information Tab – a separate module if you don’t want the additional info tab to be part of the tabs
- Tabs – the Woo tab system
- Attribute – display a product attribute and it’s linked terms
- Product Category
- Meta – showing information such as sku and categories
- General – old and largely unused but it’s a collection of the modules joined together.. such as title, price, add to cart and description.
- Related Products
- Cross Sells
- Single Product – a handy module to allow you to show a single product on any page on your site
- Loop Archive – a revolutionary approach to layouts whereby two layouts are used, one for the archive itself and another to handle how each product item appears
- Archive – a shop type module to give a basic list or grid of products to be used on simple stores
- Category Archive – Want to show a grid of categories to navigate around your site.. this does that!
Every module have comprehensive control over styling such as padding, colours, alignment and specific settings for styling and module behaviour. For those times when you need more control each module has a unique CSS class and where possible we have included PHP actions/filters to enable you to ‘hook in’ and do your own thing.
Coming very soon (mid 2018) will be a gallery of layouts created using Woo Injector. This plugin was released and flourished from mid 2016. It was, and still is, revolutionary in the features and functionality on offer with new updates coming all the time. Keep an eye on the changelog on this page or within the plugin itself for more exciting additions to the plugin. The new layout library will be a site showing a number of product page and product archive layouts created using Woo Layout Injector with the option to download the JSON files for use on your own store. Watch this space!
This video is an hour long but it shows me setting up and explaining how the plugin works and how to integrate it into your site in a clear way. (was made for 4.0, we are now a few months down the line and some of the screens may have changed).
Adding the new modules to a non WooCommerce page are unlikely to work. The modules are designed for use on a WooCommerce product page only via the Divi library. Please contact us if you are unsure about this or have a problem setting things up.
This plugin is designed to work with the vast majority of third party WooCommerce extensions. On occasion, third party plugins which also modify the product page may not be 100% compatible. Don’t worry though! Simply put in a support request with the vendor or Elegant Marketplace and we shall build in compatibility as soon as we are able.
Please be aware though that we comprehensively test Woo Layout Injector with a variety of popular WooCommerce plugins to ensure compatibility across the range.
We have an Excellent guide to setup and troubleshooting on the Elegant Marketplace blog. It will show you in comprehensive detail how to create a stunning store including single product pages, product archives and help you through some common questions and issues we hear about. Read the guide here
For any support issues, please visit this link http://docs.tortoise-it.co.uk/
Changelog:2.2 - Added new module "Product Categories" 2.3 - Fixed loop archive module not showing pagination on search 2.4 - Added support for Product Tag pages 2.5 - Removed PHP notice for background layout on loop module 2.6 - Fixed responsive text size/line height issues - Added more configuration options in advanced design settings across all modules 2.7 - Added 'no content' option for the content module to enable use of the read more button on it's own - Modded price module to NOT show when no price is returned. Helps with styling an markup 2.8 - Added custom query option on loop archive module - Added licensing and auto updates 2.9 - Fixed gallery thumbnail cols CSS 3.0 - 3/2/17 - Loop Archive module, hide grid columns option when list mode selected - Added new rating module - Added text alignment and light/dark colour settings to content and title modules - Added "add to cart" button renaming setting - improved settings page by adding helpful links when no layouts are present - improved settings page by removing prebuilt layouts from the various layout dropdowns - Added hide reviews tabs option to tabs module - Fixed advanced design settings in Price module - Added title option in price module - Added variation price styling in add to cart module - Added/Fixed styling options in add to cart module - Added support for tags as well as the existing category overrides - Added number to show option in upsell and related items modules 3.1 - 9/2/17 - Remove superfluous layouts from Woo Loop Archive module layouts list - Added settings to present all tag and category archives in their own templates - Fixed bug whereby the settings page wouldn't save if the site had hundreds of tag/cats. Disabled ability to override individual terms at 100 - Fixed posts number in loop archive module 3.2 - 31/3/17 - Added text alignment and colour options to the shop title module 3.3 - 5/4/17 - Added basic support for Woo 3.0. Product thumbnails now correct size and location although integration needs work 3.4 - 18/4/17 - Added further support for Woo 3.0. Product thumbnails now show (forced CSS) - Fixed 'missing argument 3' bug 3.5 - 14/8/17 - Added global setting to remove the woocommerce hover gallery feature added in Woo3+ - Added global setting to Allow you to change the placeholder image for products without imagery - Fixed Woo image module size selection - Moved Woo Layout Injector submenu below the WooCommerce heading - Fixed tag general layout selection - Renamed modules to remove ET prefix as it's not necessary. Woo is less ambiguous - Added Woo check and admin nag - Added handy "edit" buttons to the settings page to help you find the layouts more easily - Added new 'cross sell' module for use on the cart pages - Added new Woo Attributes module to allow associated attributes for products to be shown easily - Fixed layouts issue in the Loop Archive reported in the latest Divi release (~Aug 2017) 3.6 - 15/8/17 - Extended attributes module to include non-taxonony attributes - Fixed some PHP Notices 3.7 - 15/9/17 - Added custom ordering to the loop archive module - Added 'hide if no results' to the loop archive module 3.8 - 20/9/17 - Fixed issues with custom ordering - Added Woo Read More module to allow a direct link to the product page to be added 3.9 - 29/10/17 - Fixed hover zoom issues within Woo Injector. Completely rewrote the image and gallery modules. Also completely integrated a hover zoom and lightbox functionality 3.9.1 - 31/10/17 - Updated thumbnail column CSS for improved cross browser compatibility - Improved support for third party plugins such as Yith based on a move to 'action' based modules rather than function based - Made all modules more usable by using a settings group to move the useful settings above the background selector default with Divi 3.9.2 - 02/11/17 - Updated thumbnail CSS - Added hover zoom disable functionality - Fixed Auto Update functionality 3.9.3 - 05/11/17 - Added Woo Notices module for the added to cart message placement - Fixed JS error around jQuery zoom which effected some users 4.0 - 15/11/17 - Fixed Woo Content module formatting - Fixed breadcrumb module styling options and added text orientation to the settings - Fixed product image flicker on change - Fixed when using the overlay option on the product image you can now click the image to visit the product page - If Woo Notices module not used then a fallback to having the notices at the top of the page now kicks in - Updated Rating module to include better alignment options, styling optiond and an option to hide the module if there are no ratings yet - Refactored code into several files for easier management - Added option to add/remove sale banners to both archive and single pages along with the ability to define where the banners show.. over image/content/title - Added alignment options to 'add to cart' module - Added offset and limit fields to the thumbnails module to allow for the thumbnails to be split across multiple page locations as necessary - Added 'short content' module as having it as part of the 'woo content' module was confusing some users - Added global setting to allow you to enable the Divi Builder for WooCommerce Product Pages - Added new product archive module for simpler stores. Much like the Loop Archive except no sub layout is necessary. Just add the module and you're good to go - Added single product module to show any single product on any page that uses the Divi Builder. Viewable in a default layout OR using the loop item concept - Added header mini cart option. Hover to view current cart and visit cart/checkout etc - Added ability to use the page builder to create your own checkout page - Added ability to use the page builder to create your own cart page - Added ability to use the page builder to create your own my account pages 4.0 - 16/11/17 - Fixed shop/category description module throwing an error when description is turned on 4.1 - 12/01/18 - Added support for Yith get a quote - premium - Fixed header cart for slide in menus and centred logo options - Fixed occasional bug with Woo Title module (sale price related) - Fixed error with srcset calculation - Limited colorbox css and js to product pages as it was interfering with the modal popup plugin - Removed overlay as link code as it was causing issues with old versions of Divi and messing with related items imagery - Set the related image size to large for quality purposes - Fixed occasional bug with Woo Content module (sale price related) - Fixed occasional bug with Woo Meta module (get sku on non object) - Coupon functionality changes now only kicks in when the checkout itself it overridden rather than all the time 4.2 - 02/02/18 - Better Cross Sell module options 4.3 - 12/02/18 - Added shortcodes [wli_content] and [wli_hook] for general use - Added two new filters to modify the heading tag used for single and archive pages. sb_et_woo_li_single_title_tag and sb_et_woo_li_archive_title_tag 4.4 - 19/03/18 - Fixed call to get_item_data replacing with wc_get_formatted_cart_item_data for newer versions of woo - Fixed shop module grid titles not clickable issue - Fixed occasional additional empty row added with the loop archive and archive (basic) module - Added plugin page action links for support, settings etc.. - Added wpautop to the content shortcode - Removed Woo modules from contexts where they are not needed. IE non product based/divi library pages. This will speed up the builder and include the modules ONLY where they are needed - Added variation ajax limit filter to 250 to avoid ajax being used to handle variations as it's not currently compatible. There is a PHP define which you can extend if you need this number more thean 250 - Added code to prevent Woo Title being used when the user actually meant to use the shop title module - Fixed sale badge bug whereby the sale badge was removed from the shop module if any sale badge location other than 'none' was selected - fixed bug whereby text shadow was showing more than once in the advanced design settings - Changed "text" to "content" in design settings to avoid fields being called Text Text Font Size, Text Text Font Colour. Now they will read Content Text font Size. It reads better - Added notices to show when the woo archive and woo loop archive are used in the wrong context. That is to say when they are used on a normal page and without custom query turned on. - Added new module for creating a grid of product categories - Added new support for Divi Extended Column Layouts whereby you can now show up to 8 products or categories per row IF the DECL FREE plugin is enabled - Added title field to all of the archive modules (3) for optional use of a heading - Added button styling (custom button yes/no etc from core Divi) to all modules requiring one (archives x 3, read more, content, short content) for better button styling - Fixed sale badge locations when using the Woo Archive module. - Added colour options for the sale badge (background colour and text colour) on the WLI settings page - Overhauled the Related Products module to optionally use the Loop Layout method for much more flexibility - Overhauled the Upsells module to optionally use the Loop Layout method for much more flexibility - Overhauled the Cross Selling module to optionally use the Loop Layout method for much more flexibility - Fixed issue whereby having two product image modules on the same page broke the selection between thumbs on mobile - Added Disable Zoom option on product image module to allow you to turn off zoom on a per module basis. Overridden by the site-wide setting - Fixed issue whereby if 'disable zoom' was turned on then the lightbox would also be disabled. Now the 'disable zoom' button only disables the zoom itself - Added ability to style variation text in the add to cart module - Added button (and button disabled) styling in the add to cart module - Added ability to add a title to the Woo Content module - Added light/dark background options, delimiter selection and link (hover) design settings to the breadcrumb module - Updated the Woo Notices module to feature configurable background colours, fonts, alignment and button styles - Added title option to Short content module - Added title option to Additional Info tab module - Hooked up the advanced styling/background colouring within the Woo Meta module - Added edit button on edit product layout for easier access to the divi library layout when overriding on a per product basis - Integrated a new tab management system to allow you to easily extend the tabs on any product with no coding required - Updated the reviews module to include button styling, background and alignment options - Extended the tabs module to include better styling functions and regarding alignment and colouring etc - Added image size to the single product module along with Divi button styling options - Woo General module added better styling/alignment options, button styles, prices/buttons/content and headings - Fixed 'Woo General' bug whereby only the add to cart button showed. Now shows Title, Image, Short Descripton, Add to Cart and Meta info - Added an admin notice (red bar nag) to show in the edit screens for the Shop, Cart, Checkout, My Account pages for the site to highlight to admins that they can be edited and providing handy instructions to do so - Woo Cart Products - added remove borders option, added image sizing control to change the size of the cart thumbnails, added button styling - Woo Cart Checkout - added button styling and remove borders option - Archive modules now can use the built in Woo Pagination without the need to use the WP Page Navi plugin - Added option to show ordering options above the archive modules (archive basic and loop archive) - Added custom css options to archive (basic) and loop archive modules - Added list option to Woo Categories (single product) module, also additional styling options including light/dark text dropdowns - Added list option to Woo Attributes module, also additional styling options including light/dark text dropdowns - Added button styles to checkout coupon module - Added text/button styles to checkout payment module - Added text styles to checkout billing and shipping modules - Overhauled the coupon system for the checkout to use a new module and popup overlays for error and success messages - Added code to prevent checkout and cart modules being used in the wrong contexts - All 'My Account' modules - text styles added, button styles added where appropriate - My Account Navigation module, added ability to present the links as buttons and style accordingly. Also alignment options - Neatened up the returning customer banner on the checkout 4.4.1 - 27/03/18 - Added ordering to loop archive module when custom query is turned on - Fixed JS issue whereby when using the thumbnails module, on click it would not change the main image 4.5 - 12/04/18 - Added ability to disable lightbox from product image module - Added filter 'wli_term_count_limit' which can be overridden in PHP for sites with more than 100 categories or tags - Added display type field in the ATC module for contextual changes in output - Fixed broken cart widget - AJAX add to cart now adds class of 'button' to 'added_to_cart' link that pops up after a successful add for consistency - AJAX add to cart using ajax keeps track of the number of items in real time - Added better support for Contact Form 7 forms. Styling now matches Woo in terms of input fields and the submit button. It also correctly stores the post_id for the special field types to work within CF7 - Added support for YITH WooCommerce Badge Management - Added support for Woo Variations Table plugin - Fixed preamble (wrapper) for checkout login form bug whereby it was showing when the user was logged in creating a gap at the top of the screen - Fixed placeholder field in Woo Checkout Coupon module - Improved empty cart process with AJAX 4.6 - 9/6/18 - Fixed a slight bug in the JS for product images when using more than one image module on the same page - Added next/prev arrows to images in the lightbox - Assorted other small fixes 4.7 - 5/11/18 - Added Title and Alt tags to the product image module. Also the gallery module - Renamed module methods to not throw Divi Builder deprecated errors - Fixed issue with image sizes not being consistent. Now defaults to 'woocommerce_thumbnail' - Fixed issue whereby 4 a column layout in a 1/4-3/4 arrangement would show as 2x2 not 4x1. Minor CSS addition to rectify - Fixed Divi Shop module image sizing consistency - Added default WooCommerce thumbnail placeholder as tertiary fallback. Product images are checked then the WLI thumbnail then the Woo placeholder - Fixed Divi Builder integration for products
Checkout the documentation first and if you still need help open a support ticket.View Docs
Support is provided free of charge for 6 months from the date of purchase and does not include amendments around third party plugin conflicts. Each license version is subject to these terms. Single use – 1 instance on 1 site, 5 site license – 5 instances on 5 sites. Unlimited use license – unlimited instances on an annual basis. Unlimited site license with unlimited lifetime updates for the life of the product.
Each license automatically renews at the end of the year unless cancelled with the exception of Unlimited License with unlimited lifetime updates. The renewal price is set at 50% of the original. To cancel your subscription, simply login to your PayPal account and under subscription look for The EMP Group and cancel the package.
*Support is provided by vendors directly.
You have questions about your purchased plugin, theme or layout? Then use this form to get your answers as soon as possible. If you have a license key, please enter it here. You can find it in your account under "view details and downloads". Otherwise, please use the invoice id from your invoice.