Elementor Form to WooCommerce Checkout

There are several ways specifically designed to bridge Elementor Forms and WooCommerce.

Can I add any WooCommerce product here in this form?

The short answer is yes, it is possible, but it isn’t a native feature of the standard Elementor Form widget you are currently using. By default, that form is designed to send emails or save data to a database, not to talk directly to the WooCommerce cart system.

To achieve a “Form-to-Checkout” flow where the “Service Interested In” selection determines the product and price, you have three main routes:

1. The “Add to Cart” Redirect (No Extra Plugins)

You can use a bit of “URL hacking.” Every WooCommerce product can be added to the cart via a specific link: [yourdomain.com/checkout/?add-to-cart=ID](https://yourdomain.com/checkout/?add-to-cart=ID).

• How to do it: In your Elementor Form settings, go to Actions After Submit and select Redirect.
• The Catch: This is tricky with a dropdown because the Redirect URL needs to change based on what the user picks. You would need a small snippet of JavaScript to listen for the form submission, grab the Product ID from your “Service” field, and then send the user to the correct URL.

2. Using Elementor Pro + “Actions After Submit” Plugins

There are several third-party add-ons specifically designed to bridge Elementor Forms and WooCommerce. Plugins like Piotnet Addons for Elementor (PAFE) or Elementor Forms WooCommerce Integration allow you to:

• Map form fields to WooCommerce products.
• Automatically add the selected item to the cart upon clicking “Send.”
• Redirect the user straight to the Checkout page.

3. Dedicated Form Plugins (Recommended for Stability)

If this is for a professional service where price accuracy is critical, the standard Elementor Form might be too limited. Using WPForms, Gravity Forms, or Fluent Forms is often better because:

• They have native WooCommerce “Products” fields.
• They handle “Calculated Fields” if the price changes based on multiple selections (e.g., Service A + Premium Support).
• They have built-in “Redirect to Checkout” toggles.

How to add the product under the select field in the form?

To achieve this specifically using the Elementor Form widget , you need to bridge the gap between the form data and the WooCommerce cart system. Since the standard form doesn’t “know” what a WooCommerce product is, you have to tell it.

Here is the most efficient way to set this up:

1. Set up the “Service” Field

In your Elementor Form, go to the Service Interested In field settings:

• Type: Select (Dropdown).
• Options: You must use the “Label | Value” format. The “Value” needs to be the Product ID of your WooCommerce service.
  • Example:
    • Consultation | 101
    • Full Application | 102
    • Visa Support | 103
    • Premium Coaching | 104
• (To find a Product ID, go to Products > All Products in your dashboard and hover over the product name).

2. Configure the Redirect

Under the Actions After Submit tab in the left panel:

1. Add Redirect.
2. Open the Redirect settings toggle.
3. In the Redirect URL box, enter: [https://yourdomain.com/checkout/?add-to-cart=](https://yourdomain.com/checkout/?add-to-cart=)[field id="field_260d61c"]

3. Enable “Redirect to Cart” in WooCommerce

For this “URL hack” to work seamlessly, go to your WordPress Dashboard:

• WooCommerce > Settings > Products > General.
• Ensure “Redirect to the cart page after successful addition” is checked.
• (Optional) If you want to skip the cart and go straight to payment, you can use a “Direct Checkout” plugin or change the Redirect URL in step 2 to point to /checkout/ as shown above.

Why this works:

By using the selection from the Service Interested In field as a dynamic parameter in the URL, the website treats the form submission as a command to add that specific Product ID to the cart and immediately load the checkout page.

The JavaScript Solution

If the redirect is still failing despite having the correct URL and WooCommerce settings, the issue is likely how the Elementor Form handles the “Actions After Submit” sequence.

Since you are a professional web developer, we can solve this using a small piece of JavaScript. This method is much more reliable than the standard Elementor redirect because it forces the browser to move to the checkout page once the form submission is verified.

The JavaScript Solution

Add an HTML Widget anywhere on the same page as your form and paste the following code:

Copy the code and paste it into the HTML widget. (Make sure you use your field ID here without brackets and your domain name.)

---

<script>
jQuery(document).ready(function($) {
    $(document).on('submit_success', function(event, response) {
        // Find the specific field value (Product ID) from your form
        var productId = $('select[name="form_fields[field_(use field id here)]"]').val();
        
        if (productId) {
            // Redirect directly to checkout with the selected product
            window.location.href = 'https://yourdomain.com/checkout/?add-to-cart=' + productId;
        }
    });
});
</script>

---

Why this works:

• Listens for Success: It waits until the form is successfully submitted to the database/email.
• Grabs the ID: It looks exactly at field_260d61c (the ID from your screenshot) to see which service was chosen.
• Forces Redirect: It bypasses the Elementor “Redirect” setting, which sometimes fails due to server-side conflicts or caching.

Important Final Verification:

1. Remove the Redirect Action: Go back to your form settings and remove “Redirect” from Actions After Submit. Let the code handle the movement instead.
2. Check Field Names: In the code above, I used field_260d61c. Open your live page, right-click the “Service” dropdown, and select Inspect. Ensure the name attribute of that select tag matches what is in the code.
3. Product Visibility: Ensure the products (IDs 4161, 4167, 4634, 4165) are set as “Simple Product” and “Virtual” in WooCommerce so the checkout page loads instantly without shipping calculations.

Try this code, clear your Litespeed/WP Rocket cache, and test it in an incognito window.