Skip to content

Woo Checkout Shipping

The Woo Checkout Shipping module renders the shipping address form fields on the WooCommerce checkout page.

Quick Reference

What it does: Displays the WooCommerce shipping address form (name, address, city, state, zip, country) on the checkout page. When to use it: Custom checkout page templates built in the Divi Theme Builder Key settings: Layout (Default / Fullwidth / 2 Columns), Field styling, Title Text, Field Labels Block identifier: divi/wc-checkout-shipping ET Docs: Official documentation

When to Use This Module

  • Building a custom WooCommerce checkout page template in the Theme Builder
  • Collecting shipping address details separate from billing information
  • Styling the shipping form fields to match your store's checkout design

When NOT to Use This Module

  • On non-checkout pages — this module requires the WooCommerce checkout context
  • For billing address collection — use Woo Checkout Billing
  • For general address or contact forms — use Contact Form

Overview

The Woo Checkout Shipping module integrates with WooCommerce to capture a customer's shipping address during checkout. It outputs the standard WooCommerce shipping fields — first name, last name, company, country, street address, city, state/province, and postal code — and can be placed anywhere within a custom checkout page template.

This module is one of several checkout-specific modules designed to replace the default WooCommerce checkout layout with a fully customizable Divi design. It pairs with the Woo Checkout Billing and Woo Checkout Payment modules to form a complete checkout flow.

For additional reference, see the official Elegant Themes documentation.

WooCommerce Required

This module requires WooCommerce to be installed and activated on your WordPress site. It will only render correctly on a checkout page or a Theme Builder template assigned to the checkout endpoint.

Use Cases

  1. Custom Checkout Layout — Place the shipping address form in a dedicated column alongside the billing form and order summary, giving customers a clear two-column checkout experience.
  2. Branded Checkout Flow — Style the shipping fields with your brand fonts, colors, and spacing so the entire checkout matches the rest of your store's design.
  3. Streamlined Single-Page Checkout — Combine the shipping module with billing, payment, and order details modules in a single-page layout for faster conversions.

How to Add the Woo Checkout Shipping Module

  1. Navigate to Divi > Theme Builder and create or edit a template assigned to the WooCommerce checkout page.
  2. Open the Visual Builder on the checkout template.
  3. Click the gray + icon to add a new module to a row.
  4. Search for "Woo Checkout Shipping" in the module picker, then click to insert it.

For an animated walkthrough of adding and configuring this module, see the official Elegant Themes documentation.

Settings & Options

The Woo Checkout Shipping module settings are organized across three tabs: Content, Design, and Advanced.

Content Tab

The Content tab controls the module's background, ordering, and metadata.

Setting Type Description
Background background controls Set a background color, gradient, image, or video behind the shipping form module.
Loop toggle Enable the Loop Builder feature for dynamic template contexts.
Order select Set the flexbox order of the module relative to sibling elements in the same row.
Meta admin label Assign an admin label and control module visibility inside the Visual Builder.

Design Tab

The Design tab controls the visual styling of the shipping form and its fields.

Module-specific settings:

Setting Type Description
Layout select Choose the field arrangement: Default, Fullwidth, or 2 Columns. The 2 Columns option places fields side-by-side for a more compact form layout.
Title Text text styling Customize the font, size, color, weight, and letter spacing of the section heading ("Ship to a different address?").
Field Labels text styling Style the label text above each form field, including font family, weight, size, and color.
Fields field styling Customize the appearance of the input fields themselves, including background color, text color, border, and focus states.

Shared design options — see Options Groups for detailed documentation:

Options Group Description
Text Font, weight, alignment, color, line height, text shadow
Sizing Width, max-width, height, min-height
Spacing Margin and padding (responsive)
Border Width, color, style, radius
Box Shadow Shadow effects
Filters CSS filters (brightness, contrast, hue, saturation, blending)
Transform Scale, translate, rotate, skew
Animation Entrance animation styles

Advanced Tab

The Advanced tab provides developer-oriented controls for custom attributes, conditional display, and scroll-driven effects.

Shared advanced options — see Options Groups for detailed documentation:

Options Group Description
Attributes CSS ID, classes, custom HTML attributes
CSS Custom CSS per element target
HTML Choose the semantic HTML tag for the module wrapper
Conditions Display rules (user role, page type, date, logic)
Interactions Hover, click, or scroll-triggered interactions
Visibility Device visibility toggles
Transitions Hover transition timing
Position CSS position and offsets
Scroll Effects Scroll-driven animation effects

Code Examples

Custom CSS

/* Style the shipping form container */
.et_pb_wc_checkout_shipping {
    background: #fafafa;
    padding: 30px;
    border-radius: 8px;
}

/* Style the section heading */
.et_pb_wc_checkout_shipping h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Style shipping form field labels */
.et_pb_wc_checkout_shipping .woocommerce-shipping-fields label {
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
}

/* Style shipping input fields */
.et_pb_wc_checkout_shipping .woocommerce-shipping-fields input,
.et_pb_wc_checkout_shipping .woocommerce-shipping-fields select {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 15px;
}

/* Highlight focused fields */
.et_pb_wc_checkout_shipping .woocommerce-shipping-fields input:focus,
.et_pb_wc_checkout_shipping .woocommerce-shipping-fields select:focus {
    border-color: #2ea3f2;
    box-shadow: 0 0 0 2px rgba(46, 163, 242, 0.15);
    outline: none;
}

/* Responsive adjustments */
@media (max-width: 980px) {
    .et_pb_wc_checkout_shipping {
        padding: 20px 15px;
    }
}

PHP Hooks

/* Filter the Woo Checkout Shipping module output */
add_filter('et_module_shortcode_output', function($output, $render_slug) {
    if ('et_pb_wc_checkout_shipping' !== $render_slug) {
        return $output;
    }
    // Modify $output as needed
    return $output;
}, 10, 2);

Common Patterns

  1. Two-Column Checkout — Place the Woo Checkout Shipping module in the left column of a two-column row alongside the Woo Checkout Billing module in the right column. Use the 2 Columns layout setting on each module for a compact, professional checkout.

  2. Shipping Below Billing — Stack the billing and shipping modules vertically in a single column. Customers fill out billing first, then scroll to the shipping section if shipping to a different address.

  3. Branded Field Styling — Apply your brand font to field labels, set a subtle background color on the form container, and use custom border-radius on input fields to create a cohesive, polished checkout experience.

AI Interaction Notes

Create vs. Modify

Modifying existing module content via REST API (wp.apiFetch PATCH) updates settings attributes. Creating new modules via REST API produces content that renders on the front end but may not appear in the Visual Builder layer view. Use browser automation for reliable module creation. See REST API Content Playbook.

Block identifier: divi/wc-checkout-shipping — Needs Testing

Operation Method Status Notes
Read content Parse post_content block JSON Needs Testing Use brace-depth parser — see Content Encoding
Modify existing wp.apiFetch PATCH on post endpoint Needs Testing Update block attributes in post_content
Create new Browser automation (Playwright) Needs Testing REST creation may break VB visibility
Batch modify Sequential REST requests Needs Testing See REST API Content Playbook

Key content attributes — JSON paths need verification:

Attribute JSON Path Notes
Layout attrs.layout Field arrangement (default, fullwidth, 2-columns)

Module Selection Guidance

For shipping address capture use Woo Checkout Shipping; for billing address use Woo Checkout Billing; for payment method selection use Woo Checkout Payment.

Saving Your Work

After configuring the shipping form:

  • Save changes — Click the purple Save button at the bottom of the Visual Builder, or press Ctrl+S (Windows) / Cmd+S (Mac).
  • Exit the builder — Click the X button or use Ctrl+Shift+E to return to the WordPress dashboard.

Version Notes

Divi 5 Only

This page documents Divi 5 behavior exclusively.

WooCommerce Required

This module requires the WooCommerce plugin to be installed and active. It is only available when building checkout page templates through the Divi Theme Builder.

Troubleshooting

Module Not Rendering

If the Woo Checkout Shipping module does not appear on the front end, verify that:

  • WooCommerce is installed and activated
  • The module is placed on a checkout page template (not a regular page)
  • The module is not inside a disabled section or row
  • Visibility settings are not hiding it on the current device

Shipping Fields Not Showing

If the shipping form fields are missing or collapsed, check that:

  • WooCommerce shipping is enabled under WooCommerce > Settings > Shipping
  • At least one shipping zone and method are configured
  • The "Ship to a different address?" checkbox is visible and enabled in WooCommerce settings

Fields Not Aligning in Two Columns

If the 2 Columns layout is not displaying correctly, verify that the row containing the module has sufficient width. On narrow layouts or mobile devices, the fields may stack to a single column automatically for usability.