Skip to main content

The Woo Checkout Payment Module (Divi 5)

Learn how to use the Woo Checkout Payment module in Divi 5 to style your payment options seamlessly in checkout layouts.

Updated this week

The Woo Checkout Payment module lets you insert the payment options of WooCommerce into any Divi 5 layout.

Unlike the default checkout, you can freely place this section where you want: beside billing fields, at the bottom of a two-column layout, or within a branded container.

It also gives you complete control over styling such as backgrounds, typography, spacing, buttons, and advanced effects, so your payment area feels integrated and consistent with your site's design.

Note: Before you can use the Woo Checkout Payment module, you’ll need to have WooCommerce installed and activated on your website.

Add the Woo Checkout Payment Module

  1. Click the Green Plus icon to insert a Row.

  2. Click the Gray Plus icon inside the Row, which will show the list of all available Divi modules.

  3. Open the WooCommerce folder.

  4. Find the Woo Checkout Payment module and click on it to load it. Alternatively, you can use the Search option to find it.

The Woo Checkout Payment Module Use Cases

  1. Two-Column Checkout Layout: Place the payment section beside billing and shipping fields for a cleaner, more balanced checkout experience.

  2. Sticky Payment Section: Add the module to a sidebar that stays visible while users complete their details, keeping the focus on completing the order.

  3. Promotional Checkout Pages: Position the payment area under order summaries or promotional messages, styled to emphasize the final Place Order button.

Woo Checkout Payment Module Settings Breakdown

Once you've added the Woo Checkout Payment module, its settings will automatically appear. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:

The Content tab

The Content tab allows you to add the module's text content, change its background styles, and more.

Divi 5 - Woo Checkout Payment Module's Content tab

  1. Background - Choose the Woo Checkout Payment module's background styles.

  2. Loop - Enables the loop builder.

  3. Order - Choose the Flexbox order of the module.

  4. Admin Label - Select the Woo Checkout Payment module's label text to help you keep things organized and easy to understand in the Visual Builder.

The Design tab

All the design styles and options for the Woo Checkout Payment module are in this tab.

Divi 5 - Woo Checkout Payment Module's Design tab

  1. Text - Choose the overall text styles for the Woo Checkout Payment module.

  2. Body Text - Choose the body text's design styles.

  3. Radio Buttons - Choose the design style of each radio button that displays the available payment options.

  4. Selected Radio Buttons - Choose the design style of the selected payment option.

  5. Tooltip - Choose the design styles of the tooltip. This is the text area that displays for each payment option as an additional explanation.

  6. Form Notice - Choose the design option of the form notice element. This notice appears when there are issues with the payment option, such as an invalid credit card number.

  7. Button - Choose the Place order button's design styles.

  8. Sizing - Choose the Woo Checkout Payment module's sizing.

  9. Spacing - Choose the Woo Checkout Payment module's spacing.

  10. Border - Choose the Woo Checkout Payment module's border styles.

  11. Box Shadow - Choose the Woo Checkout Payment module's Box Shadow styles.

  12. Filters - Choose the Woo Checkout Payment module's filters, including hue shifts, saturation adjustments, and blending modes.

  13. Transform - Choose the Woo Checkout Payment module's advanced design effects, including scaling, rotating, skewing, and translating.

  14. Animation - Choose the Woo Checkout Payment module's animation styles to add personality and interactivity while maintaining a polished, professional feel.

The Advanced tab

The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.

Divi 5 - Woo Checkout Payment Module's Advanced tab

  1. Attribute - Custom Attributes give you a way to add extra HTML attributes to any Divi element without editing code.

  2. CSS - Allows you to add custom CSS to the Woo Checkout Payment module.

  3. Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.

  4. Interactions: Create custom interactions, such as showing or hiding the Woo Checkout Payment module, and many more.

  5. Visibility - Choose the Woo Checkout Payment module's visibility according to different devices.

  6. Transitions - Choose how long the Woo Checkout Payment module animation takes, adding subtle and impactful animations that enhance the user experience and make your modules stand out.

  7. Position - Choose the Woo Checkout Payment module placement and create dynamic, visually engaging designs.

  8. Scroll Effects - Control how the Woo Checkout Payment module behaves and transforms during scrolling.

What's the next step?

Save your changes and exit the Visual Builder

To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.

You can also:

  1. Click on the Save button.

  2. Click on the Exit button.

Divi 5 - Save and Exit Visual Builder
Related Articles
The Woo Cart Totals Module (Divi 5)
The Woo Checkout Billing Module (Divi 5)
The Woo Checkout Details Module (Divi 5)
The Woo Checkout Information Module (Divi 5)
The Woo Checkout Shipping Module (Divi 5)
Did this answer your question?