The Woo Commerce 3.0 update just happened, and there are a few things to consider before updating. So I thought I would take this time to not only cover the basics of the update, but cover both Woo Commerce 3.0 and Woo Layout Injector.

If you decide to download this layout to the article, you will need Woo Commerce (and it’s FREE!), and if you want the products to look like the “Injected” versions, you will need to go out and get Woo Layout Injector, I will explain why you should consider offering stores & shops.

First things first! The Update, mostly covering the “most voted” element that people unanimously decided upon Woo to update, the product image section, it’s thumbnails, and a really cool slider built right in!  This is why you may want to take caution before you update if you have a lot of products with an array of product images.  I of course was so excited about Woo 3.0, I immediately updated, only to immediately feel like I just watched myself lock the keys in my car! Luckily, I did not come across any issues. However, i barely have any products in my own demo store, so please remember to back up before updating.

There is a great article by Woo Commerce about their update that goes into great detail, with a full list of what was updated. Even though it is labeled as 2.7, it is indeed all about the 3.0 update. You can view that here.

IMPORTANT LINK: If you find that your product image section, lightbox, thumbnails section is not working properly, this link was provided by ELEGANT MARKETPLACE with a fixit to the .php and .css – by the peeps at CREATE & CODE Here

Which leads me to my next topic, Woo Layout Injector. This injector allows you to pretty much layout your product page any way you want, with a ton of options, all in familiar Divi Modules. You can design as many product pages as you like, save them out as Woo Library items, and when creating your products, just select which layout you wish to have. The Injector can alter the Shop page too, here’s an overview video by the Developer Sean Barton , View Here.

So without too many words, I have created a layout below that displays the beginnings of what you can do with your shop layout, which you can also download the layout. As well as, you can click and compare a standard Woo Layout with a Woo Injected Layout, side by side. For more detailed information about Woo Layout Injector, you can see that here. (this is not an affiliate link)

Woo Commerce 3.0 and Woo Layout Injector

Here is the .json layout for the Shop “starter kit”, there’s also a bonus tidbit of code that will let you add descriptions to your products display with the Shop module.

Download .json here  

Web Design Packages

From Landing Page to Full eCommerce Sites - All Custom

Virtual or Download

Packaging Tutorial

for Woo Commerce Shop













Standard Layout with


How to display the description in your Woo Commerce product (Insert this into your “Custom CSS” box)

#top.woocommerce-page .template-shop ul.products li a {
text-align: center;
#top .template-shop .price span {
text-align: center;
display: block;

Woo Commerce Layout
Woo Commerce Layout

Every package includes

Concept and Design

Original concept and design ideas, brought to life, based on your vision and thoughts.



We use Wordfence, a league leader in WordPress security, giving you peace of mind with regards to your website.



Using Divi, allows us to create a beautiful and responsive site, that brings you results as well as easy to maintain.


You will have weekly backups of your site, automatically backed up to our Dropbox.

Google Analytics

One of the most valuable elements to your website marketing are statistics and knowledge of results to your marketing.


We always strive to bring you the best in site speed with regards to industry leading website caching.

Divi Dojo

Woo Commerce 3.0 and Woo Layout Injector

Become a designer ninja.

Tools and Divi layouts that help you become a designer ninja. Be the first to know!

You have Successfully Subscribed!

Pin It on Pinterest