Back to Documentation
Integration

WooCommerce Integration

Seamlessly integrate custom forms with WooCommerce products. Add forms to product pages, sync with cart, and manage orders.

9 min read
Updated December 2024
Seamless WooCommerce IntegrationDynamic pricing • Add to cart • Order management • Checkout integration🎁WOOCustom ProductConfigure your perfect item$100.00$125.00+25%Add to CartForm Builder OptionsPremium Material+$25Express Shipping+$15Gift Wrapping+$10Quantity:3+-Total Calculation:Base: $100 × 3Options: +$25$375Real-time Price Updates🛒Direct Cart Integration💰Dynamic Pricing Rules

Overview

Woo Form Builder integrates deeply with WooCommerce, allowing you to attach custom forms to any product. Form data syncs automatically with cart items, appears in order details, and can affect product pricing dynamically.

🔗

Product Attachment

Assign forms to any WooCommerce product

🛒

Cart Sync

Form data appears in cart and checkout

📦

Order Details

View submissions in order admin panel

Attaching Forms to Products

Method 1: Product Edit Screen

Step-by-Step Guide

  1. 1
    Navigate to Products: Go to WooCommerce → Products in your WordPress admin
  2. 2
    Edit Product: Click "Edit" on the product you want to add a form to
  3. 3
    Find Form Builder Section: Scroll to the "Woo Form Builder" meta box
  4. 4
    Select Form: Choose your form from the dropdown menu
  5. 5
    Update Product: Click "Update" to save changes
✓ Form Now Appears:

The form will display on the product page above the "Add to Cart" button. Customers must complete the form before adding the product to their cart.

Method 2: Form Settings

Assign from Form Builder

  1. 1
    Go to Woo Form Builder → All Forms
  2. 2
    Click Edit on your form
  3. 3
    Go to Settings → Product Assignment
  4. 4
    Select one or more products to attach the form to
💡 Bulk Assignment:

This method is faster when you need to assign the same form to multiple products at once.

Form Display on Product Page

Product Page Layout Example

Custom T-Shirt

$25.00

Create your custom t-shirt with personalized text and design options.

Customize Your Product

Cart & Checkout Integration

Cart Display

Form data automatically appears in the cart as product meta:

Cart Item Details

Custom T-Shirt
Size: Large
Color: Black
Custom Text: "Team Winner"
$25.00
Qty: 1

Checkout Page

Form data is preserved throughout the checkout process:

Order Review Section

ProductTotal
Custom T-Shirt × 1
Size: Large | Color: Black
Custom Text: "Team Winner"
$25.00
Subtotal$25.00
Shipping$5.00
Total$30.00

Order Admin Panel

View all form submission data in the order details:

Admin Order View

Order #12345
Customer
John Doe
Order Date
Dec 20, 2024
📝 Form Submission Data
Size:Large
Color:Black
Custom Text:"Team Winner"
Custom Image:
✓ Order Status: Processing

Form data is saved and ready for production

Dynamic Pricing Integration

Form fields with Smart Pricing automatically update the product price in cart and checkout:

Price Calculation Example

Base Product Price:$25.00
Size: Large (+$5.00)$5.00
Custom Text Printing (+$8.00)$8.00
Rush Processing (+$15.00)$15.00
Final Price:$53.00

Product Types Support

✓ Supported Product Types

  • ✓ Simple Products
  • ✓ Variable Products
  • ✓ Grouped Products
  • ✓ External Products

🎯 Best Use Cases

  • • Custom product configuration
  • • Made-to-order items
  • • Personalized products
  • • Products with add-ons

Required Form Validation

Set forms as required to prevent cart addition without completion:

Form Validation Before Cart

If your form has required fields, customers cannot add the product to cart until all required fields are completed. This ensures you receive all necessary information for each order.

Best Practices

💡 WooCommerce Integration Tips

Test Checkout Flow: Always complete a test order to verify form data appears correctly
Clear Form Labels: Use descriptive field names that will make sense in order details
Mobile-Friendly Forms: Keep forms short and touch-friendly for mobile shoppers
Price Transparency: Always show how form selections affect the final price
Email Notifications: Set up admin notifications for products with custom forms

Ready to Create Your First Form?

Follow our getting started guide to build and attach your first custom form

Get Started Now →