Display WooCommerce products inside Elementor Forms and automatically redirect users to the checkout page with selected products.
Overview
Integrate WooCommerce Checkout with Elementor Forms adds a dynamic product selection field to Elementor Pro Forms.
It lets you display a list or grid of WooCommerce products directly inside your form.
When the form is submitted, the plugin automatically adds the selected products to the WooCommerce cart and redirects the customer to the checkout page.
Perfect for custom order forms, donation pages, and one-click Buy Now experiences.
Requirements
- WordPress 4.8+
- WooCommerce 7.x or higher
- Elementor Pro 2.x or higher
- PHP 5.4+
Installation
- Upload the plugin folder to /wp-content/plugins/
- Activate it via Plugins → Installed Plugins.
- Make sure WooCommerce and Elementor Pro are active.
- Edit any page with Elementor.
- Add a WooCommerce Product field to your form.
- Save and test your form — when submitted, it will go directly to checkout!
How It Works
1. Add the Product List Field
- In Elementor, drag in the Form widget (Pro only).
- Click Add Item → select type WooCommerce Product.
- Choose products manually or by category.
- Configure your display type: Grid, List.
2. On Form Submission
When users click Submit, the plugin will:
- Add all selected products (and variations if any) to the WooCommerce cart.
- Redirect them automatically to the Checkout Page (/checkout).
Use Cases
| Type | Description | Example |
|---|---|---|
| Quick Order Form | Let customers select and buy a product instantly | Buy Now button inside a landing page |
| Service Form | Choose service type and quantity | Cleaning service, web maintenance, etc. |
| Donation Form | Choose donation amount (each as a product) | $10, $25, $50 donations |
| Custom Checkout Page | Replace Woo default checkout with a form-built version | Elementor-based checkout design |