Divi Child Theme Setup Tips
Over 70 Essential Divi tips, tutorials, gotta have plugins, video tutorials and more. Most of these I have used myself in a number of different client projects. This list is constantly evolving and growing. To be honest, I created this after my browser started crashing from having too many tabs open at the same time. It will grow even more!!!
Divi Child Theme Setup
Divi 4+ Header Layout & Design tips
Before Divi 4.0 came out, Divi’s header and menu design options were limited.
That all changed with the new Divi Theme Builder. Here’s a list of a few resources that provide specific customization tutorials we have used or saved for later.
Divi Design and Layout Plugins – Easy and Essential
- AND Divi/Extra Layout Injector $10 can read more here too
-
How to Create a Promo/Notification Bar in Divi – Free Tutorial
- How to Add Breadcrumbs to Divi Themes – Divi Breadcrumbs Module Plugin add on – $15 – (Blog Tutorial to use it) OR get the $9.95 plugin to add Breadcrumbs from the creators of DiviBooster. Related point Breadcrumb NavXT (a plugin designed for WordPress sites in general and one I tested on a Divi site running LearnDash) did NOT work with Divi & LearnDash. 🙂 Or at least I could not figure out how to make it work with divi. Breadcrumb however worked a little better, displaying the page that was showing, but not parent pages of lessons from LearnDash. This is a limited aspect of its usage but maybe others can try this in more basic Divi Scenarios!
WooChild Theme Setup Notes with Divi
Read: WooCommerce Child Theme Setup Guide from WooCommerce
If you see Deprecation errors or notices on a site running WooCommerce, especially if you see deprecation notices on a staging or test or development site, odds are you simply need to Disable errors in wp-config. More Details here (they read like looking through a muddy swamp)
Woo Layout Injector (for Divi Themes)
This Woo Commerce plugin for Divi Themes gives me one of the better all around impressions in general. It’s available in the Elegant Themes Marketplace for $22 US.
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.
It follows the Divi Injector method of enabling users to create Divi Library Templates which can then be ‘injected’ into categories, product pages and other areas easily.
Modules
- 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
- Cross Sell. Self explanatory
- Attributes. For showing attributes in a list on your Woo pages
- 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
Plugin Developer Sean Barton Tortoise IT
Smart Variations Plugin for WooCommerce
Demo available at – http://svi.rosendo.pt/free
FEATURES
- WooCommerce 3.0+ Ready
- Multiple Images for Variation
- Magnifier Lens
- Ligthbox
- Main Image/thumbnails swap on choose variation
- Custom Thumbnail Columns
- Hidden Thumbnails
- WPML Compatible
- Responsive
This is a Freemium model plugin. (Free version linked here)
Pro Version available here
PRO VERSION
- Main Image/thumbnails swap on choose variation
- Multiple Images for Variation
- Multiple Images Upload for Variation (Bulk)
- Ability to assign images to a Combination of Variations.
- Ability to use same image across multiple variations.
- Allow same image to be shared across different products with diferent variations
- Show Variation as Cart Image
- Ligthbox prettyPhoto & photoswipe
- Advanced Slider (Navigation Arrows & Color + Thumbnail Positions) – Fully Responsive
- Advanced Magnifier Lens (Lens Style & Size + Lens Border Color + Zoom Type & Effects)
- Extra Thumbnail Options (Disabled Thumbnails + Select Swap + Thumbnail Click Swap + Keep Thumbnails Visible)
- Extra Layout Fixes (Add Custom CSS Classes + Remove Image Class)
- WPML Compatible
- Responsive
- Priority Support
Awesome Woo(Commerce) Products for Divi Plugin
Cost – $24
Awesome Woo Products video overview (by the maker of the plugin)
Plugin Developer – Indikator Design
Notes – Very responsive to comments on YouTube in my experience.
Professional first impressions – Plugin looks solid. Find their demo designs a bit basic, but suspect this could be a powerful plugin. Videos have voice overs or just music at times.
Divi Commerce Plugin (WooCommerce for Divi Themes)
COST $20 – $10 ON SALE
Looks solid, we have not had the opportunity to experiment or test this one yet! (on our list to try)
Plugin Developer
WP All Import with WooCommerce Addon
The WP All Import add on for WooCommerce when used with Divi, Divi’s WooCommerce Builder, Divi’s new theme builder and (most importantly) Divi’s Dynamic Content options can provide some amazing potential to manage lots of products and pages.
Here’s a quick demo of just the WP All Import Woo Add on (its not inexpensive but for the right project can save hundreds of hours of labor costs).
This will cost either $139 for Woocommerce pro add on with WP All Import or you might go with the Elite Bundle that also includes Advanced Custom Fields too!
If you are interested in hiring us to do this for you, we have had a license we develop with since 2015.
Divi Testimonials Tips
Great Articles on Divi Testimonials
Divi Theme Menu Tips
Easy Tutorials for Divi Theme Menu Customization Awesomeness
-
Divi Plugin Highlight – Mobile Menu Customizer – “look at Mobile Menu Customizer from Divicio.us and see what it can do and the effect it would have on your website’s loading time.”
-
HOW TO USE THE TABS MODULE FOR CONTENT NAVIGATION – 3 Layouts in this tutorial “using the tabs as a kind of menu to switch between content within each tab. You can add anything you like within the content area of each tab“
-
Using anchor links to open accordions and tabs in Divi
- Using Anchor links to open tabs demo
- Creating Mega Menus in Divi (AWESOME AWESOME AWESOME EASY EASY EASY!)
- Adding Images to Your Divi Mega Menu
- How to bleed a background image behind the menu
Bottom Aligned Menu that sticks after scroll up
Divi Theme Super User Tips
Tutorials for Divi Theme Super Users to go Beyond with Divi Builder
- AC Shortcodes video tutorial Turn Divi Modules into Shortcodes (note there are other generic WP plugins that will turn pages or posts into short codes too if you want the entire page!
Customizing Divi Audio Module or WordPress Playlist
- How to style Divi Audio Module as a Podcast Player
- How to give Divi Audio Module ‘intergalactic vibes (background image)
- How to Build an awesome Podcast Module with Divi
- How to make a Record inspired Audio Module in Divi
- How to Update the default WordPress Playlist in a Divi Module
Divi Custom Post Type Tools – Pods Injection for Divi
- How to inject Divi Layouts using the popular custom Post Type PODS tool for WordPress – $10 Plugin
Tools for the Divi Feed and Excerpts
- Feed Excerpts for Divi Theme – Fixing up the Divi Feed to add excerpts back in without broken shortcode showing up
Divi working with Real Estate IDX plugins
iHomeFinder’s IDX plugin for Divi
https://www.ihomefinder.com/idx-plugin-for-wordpress/
Installing iHomeFinder – Optima Express IDX Plugin