Using WooCommerce With Divi

Website Design

What is WooCommerce?

If you already have a WordPress site and you’ve been thinking about adding a store where you can make online sales, you’ve probably heard of WooCommerce. It’s the free plugin that powers over 2 million online stores and around 40% of all ecommerce transactions. In theory, all you need to do is install the free WooCommerce plugin, follow the quick start prompts to create your first product and you’re ready to start selling. But making WooCommerce behave the way you want it to and look good as well is something of an art form. And if you want to extend the functionality of the basic plugin, the annual cost of add-ons and extensions can soon add up.

As someone who has been using WooCommerce to handle all of the transactions in my own store for nearly 10 years, I’m a fan but I’m also aware of how hard it can be for a beginner to get started. In this post, I’m going to share with you the design tips, hacks and plugin extensions that I use to make my store run smoothly and look stylish.

Before we dive in, you’re probably wondering if there are any alternatives? Of course there are and the top two contenders are Easy Digital Downloads and Shopify (which you can use via their hosted system or use the Shopify plugin to embed in WordPress.

This isn’t a comparison blog post – I’ll leave you to do your own research there. Suffice to say that the free Easy Digital Downloads plugin offers practically the same features as WooCommerce if you are only selling digital products. However, WooCommerce is owned by Automattic, the team behind WordPress, and in addition, offers a wider community of users and variety of extensions. I’ve looked at the alternatives and right now, I’m happy to stay with WooCommerce and have complete control over my payment gateway and transaction fees.

 

How does WooCommerce work?

Before we dive into WordCommerce, I want to introduce you to the concept of Custom Post Types in WordPress. Out of the box, WordPress has two basic post types and they are Pages and Posts. Simple, right? If you’re a Divi user, you may also have noticed that there is a third post type, called Projects.

So when you install WooCommerce and create a product, you are effectively creating another Custom Post Type called Products. All of these post types live in your WordPress database and this is what allows your various post to be searched and sorted. (Note. It also means that the information in your posts, pages and products won’t disappear when you change themes.)

The great thing about Custom Post Types is that they can easily be edited, to give them extra fields and settings. I’ll be telling you how to create custom product layouts later. For now, just remember that a WooCommerce product is simply just another kind of blog post.

Of course, in addition to the Product posts, WooCommerce has a general settings area, a shopping cart and payment gateway options and an order system.

 

What happens when you install WooCommerce?

As soon as you install WooCommerce, it triggers a series of prompts to complete the basic settings and create your first product. It’s pretty straightforward, and actually, you can skip it and complete the General Settings section later, whenever you want.

But, more importantly, as part of the install process, WooCommerce creates 4 standard WordPress pages which allow WooCommerce to move customers from product to cart to checkout and to have a ‘My Account’ area. A lot of people think that these pages are somehow special in themselves but they are actually just plain old WordPress pages with WooCommerce shortcodes in the text editor area. See below.

 

The standard pages created on install are:

  • Shop – This is the only page that doesn’t have a shortcode. It acts a base for your product catalogue.
  • Cart Page – This page contains the shortcode ‘woocommerce_cart’ and this is where a customer can view what’s currently in their Cart.
  • Checkout Page – This page contains the shortcode ‘woocommerce_checkout’. A customer can click through to the checkout from their Cart.
  • My Account Page – This page contains the shortcode ‘woocommerce_my_account’. It creates a My Account page, which includes links to personal information, purchase history and downloads.

This means that you can rename your WooCommerce pages whatever you want and that you can style those pages with the Divi page builder any way you want as long as you make sure you keep a text module with the shortcode in it.

Hello complete design freedom! This is where a lot of WooCommerce beginners fall at the first hurdle – they just don’t realise that WooCommerce is powered by shortcodes rather than the pages themselves having some kind of magical powers. However, straight out of the box, if you leave a WooCommerce shortcode in a default Divi page, it looks pretty bare and clunky. Instead, style your page with the Divi builder and you can create beautiful WooCommerce pages.

Note: You can find the standard page shortcodes above but there are all sorts of shortcodes which are handy for displaying other WooCommerce outputs, eg. Most Popular products. You can find the full list here.

 

Divi and the WooCommerce Shop Page

At every stage of using WooCommerce with Divi, you have the option to go with the WooCommerce default or override it using the Divi builder and/or a combination of shortcodes and a selection of plugins.

As we discussed, the standard WooCommerce pages (like Cart and Checkout) are easy to style with the Divi builder, but the Shop page is a different animal. It acts as the shop catalog, or base, and doesn’t contain a shortcode in the WordPress editor. However, it is where WooCommerce naturally outputs the shop catalog unless you override it with your own content. In short, it’s at this point that you can choose to use the standard WooCommerce output for your shop page, product pages and process pages (like Cart, My Account and Checkout) or use the Divi builder or a plugin.

OPTION 1 – Using the WooCommerce Standard Catalog

You can view the standard WooCommerce output of my own store here. Pretty boring, right? And I would need to use quite a bit of CSS and probably a couple of WooCommerce plugins to do simple things like change the number of columns, the image size, fonts and colours. However, I should note that there are plenty of plugins out there, both free and paid, which extend the look and feel of the standard WooCommerce output.

OPTION 2 – Using the Divi Shop Module

If you decide not to use the standard catalog for your store page, it’s perfectly straightforward to build a beautiful store page using the Divi builder and the Divi Shop Module. You can see a great example here, in our Atelier child theme for Divi, showing how the Divi Shop Module can be paired with the Full Width Menu Module to create a store menu. Here’s the store page in the Atelier design.

So far, so good, but here’s where you start to run into limitations when it comes to using Divi for any kind of post type – the archive pages aren’t that pretty. You can see what I mean here if you click through to one of the Atelier store categories. Enter…the Woo Layout Injector plugin.

OPTION 3 – Using the Woo Layout Injector Plugin

If you’d like to use the Divi Builder, but don’t love the shop module, then you can jump straight into using the Woo Layout Injector to build your shop page as well as your product and archive pages. Simply create a new Layout in the Divi Library, choose from a wide range of WooCommerce modules to create and style your content and then select the relevant layout that you have created ove in the Woo Layout Injector settings area. In fact, you can use it to create layouts for all of your WooCommerce pages. More on that in the next section.

OPTION 4 – Using a Plugin to Create A Filterable Grid

I feel I need to mention this because I’ve linked to my own store page several times. I love the look of filterable grids and to get that look, I’m using Essential Grid with a custom skin that I’ve built (which you can download here). I chose Essential Grid because it’s easy to customise but it also works with the Woo Layout Injector plugin, to output category pages in the same style.

In short, I’ve added a whole selection of plugins which let me use the the Divi builder to build every part of the WooCommerce experience, ensuring brand continuity, from the store page and category archives, to products and to checkout. In the next section, I’m going to show you which plugins they are and how to get the best out of them..

 

 

Using Plugins To Improve WooCommerce Design

We’ve arrived at the good bit – my personal selection of plugins to really get the best out of WooCommerce. I’m going to list them first and tell you how they all work together, followed by an in-depth video walkthrough.

Woo Layout Injector ($28)

The Woo Layout Injector packs a lot of punch for the price. It allows you to use the Divi builder for your shop page, single products, category archives, the Cart, Checkout and My Account pages. Create a layout for any WooCommerce page in the Divi Library and then assign your layout to your chosen page in the Woo Layout Injector Settings area. (See video walkthrough at the end).

Here’s a screenshot of the included modules in the Woo Layout Injector.

 

For me, the Woo Layout Injector has two stand-out features:

  1. The ability to create a single product layout using the Divi Builder and apply it to every product. Sure, you can already use the builder on a single product but if you want to update the layout of all your products at once, you can’t.
  2. Being able to build your own Store, My Account, Cart and Checkout pages and make them actually look good. I have all sorts of info I like to add to the checkout stage – from exchange rates to guarantees. It’s also a great place to drop in an up-sell or a newsletter sign-up.
  3. You can style your category archives to match your store page.
  4. You can re-purpose and re-style the WooCommerce Tabs, place them wherever you like and put whatever you like in them. See what I’ve done with mine.

 

 

Advanced Custom Fields (free)

If you’ve never used Advanced Custom Fields, you’re in for a treat. Not only can you use it to add extra fields like products details, slideshows, videos etc to your WooCommerce products, you can actually use it on any post type. Great for blog posts where you might want to add extra info, like suppliers or location or even the name of a client or project. Take a look at our product layout for our No7 Divi Child Theme. I’ve added extra fields for the demo site link, and the Extra Info section at the bottom. Here’s what the back end looks like.

 

Divi Advanced Custom Fields Module ($15)

Once you’ve created your shiny new fields using the ACF Plugin above, you’ll want to be able to drop those fields into the Divi builder. No problem. This handy little plugin from the maker of the Woo Layout Injector, creates a new ACF module in the builder, where you can select your new fields from a dropdown and style them using the Divi controls. In my single product layout, I use Advanced Custom Fields for the demo link area and the features area at the foot of the page.

 

Essential Grid – optional ($26)

As previously mentioned, the standard WooCommerce product catalog can be made to look good, but boy, it’s hard work. It does output a basic search and product filter and there are plenty of free and paid plugins to extend that filter and make it look good. If you want your potential customers to sort and filter by several criteria and use features like price sliders, then the native option is for you.

If you only need to filter your store by category and love the fast, smooth-looking filtering of a jQuery-driven grid, then a plugin like Essential Grid will be perfect for you. The Woo Layout Injector plugin also includes an Essential Grid module to drop into your shop archive pages to maintain the same styling for categories.

 

VIDEO WALKTHROUGH

 

Using Plugins To Improve WooCommerce Functionality

WooCommerce is a free plugin so it’s hardly a surprise that some of the plugins are a little basic. Here’s my list of plugins that I couldn’t do without.

  • WooCommerce Simple Storewide Sale ($19) – Allows you to apply discounts across your whole store and set sale start and stop dates.
  • Advanced Woo Reporting ($20) – I couldn’t live without this one. The native WooCommerce reporting is really basic. Advanced Reporting lets you break down your sales in many different ways and also includes an invoice generator.
  • WooCommerce Email Customizer ($21) – It’s not easy to even edit the text of the auto-generated order emails that customers see. This plugin gives you a really easy editing interface which includes text, colours, styles, social links and more.
  • WooCommerce Multi Currency Store ($21) – This handy plugin displays the price to your store visitors in their own currency by detecting where they are visiting from. This saves them the job of working out exchange rates and gives shoppers more confidence when it comes to purchasing.

I hope this post has taken some of the fear out of WooCommerce and given you the confidence to design a unique and easy to manage store area. Feel free to share your WooCommerce stores in the comments.


Need a quick WooCommerce solution?

Our beautiful LuxeCommerce Child Theme for Divi is a great online store solution…

Get my DIY Your Website Ebook

+ get 20% off your first order

You don't have to settle for an average website.

Follow my 5 seriously actionable pro design tips to help you level up your website.

13 Comments

  1. Mi5

    Great article!

    Reply
  2. Noe Khalfa

    Thank you. Oh my god thank you. After hours of rabbit-hole-ing around this is easing my mind so much!

    Reply
  3. cris

    The price of Woo Layout Injector – $28 is “Billed yearly until cancelled”. Yearly licence is very unconfortable. There is no lifetime option for 1 site. You have to buy Unlimited Site License and lifetime updates for $225.00. Am I right?

    Reply
  4. Shelby Gibbs

    OMG Thank you so freaking much for this! I was on my second cry and I found your article! I REALLY appreciate it- I’m new to Divi and had to quickly add a shop to a clients page- I think I did ok for my first go at it and in a couple of hours! https://www.famouscreationsca.com/shop/

    Reply
  5. Stephanie

    Thanks for the great post, I downloaded your free layout, but I always get content can’t be uploaded. Any ideas?

    Reply
    • Stephanie

      I’m talking about the essential grid layout

      Reply
  6. Flo Nelson

    Excellent article. Also helped to get confirmation that I did the right thing in not using the shop module for a store with a lot of different filtering.

    Reply
  7. Josh

    Nice article, thanks for sharing.
    Divi bodycommerce is better and cheaper than layout injector…and delivery much more resources.

    Reply
  8. David Hamby

    Hi – Wondering what parts of this are still essential/relevant when taking into account Divi’s Woo Builder updates? Should I still be utilizing the aforementioned plugins?

    Reply
  9. Steve Murray

    Genuinely. What a great article.

    Thank you 👌

    Reply
  10. Don Prickel

    In using WooCommerce, I have designed a website (wordpress with Divi) for a non-profit organization. We have 4 separate Paypal accounts all independently addressing donations, annual sponsorships, dinners, and other related events. Can I use WooCommerce , for example, ona product page with one of 4 options, some or even both, as follows: a: sponsoring a child with fixed amount of $75/year, b) general donation to the organization (they choose to add an amount), c) education fund (they choose to add an amount) , and d) dental program for children (they choose to add an amount). Some may check the first item and that’s it; others may donate and add to the dental program, etc….you get the idea. IN addition, the organization has a dinner, with adult, children and family proce variables, that occur once annually, and so is there a walk/run, and even a flower basket sale, which I thin is more simple, basd on your examples of the clothing items–it would be the same. Payment is respective to specific PayPal accounts. I won’t need a order tracking form…and would I be using Products Blocks with Tags only

    Reply
  11. Daniel

    I bought a year ago and it’s great

    Reply
  12. Tammy Dickinson

    I bought the Luxe theme and I believe the CPT Layout Injector was recommended, so I purchased that. I don’t see that this plugin is doing. It does not seem to be adding layout options as shown in the video. But maybe it adds under the hood, in the code of Luxe???

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Free DIY Your Website Ebook +

20 % off your first purchase

You deserve better than an 'average' website...

By downloading our ebook, you agree to receive our excellent marketing emails.