Make your first Online Store using Divi & WooCommerce

Customize the header with the Divi theme customizer, adjusting the navigation bar, logo, accents, and typography while adding a secondary header with contact info for accessibility and SEO.

Design a store hero with Divi's builder. Create a full-width header featuring an h1, subtext, and a call-to-action button in a two-column layout, styled with typography, gradient background, and imagery.

Set up a featured product with a two-button cta and a two-column layout containing an image module and text, including a shop now button, highlighting your best seller.

Set a steady learning pace by taking breaks, reflecting on lessons, and practicing what you’ve learned to reinforce motivation and prevent binge learning.

Import your first products into WooCommerce, set physical products with price and sale price, and add long and short descriptions, then link images to the product page in Divi.

Create category sections in your WooCommerce store using Divi's visual builder, adding latest and on-sale product blocks, call-to-action modules, and consistent design to link the shop page.

Create a sale products section in Divi and WooCommerce by duplicating a layout, setting three columns, displaying only on-sale items, and planning social proof in the next lecture.

Build a Divi WooCommerce reviews section featuring latest product reviews with comments, avatars, and ratings, plus three blurbs for secured payments, free shipping over 1000 rand, and 24/7 support.

Set up PayPal and Payfast in WooCommerce to accept payments. Configure shipping zones and flat rates (100 rand), enable the shipping calculator, and hide costs until address entry.

Enable the Visual Builder and replace the default hover arrows with a pink overlay arrow for sale products. Next, use the Divi Builder to craft attractive product pages.

Build a contact us page for your online store with the Divi visual builder. Add a responsive contact form, link it in the menu, and optimize fields and padding.

Build a custom product page template in Divi for all products using the theme builder, with dynamic content for title, image, price, stock, and reviews.

Learn to customize the WooCommerce cart page using the visual builder, editing cart modules, and styling buttons, fields, and hover states to create a cleaner, brand-consistent checkout experience.

Set a consistent global button design for WooCommerce using the Divi theme customizer, adjusting text color, background, transparency, font (Leksand), and hover styles with border radius 15, then publish.

Build a custom Divi shop page for WooCommerce by creating a two-column layout, adding products and cart totals, and styling a full-width header with a logo.

Create a global footer in the Divi Theme Builder for your online store with a two-column layout, including a logo, about text, links, and social icons.

Invite learners to share their built workshops and pages in the project section, celebrate what they've learned in this course, and look forward to the next session.