Woo Layout Injector
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 and product category pages 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 basic making this plugin ideal for any type of store.
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!
To add a single product page template
- Install and Activate the plugin
- Visit the ‘Divi Library’ page on the back end of your website
- Click add new (towards the top of the page) and choose ‘layout’ from the little popup. Give it a memorable name (this is for reference only and is never used elsewhere)
- Use the page builder to create your layout and save it
- Visit the settings page for the plugin and simply choose the new layout from the dropdown.
- If you want to override the default Injector layout on a per category basis then you will find several options to do so on the settings page.
To add an archive/shop/product category page template
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.
Instructions to link the layouts to your Woo pages
- Follow the layout creation Instructions as above.
- Add a new layout for single products making sure to use any combination of title, image, price, buy it now, content modules.
- Add another layout for the archive/shop page crucially using the ET Woo Loop Archive module, picking a layout type (grid or list) and selecting a child layout to use (the one you added in the previous step)
- Visit the settings page for this plugin and assign the archive layout you made to the shop/category dropdown.
- That’s it!
Note: Typically the single template should reflect the available space. If you have chosen two columns then you could use one or two columns in the single template and it not look squashed however if you have chosen three or four columns in the grid then perhaps stick with a single column in the single layout for it to look good and work effectively.
- Title. Adds the name of the product
- Info Tab. Adds the contents of the ‘additional information’ tab. Only relevant if your products have attributes or are variable.
- Reviews. The WooCommerce reviews system. Also part of the tabs module but this is an alternative
- Meta. lists SKU, category etc.. summary info.
- Content. This can show the short or long product description based on a setting
- Add to Cart. Does what it says on the tin!
- Gallery/Product Image. Shows the featured image for the product with the gallery below. Optionally the latter can be disabled so you can display the thumbnails elsewhere.. surprisingly useful!
- Thumbnails. Shows the gallery images which would normally appear below the product image but this is a separate module to allow them to show in different areas of your page
- Tabs. The standard WooCommerce tabs
- Related. Self explanatory
- Upsell. Self explanatory
- Breadcrumb. Self explanatory
- Loop Archive. Archive layout module used to configure the look/feel and the child layout to make the shop/product categories work
- Shop/Category Title: Used for the archive template to show the category title or the shop title accordingly
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 using the support ticket system link at the top of this page and we will address it 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.