Divi Product Highlight: DiviCommerce

Posted on September 10, 2023 by 2 Comments

Divi Product Highlight: DiviCommerce
Blog / Divi Resources / Divi Product Highlight: DiviCommerce

DiviCommerce is a third-party child theme for Divi that’s designed for building online stores. It includes lots of pages and features to create WooCommerce shops that stand out from the crowd. In this post, we’ll look at the pages and features of DiviCommerce to help you decide if it’s the right Divi child theme for your needs.

Installing DiviCommmerce

I found installing DiviCommerce to be intuitive. Install it like you would any WordPress theme but with Divi as the active theme. Got o Appearance > Themes > Add New Theme.

Installing DiviCommmerce

Select Upload Theme, click Choose File, select the DiviCommerce zipped file on your computer, and click Install Now.

Installing DiviCommmerce

Next, click Activate.

Installing DiviCommmerce

Finally, select DC Demo Import > Easy Demo Import.

Installing DiviCommmerce

Choose the files to import and click Import Demo Content. I recommend using the default settings.

Installing DiviCommmerce

Once the demo content imports, click Remove Demo Content & Import Functions. Your site now looks like the demo with dummy images to show the sizes needed. Add your content and your site is ready to use.

Installing DiviCommmerce

DiviCommerce Pages

DiviCommerce comes with 26 pages that include 6 home pages designed to create multiple types of online shops. It also includes 3 shop pages, 2 product pages, 2 checkout pages, 5 headers, 2 footers, and lots of extras. Features include Ajax product filters, cart popups, product Ajax search, popup forms, and WooCommerce variation swatches.

Let’s take a look at the layouts. I’ll break the larger layouts into smaller groups so they’re easier to manage and show images from the downloaded child theme and the product demo.

DiviCommerce Home One

The hero section shows a full-screen image with a CTA.

DiviCommerce Home One

Following this is a section for new arrivals. This includes hover effects for the product cards. A two-column section displays images that link to the shop. The images include the Ken Burns effect. Next, is another shop section with hover effects. Here’s the top portion of the product demo.

DiviCommerce Home One

The bottom half of the first home layout shows another full-screen CTA, featured products, a unique deal countdown, a blog, and images.

DiviCommerce Home One

DiviCommerce Home Two

The second home page shows a full-screen slider with CTAs.

DiviCommerce Home Two

The top half of the page includes CTAs to shop categories, a unique shop section with two products on one side and a CTA on the other, a shop section, and a full-width email signup form. All the product cards and buttons include hover effects.

DiviCommerce Home Two

The second half of Home Two shows a shop section, a deal countdown timer in a card over a full-screen background image, a blog, and images.

DiviCommerce Home Two

DiviCommerce Home Three

The top half of Home Three displays a full-width CTA, a shop section with new arrivals, a section with four images in two columns for category CTAs, and a wide email form.

DiviCommerce Home Three

The second half of the layout displays section shop sections, a blog section with a background image, and a section with customer images.

DiviCommerce Home Three

DiviCommerce Home Four

The fourth home page includes a unique hero section with two images. One is longer than the other and the text and CTA overlap both images. It also includes category images with the title at the bottom of the card and a shop section.

DiviCommerce Home Four

The second half of the layout displays two large category CTAs, a shop section, a deal section with a countdown timer, and a blog with a background image.

DiviCommerce Home Four

DiviCommerce Home Five

The fifth home page displays a full-screen hero section with the CTA on the right. It has a large section of category images with five smaller images and three larger images. Three shop sections show what’s new, what’s on sale, and the best sellers. This layout also includes the full-width email form and customer images.

DiviCommerce Home Five

DiviCommerce Home Six

The sixth home page is the most unique. It displays a sale countdown timer in the hero section. Each of the shop sections places the title in large text to the left of the section. This is followed by two image CTAs that include the title and button that overlap the image and each other. Another category section places includes images with box shadows that disappear on hover. This layout also includes the email form and customer images.

DiviCommerce Home Six

DiviCommerce Shop One

The first shop page displays a full-width image with a page title followed by the products in four columns with a sorting filter and a sidebar to the left. The sidebar includes the category, size, and color options. Products display a box shadow on hover.

DiviCommerce Shop One

DiviCommerce Shop Two

Shop Two includes a full-width image, places the products in a single column, and adds an interesting product filter where users can filter by category, size, and color above the shop section. It also includes the sorting filter and adds pagination at the bottom of the page. The filters open on hover.

DiviCommerce Shop Two

DiviCommerce Shop Three

Shop Three doesn’t include a full-width image. It places the shop categories at the top of the page with images. The shop section includes the sidebar, filter, hover effects, and pagination.

DiviCommerce Shop Three

Product Page One

The first product page displays a large, featured image on the left and the product options on the right. The product options remain in place as you scroll. Breadcrumbs at the top of the page show the customers where they are in the navigation structure.

Product Page One

Following the featured image is a set of thumbnail images and another large image. Once the large image reaches the area of the product options, the options scroll with the page.

Product Page One

Next is the description and shipping information and a section for reviews.

Product Page One

Lastly, there is a section where customers can add their own reviews.

Product Page Two

The second product page follows the design of the first but adds the description and shipping information to the product options area in the toggles.

Product Page Two

The bottom of the page adds a section of products the customer might be interested in. The product cards add box shadows on hover.

Product Page Two

Cart Popup

The cart popup appears when a product is added to the cart. It includes a field to add a coupon code, a slider with similar products, and a checkout button.

Cart Popup

Cart Page

DiviCommerce includes a styled cart page. The cart information includes a box shadow. The buttons are red to match the child theme’s design.

Cart Page

Checkout Page One

It has two checkout pages. This is the first checkout page. It places the order and payment information on the right of the checkout form. The second checkout page places this information under the form and places company information on the right of the form.

Checkout Page One

About Us

The About Us page displays angled images that stand out. The page also includes a full-width image, several areas for text, and a couple of larger images.

About Us

Contact Us

The Contact Us page displays the contact information with blurbs, displays a contact form, toggles for the FAQs, and includes a full-width map.

Contact Us

DiviCommerce Headers

DiviCommerce includes 5 headers. They include multiple sections that can be used, deleted, or swapped to another header.

Header One

The first header adds a sale bar at the top and includes a search, account login, and a link for the popup shopping cart on the right. The logo and menu are on the left.

Header One

Header Two

Header two places the search box in the top bar. The shopping cart and menu swap sides.

Header Two

Header Three

The third header places the menu in a new bar in the center and at the bottom and moves the search to the center.

Header Three

Header Four

The fourth header centers the logo and the menu, places the search on the left, and the cart on the right.

Header Four

Header Five

Finally, the fifth header places the search box in the top bar, moves the logo and menu to the left, and places the cart on the right.

Header Five

DiviCommerce Footers

DiviCommerce includes two footers. Both work well for eCommerce.

Footer One

Footer number one includes two sections. The first section contains blurbs for information provided as text. The second section includes an Image Module for the logo, a Social Media Follow Module, and lots of Text Modules for information and links.

Footer One

Footer Two

The second footer replaces the top section with an email form. The second section moves the Social Media Follow buttons to the right in its own column.

Footer Two

DiviCommerce Popup

DiviCommerce includes a popup made with the Divi Builder and a plugin called Popup Maker. The popup itself displays an email form with a sign-up CTA on one side and an image on the other side. It includes an overlay and a close button.

DiviCommerce Popup

DiviCommerce Search

The Ajax search lists the categories and products as you type. The search is fast and the results stay open, allowing the customer to click anything in the results.

DiviCommerce Search

Where to Purchase DiviCommerce

DiviCommerce is available in the Divi Marketplace for $25. It includes one year of support and updates, unlimited website usage, and a 30-day money-back guarantee.

Where to Purchase DiviCommerce

Ending Thoughts on DiviCommerce

That’s our look at the DiviCommerce child theme for Divi. This child theme includes lots of pages and layouts to build any type of WooCommerce shop. The five extra plugins with the child theme add many interesting features, such as the cart, popups, and filters. The Ajax features are fast They give the website many elegant and useful tools and stand out from the crowd.

We want to hear from you. Have you tried the DiviCommerce child theme? Let us know what you think about it in the comments.

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

2 Comments

  1. Does DiviCommerce child theme needs woo commerce plugin anyway?
    Thanks
    Cristina

    • Yes, WooCommerce is required in order to use this Child Theme.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today