Divi is both a theme and page builder used to create WordPress websites.

Divi Building Block Hierarchy

The building blocks of Divi are Sections, Rows, Columns, and Modules. Sections contain rows, which in turn contain columns, which in turn contain modules. Question – where do Divi Layers (which are just a different view kinda like Wireframe Mode), Divi Themes, Divi Layouts, and WordPress Pages (Divi Page Settings) fit? Are pages parent to Sections?

Are Layouts and Pages the same thing? https://www.elegantthemes.com/documentation/divi/customizer-layout/ you can give a custom background for the Layout.

1-Page

Use Divi Page Settings to add the Featured Image of the Post.

Gear Icon – Page Settings: The gear icon brings up the Page Settings window. This is where you can apply custom settings to that page only. These are not global settings, but will only apply to the page you are working on. (see https://www.elegantthemes.com/documentation/divi/visual-builder/)

2-Section (blue)

There are three types of sections: Standard/Regular, Specialty, and Fullwidth

Regular

asdf

Specialty

Rarely used, is a combination of section and row.

Fullwidth

Never use Fullwidth section, older technology and hopefully removed in the future version, other modules can do Fullwidth. Fullwidth modules can only be placed within Fullwidth sections.

section dividers

Using Divi Section Dividers

Divi Help – Fullwidth Slider Module – allows for text mask over an image

3-Row (green)

asdf

4-Column

asdf

5-Module

The Modules are the building blocks of the WordPress Post or Page. Sections and Rows and Columns are just the structure to hold Modules.

How do you use Divi Modules with WordPress Gutenberg Blocks? Can’t according to Farhar with Divi Support but he added it to the wishlist (10-18-2024)

The Divi Blog Module

Divi Spacing Options

Margins control the space around an object while padding controls the space inside an element.

best practice to use a margin to create spacing between multiple columns in a row. Another common use case would be to use a margin to separate elements (or modules) within a column.

Padding adds space within an element to create separation between the child element(s) it contains. For example, adding padding to a row would create spacing around the column(s) it contains. Adding padding to a column would create spacing around any elements it contains. And so on. If you want to add space inside an element and create more space between the element’s content and the element’s border, then use padding.

Appears Divi adds 54px padding to sections and rows (not modules or columns) even though the Padding field is blank. Need to manually enter 0px to override it. According to Moin from ElegeantThemes.com VIP Support, this is not documented – “There is no article on this but only SECTION & ROW has default padding. You don’t need to remove them but you can remove those spacing if needed.”

Reference

Divi Documentation – Divi Spacing Options

How do place text over an image?

Don’t use a blurb module. Instead, place the image in the Row or Column setting as the background image. Then add a Text module inside that Row/Column.

Divi Library

Ability to safe Divi Sections and Divi Modules that can easily be copied into pages and post custom templates. Will save the sidebar widget and a buy now button (module can be a button, image or text). Then just edit the product ID and we quickly added a buy now button to the bottom of each post.

References

Elegant Themes – An Overview of Divi Sections

Elegant Themes – Getting Started with the Divi Builder

Divi Theme Options

Navigate to your WordPress Dashboard → Divi → Theme Options → General

Back To Top Button: If enabled, it will display the Back To Top Button. The users can click on this button to automatically scroll to the top of the page.

References

Using The Divi Theme Options

Divi Theme Builder

Use the Theme Builder to customize your header, footer and post templates. The Divi Theme Builder is an interface within Divi that allows you to use the Divi Builder to construct theme templates and assign those custom templates to pages or posts across your theme. For example, you can build a custom post template layout for all blog posts using the Divi Builder. Custom templates allow you to create templates for pages or posts you don’t want to inherit the default template. In our case, create custom template for All Posts, All Products, and so on.

See Divi Help – Using The Divi Theme Builder

Default Website – Template

Global Header

Menu – Dropdown menus appear when hovering over main menu links that contain sub-links. Dropdown menus are created and managed via the WordPress dashboard under “Menus”.

Menu – Hover Background Color

Need Custom CSS to change the drop down menu hover background color.

Add this to the Divi Fullwidth Menu Module, under Advanced -> Custom CSS

selector .et-menu ul li a:hover{
    background-color: #2ea3f2; /* Please change the value according to your need*/
}

Divi Help – The Divi Fullwidth Menu Module

Global Footer

All Posts – Custom Template

A blog post template is a site-wide template used for single blog posts on your website. It is a predesigned template built with dynamic content so that any new or existing post will automatically inherit the layout and design of the assigned template. Having a ready made template for your posts can speed up the blogging process by eliminating the need to design the elements of the post on the fly and just focus on writing content. Also a blog post template can incorporate extra elements (like comments, share buttons, and email options) to the post to increase user engagement. (see What is a Blog Post Template and Why Do You Need One?)

Related Blog Posts

Reference – How to Add Related Posts to Your Divi Blog Post Template

What a post slider that moves/scrolls/slides between all the posts in that category. So if I have 10 posts in the current category, at the bottom of the post I would like a slider to scroll and see the other 7 (first 3 should already be visible). Example from Natural Living Family Blog. My current blog, clicking older post loads a new page.

Sidebar – Divi uses WordPress

Edit sidebar margins and padding using custom CSS

Recommend changing the Sidebar Sticky Position to “Do Not Stick” otherwise the for long posts, if you want to get to the bottom of the Sidebar, you have to scroll down to the bottom of the post because it is sticky on the top.

Remove Sidebar Widget from Product Pages

To avoid confusing customers when they start the purchasing process, it is recommended to remove the sidebar widget from product pages. Here is the procedure:

Example product page: https://www.barefootbetters.com/product/mason-jar-blender-top-for-vitamix

Step 1 – create Divi Custom Theme Builder template for “All Products”

To remove the vertical gray line, change the background color the All Products -> Custom Body, under section settings with Background = #FAFAFA

References

Divi Help – The Divi Sidebar Module

All Products – Custom Template

WooCommerce Product – Stock

1. In Stock
   • Visibility
     • Product is visible to the customers in the shop and search
   • Purchasable: Yes. The ‘Add to Cart’ button is active
   • Stock Quantity: Must be >0 or stock management is disabled
2. Out of Stock
   • Visibility:
     • By default: product is hidden from the shop/catalog if the WooCommerce setting “Hide out of stock items from the catalog” is enabled.
     • Otherwise, it’s visible but shows as “Out of stock”
   • Purchasable: No. “Add to Cart” button is removed or disabled.
   • Stock Quantity: typically 0, and the product is not set to allow backorders
   • Optional Message: N/A
3. On Backorder

Out of Stock – Still display the product but disable the “Add to Cart” button. Confirm the “Out of stock visibility” is unchecked.

Out of Stock example – add to cart button disabled

All Product Category Pages – Custom Template

The idea is https://www.barefootbetters.com/product-category/ is the parent page for product categories, and

Child pages are the product groups (Essential Oils, Soaps, Herbs, etc)

1. Cooking & Recipes – Raquel
2. Essential Oils https://barefootbetters.com/product-category/essential-oils/
3. Herbs & Formulas
4. Mason Jar Accessories
5. Services: WordPress – Ernie, Energy – Joan, Counseling – Bill, Women’s Health – Rachel
6. Soaps & Containers

Grandchild pages are the actual products

1. Cypress Essential Oil by Nature’s Fusions
2. Cypress Essential Oil by doTERRA

Search Results – Custom Template

wptools.io – WC Ajax Product Filter plugin provides sorting and tech support form.

Divi Engine – Divi Ajax Filter – can filter by categories and subcategories. Demo site.

Filter Everything plugin

All Category Pages – Custom Template

Post Category and Post/Category Title. Recommend using a Text Module and Post Title Module. The below screenshots just use a Text module and add HTML tags before and after. This is recommended by How to Design a Blog Post Template with Divi’s Theme Builder but is written in 2022 and I feel there are better ways (use Text Module and Post Title Module). Non-standard way to edit Text in Divi using this HTML tags before and after.

asdf

My Account – Custom Template

My Account Features

1. My Account – display user information
   • Name
   • Email
   • Change Password
   • Avatar
2. My Orders
   • Order History and Details
3. My Wishlist integration (YITH WooCommerce Wishlist)
4. Downloadable Products Access
5. Address Book
   • Edit Billing address
   • Edit Shipping address
6. Payment Methods
7. Coupons
8. Store Credits
9. Newsletter subscription
   • Manage newsletter
   • MailPoet plugin can link the subscription management page directly to this endpoint
10. Support
    • FAQ – create a simple FAQ page and link to it under My Account
    • Contact Form – create a contact form using Contact Form 7 or another plugin and link the form page to this endpoint. See wbcomdesigns.com help
    • Communication
11. Logout

Swanson Vitamins – My Account

Eden Botanicals – My Account

Susan’s Soaps – My Account

Susan’s Soaps – My Account – Payment Methods

References – my account

Elegant Themes – How to Design Custom Account Pages for WooCommerce with Divi Builder

Elegant Themes – Woo Module Settings

UsersInsights – How to add a profile picture to a WooCommerce User and How to Customize the My Account Page in WooCommerce

WBCOM Designs – WooCommerce Custom My Account Page is free and recommended by James Allen at Website Learners. Documentation on Woo Custom My Account – login to https://wbcomdesigns.com/wp-login.php and go through the checkout process, the plugin is free, and when done, you will be given a link to download the plugin .zip file.

WBCOM Support – https://wbcomdesigns.com/support and support@wbcomedesigns.zohodesk.com – help from CEO of Wbcom Designs – Varun Dubey. Available at upwork – https://www.upwork.com/agencies/wbcomdesigns/

Shop – Custom Template

Cart – Custom Template

The customer order flow goes #1 Shop -> #2 Cart -> #3 Checkout -> #4 My Account

Divi -> Theme Builder -> Cart Custom Template

WordPress Page -> Cart

1. Top of Page
   • Promo bar/banner – free shipping on orders over $75
   • Woo Notice button – “Only $10.00 From Free Shipping”
   • Shopping Cart text – might need smaller size than default
2. Cart
   • left column: Product image thumbnail – might need to increase size, see The Divi Woo Cart Products Module
   • right column: Cart totals
   • Calculate shipping
3. Buttons
   • left column: Apply Coupon – enter Discount Code
   • left column: Update Cart
   • Continue Shopping – appears doesn’t work with Divi
     • might need to install plugin (Continue Shopping for WooCommerce)
     • How to Add Continue Shopping button in WooCommerce
   • right column: Checkout
4. Bottom of Page
   • Woo Cross Sells Module – “You Might Also Like”

Divi Help – Cart Custom Template

How to Create a WooCommerce Cart Page Template with Divi

How to Create an Animated Promo Bar for Your Page Templates in Divi

The Divi Woo Cross Sells Module

The Divi Woo Cart Products Module

Example Shopping Carts

Bumblebee Linens – shopping cart

Site Zinc – shopping cart

Barefoot Betters – shopping cart

Eden Botanicals – shopping cart

Susan Soaps – Shopping Cart

kid in charge – Shopping Cart

Plant Therapy – Shopping Cart

Woo Notice Page Type – Cart

Divi Help – WooCommerce Notice

Woo Notice Page Type Product – button is cart

Woo Notice Page Type Cart – button is “update cart”

Woo Notice Page Type Checkout – button is coupon

How do I turn on the “view cart” button in the Woo Notice module for Page Types Product and Checkout? See the Divi example at https://www.elegantthemes.com/demos/product/essential-oil/

The Woo Cart Notice Module allows you to add the WooCommerce Cart Notice element to any WC product page in Divi. The Cart Notice element is a notification that pops up on the page whenever a user successfully adds a product to the cart by clicking the Add to Cart button. In addition to a notification message, the cart notice also provides a “view cart” button.

Woo Cart Notice Module Key Options

In addition to the common content, design, and advanced options available to all Divi Modules, the Woo Cart Notice module has the following design options:

• Text – for styling the notification text
• Button – for styling the “view cart” button within the Cart Notice.

By default, the Cart Notice will have a background color that is relative to the default theme accent color within the theme customizer settings. But you can easily override this styling within the Cart Notice Module design settings.

Checkout – Custom Template

Problem with Divi Checkout and WooPayments plugin

Divi Help – Checkout Custom Template

The Divi Woo Checkout Shipping Module

The Divi Woo Checkout Billing Module

Divi Woo Modules

 Divi has a total of 16 Woo Modules, see Divi WooCommerce Modules

1 of 16 Woo Breadcrumb Module

asdf

2 of 16 Woo Title (Product Title) Module

asdf

3 of 16 Woo Images (Product Images) Module

Barefoot Betters uses a 480×480 with transparent background.

Amazon wants the main image to have a white background, see Jungle Scout – Amazon Product Images Requirements & Best Practices

4 of 16 Woo Gallery (Product Image Gallery) Module

asdf

5 of 16 Woo Price (Product Price) Module

asdf

6 of 16 Woo Add to cart Module

asdf

7 of 16 Woo Rating (Product Rating) Module

asdf

8 of 16 Woo Stock (Product Stock) Module

asdf

9 of 16 Woo Meta (Product Metadata) Module

Product SKU, Categories, and Tags

10 of 16 Woo Description (Product Description) Module

asdf

11 of 16 Woo Tabs (Product Tabs) Module

Please don’t use Divi Woo Product Tabs module, limited as it can’t use WooCommerce Product Custom Fields. Use Pee-Aye Creative’s Divi Tabs Maker instead, as it can do everything Divi Woo Product Tabs can do and more.

How do you display Custom Fields (meta information) for the product? This cannot be done (12/20/2024) with just WooCommerce and Divi. Have to use a plugin instead

• WCPT (WooCommerce Product Table) plugin
• WooCommerce Product Tabs (free version) plugin – doesn’t display custom fields
• Divi Tabs Maker by Pee-Aye Creative

Custom Fields

WP-admin -> Products -> Add New or Edit existing product -> Screen Options -> check Custom Fields (see WooCommerce Help – Custom Fields on Products). Also see Custom Fields in Using Divi Dynamic Content Options. WordPress documentation – Assign custom fields.

To see custom fields on a blog, Dashboard -> Posts -> Edit post Preferences

Note, when Divi displays Custom Field Labels (not values) it replaces both underscores “_” and dashes “-” with a blank space ” “.

• Weight-g displays as Weight G (note contents weight of essential oils, excludes bottle weight)
• Volume-ml displays as Volume Ml (note contents volume of essential oils, excludes bottle volume)
• Density-gml displays as Density Gml
• PriceR (Price Retail, $)
• PriceR-UV-USDml displays as PriceR UV USDml (Price Retail Unit Volume $/milliliter)
• PriceR-UW-USDg displays as PriceR UW USDg (Price Retail Unit Weight $/gram)
• PriceW (Price Wholesale, $)
• PriceW-UV-USDml displays as PriceW UV USDml (Price Wholesale Unit Volume $/milliliter)
• PriceW-UW-USDg displays as PriceW UW USDg (Price Wholesale Unit Weight $/gram)
• Retail_Unit_Price_Weight
• Retail_Unit_Price_Weight_usd_g

It seems you have to manually create custom fields for each product, which is cumbersome.

Divi Tabs Maker by Pee-Aye can use Custom Fields. It appears WordPress Custom Fields is the same thing as WooCommerce Product Custom Fields.

12 of 16 Woo Additional Information (Product Additional Information) Module

asdf

13 of 16 Woo Related Products Module

asdf

14 of 16 Woo Upsells (Product Upsells) Module

asdf

15 of 16 Woo Cart Notice

asdf

16 of 16 Woo Reviews (Product Reviews) Module

asdf

Woo Products Module – Bug

WooCommerce has another way to categorize Products using Brands. Brands are stored as taxonomies in WooCommerce instead of as fields or meta fields. Problem: There is a bug with Divi, and we are unable to customize the module using Divi Theme Builder -> Archive Pages -> All Brands Pages, along with the Divi Woo Products module. The problem is that all products are displayed instead of just a single brand and all products within that brand.

So the current solution is to either accept the default display or use ShortCodes (see WooCommerce Documentation). Here is example default brand pages – www.barefootbetters.com/brand/plant-therapy

Plugins

WooCommerce Product Table (WCPT)

How to disable the Cart Widget, see WCPT FAQ

custom field with hyperlink

Create a ‘Download button’ for product files like PDF in your table – WCPT Documentation

Sort Column Headings

Incorporate sorting icons into the column headings of your product table. This will allow shoppers to sort products by clicking on the headings. Customers will be able to arrange products based on various criteria, making it easier for them to compare and find items they are most interested in.

Sort by Brand

From the WordPress Dashboard -> Product Tables. Select Columns tab, then click on the Brand field. Under Column heading tab, click Add element button

References

Divi Help – Divi Modules

WC Product Table PRO – Show sorting icons in column headings

WooCommerce Products

Product Identification – SKU

Stock Keeping Unit (SKU)

Amazon Standard Identification Number (ASIN) is 10 character code assigned by Amazon

Universal Product Codes (UPC) barcodes are 12 digit numeric codes purchased from GS1 (www.gs1us.org)

1. YL#### = Young Living
   • #### = Young Living Item Number. Example Item numbers: 3074 is Lime Essential Oil, 3602 is Orange Essential Oil, and 3578 is Lemon Essential Oil.
2. DT######## = doTERRA
   • ######## = doTERRA Item Number. Example Item numbers: 30870001 is Lime Essential Oil, 30170001 is Wild Orange Essential Oil, and 30120001 is Lemon Essential Oil.
3. AM??#### = Amrita
   • ??#### = Amrita Product Code. Example product codes: EO4401 is Orange Sweet Organic Essential Oil
4. PT = Plant Therapy
   • Persian Lime Essential Oil – doesn’t show an item number
5. NF = Nature’s Fusions
   • Lime Essential Oil – doesn’t show an item number

Custom Product Fields – Global Attributes, Custom Attributes and Custom Fields

In essence, while attributes work to organize products into categories or groups based on shared characteristics, custom fields add depth to a product’s individual listing by offering additional information that is specific to that particular item.

Global Attributes – filter and sort products by Brand (Plant Therapy, Nature’s Fusions, Amrita, etc). Function similar to taxonomies. Helps customers navigating and discovering products through common attributes such as Color, Size, or Material.

Custom Attributes – product specific

Custom Fields – are not used to filter and sort products but to provide specific information about the product such as MSDS link, wholesale price, weight, volume, and so on. Custom fields are additional metadata of your products. Providing specific product details that aren’t covered by the default product fields. (see WooCommerce Help – Custom Fields on Products)

Advanced Custom Fields (ACF)

Display Divi Library Shortcodes in a Product

ACF in Divi Step 1 – Divi Library -> Add New Layout

Row name: EOE-Arborvitae where EOE=Essential Oil Emotions

Row module with sizing width=100% and max width=100%

Category: EO-Emotions

Add a Text Module and copy the Essential Oil Emotions Description

Then write down the shortcode, for example “

ACF in Divi Step 2 – ACF -> Field Groups

Label: Product Shortcode

Name: product_shortcode

Type: Text

Settings -> Location Rules: Post Type is equal to Product

ACF in Divi Step 3 –

ACF in Divi Step 4 – WooCommerce Product

ACF in Divi Step 5 – Divi Theme Builder -> Products in Specific Categories: Essential Oils Body Layout -> Edit (pencil icon)

Determine where you want to display the Divi Library shortcode on the products page, then add new Text Module -> Content tab.

Select Use Dynamic Content button (image of three discs with + symbol), then scroll down to ACF: Products

Now the Body heading should show Product Shortcode. Click the green checkbox in the bottom right corner to save.

Child Theme

Using a Child theme will ensure that any customization is preserved when the parent theme is updated. See How to Create a Child Theme for Divi.

Step 1 – download Child Theme Configurator (child-theme-configurator.2.6.6.zip)

Step 2 – WordPress Dashboard -> Plugins -> Upload Plugin button -> child-theme-configurator.2.6.6.zip. Install and then Activate Plugin.

Step 3 – WordPress Dashboard -> Tools -> Child Themes

References

Code Snippets – https://divibooster.com/using-the-code-snippets-plugin-with-divi/

Spam Protection

Enable Divi spam protection on both the Contact Form Module and the Email Optin Module, see How to Add Google ReCaptcha to the Contact Form Module and Email Optin Module

References – Spam Protection

Divi Help – The Divi Contact Form Module

Divi Help – The Divi Email Optin Module

Table of Contents

Help – Exclude unwanted headings – Use the Divi Admin label “p ac – d tocm – e xclude” at highest level like Section, Row, then Module

WordPress Menu

Home

About

Contact

Blog

Account

Shop

Shop -> All Products

Shop -> Product Categories

Nothing is being displayed here, need to fix

Product Categories (different from Blog Categories)

1. Companies/Brand
   • doTERRA
   • Nature’s Fusions
   • Plant Therapy
2. Containers
   • Essential Oil bottles, roller bottles, cap remover tool,
   • Mason Jars
   • Mason Jar Accessories (flip top lids, shaker wire whisk balls, jar jackets)
   • Soap Case
3. Essential Oils
   • Clove
   • Cypress
   • Tea Tree
4. Herbs & Oils
   • Herbally Grounded
   • Shaving Oil
   • Heart Oil
5. Soaps
6. Recipes and Formulas

Shop -> Product Categories -> Companies

Shop -> Product Categories -> Essential Oils

Step 1: Divi Theme Builder -> All Product Category Pages

Step 2: Text Module to display Snippet

Step 3: write Snippet shortcode – et_display_categories called Product Subcategory shortcode

WordPress Pages

Page – Home

home-7 Explanatory paragraph

Write a paragraph that 1-States the Problem, 2-Provide a Solution, and 3-Define what Success looks like.

Our artisanal soaps work harmoniously with your skin’s natural balance, helping address common skin concerns through carefully selected essential oils and natural ingredients. Each bar is thoughtfully crafted to cleanse without stripping your skin’s protective barrier, while nourishing oils and botanical ingredients help soothe irritation and reduce inflammation. While these soaps are an excellent foundation for skin health, they work best as part of a complete skincare approach, which includes eating anti-inflammatory foods and healthy bowels to remove toxins and waste that build up in the body. This mind-body connection helps improve circulation and overall skin vitality from the inside out. When using our soaps as part of your daily ritual, you’ll notice your skin becoming more radiant and resilient – feeling softer, looking more luminous, and maintaining a healthy, natural glow. Many customers report their skin feeling cleaner, more balanced and revitalized after incorporating our soaps into their skincare routine.

home-8 testimonials

home-9 Lead Magnet section

References

1. How To Build a Homepage That Works With StoryBrand by Kari at Wild Fig Marketing

Page – Category

How to display a grid of categories in Divi for posts, WooCommerce Products, Events, Or Other CPT (blog post) by Pee-Aye Creative

Backup

How to Recover Missing or Deleted Content on a Page

Use the WordPress Revision System (WordPress Dashboard -> Pages -> All Pages, then Edit the page that lost the content or layout. From the right sidebar, click on the Revisions link. See Divi Help – How to Recover Missing or Deleted Content on a Page