Wpforms in WooCommerce Products is one the best and most flexible way to enhance WooCommerce functionality. Even the free version has enough which makes the form requirement complete.

If you’re looking to collect custom data like User details, user preferences or custom input before a product purchase on WooCommerce, integrating WPForms into WooCommerce product pages is a smart move. It is very useful if you running service business where you have to collect some customer data or registrations, this approach gives you flexibility and better user experience.

In this blog, we’ll walk you through exactly how to embed Wpforms on a WooCommerce product page and make sure that form data is captured, stored and shown in the final order—just like my brother Gippy helped me implement on one of our client sites.

Here we are not using any Automation or third party plugins. It’s just pure code. This Guide is for Single WooCommerce Product. If you have Multiple products

Get this our super light weight Plugin here for Multiple Products

Why WPForms in WooCommerce Is Powerful

By default, WooCommerce doesn’t allow much customization in terms of collecting custom input on a product page. You can use variations, but if you need more dynamic form fields like

Color, Type
Some contact details
Date of registration or delivery
Multi-step forms with conditional logic

That’s where WPForms shines! Pair it with WooCommerce and you’ve got a flexible custom checkout system.

What We’ll Achieve

We’ll set up and create a system where:

A Wpforms appears on the product page.
Users must fill it out before clicking “Add to Cart”.
After form submission, they’re redirected to the cart to make a payment.
After Successful payment, Forms details will be visible on WooCommerce order.

Prerequisites

WooCommerce plugin installed and activated.
WPForms plugin (free or pro depending on your field needs).
Basic understanding of WordPress file structure and plugins. (You can just follow below steps)

Step by Step Guide

Step 1 – Create Your Wpforms

Go to wpforms and create a new form
Create some required field which you wanna show on Product Page and save the form.
Now go to your product and note down the Product ID, like below image, ID displayed below the Product name in Product list.

Step 2- Customizing the wpforms

Go to wpforms and select “EDIT” on form which you wanna add in Product page.
Select “Settings” on left side menu
Then Select confirmation from right submenu. check the image below
In Default Confirmation, elect “Go to URL (Redirect)“
In Confirmation Redirect URL box, Paste this url : https://yoursite.com/checkout/?add-to-cart={product_id}&quantity=1&entry_id={entry_id}
Don’t forget to change yoursite with your domain name . Also add your product ID (without braces) which you noted in above steps.

Step 3 – Embed the Form on a Product Page

Copy your wpforms shortcode and paste in in your product short description (Because short description display first on product page)
if you wanna add same form in all products then no need of above step. just copy below code in your functions.php file. Make sure to replace ID with your wpforms id.

add_action('woocommerce_before_add_to_cart_button', function () {
    if (is_product('pet-registration')) { // Optional: Limit to specific product
        echo do_shortcode('[wpforms id="123" title="false" description="false"]');
    }
});

Step 4 – Disable “Add to Cart” Until Form Is Filled

Add this code in in your functions.php file of child theme. This code will disable the ADD TO CART button unless form submitted.

Remember this code will disable the “ADD TO CART” button for all WooCommerce products.

add_action('woocommerce_before_add_to_cart_button', function () {
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const atcBtn = document.querySelector('form.cart button[type="submit"]');
            if (atcBtn) {
                atcBtn.disabled = true;
                atcBtn.style.opacity = 0.5;
                atcBtn.title = "Please complete the form above first.";
            }

            // Listen for WPForms submission
            document.addEventListener('wpformsAjaxSubmitSuccess', function (event, formData) {
                const entryId = formData.entryId || formData.data.entry_id;
                if (entryId) {
                    // Enable Add to Cart
                    if (atcBtn) {
                        atcBtn.disabled = false;
                        atcBtn.style.opacity = 1;
                        atcBtn.title = "";
                    }

                    // Redirect to cart with entry_id in URL
                    const currentUrl = new URL(window.location.href);
                    currentUrl.searchParams.set("entry_id", entryId);
                    window.location.href = currentUrl.toString(); // Reload with ?entry_id=
                }
            });
        });
    </script>
    <?php
});

In case you wanna hide the button “ADD TO CART” for specific Products, use below code

add_action('woocommerce_before_add_to_cart_button', function () {
    global $product;

    // Add your product IDs here
    $restricted_products = [123, 456]; // Replace with real product IDs

    if (in_array($product->get_id(), $restricted_products)) {
        ?>
        <style>
            form.cart button[type="submit"] {
                display: none !important;
            }
        </style>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const atcBtn = document.querySelector('form.cart button[type="submit"]');

                // Listen for WPForms submission
                document.addEventListener('wpformsAjaxSubmitSuccess', function (event, formData) {
                    const entryId = formData.entryId || formData.data.entry_id;
                    if (entryId && atcBtn) {
                        atcBtn.style.display = 'inline-block';

                        // Optional: redirect back with entry_id in URL
                        const currentUrl = new URL(window.location.href);
                        currentUrl.searchParams.set("entry_id", entryId);
                        window.location.href = currentUrl.toString();
                    }
                });
            });
        </script>
        <?php
    }
});

For Hiding the button just replace this line “display: none !important;” to “opacity: 0.5; pointer-events: none;” in above code.

Step 5 – Save Entry ID in WooCommerce Session

Add below code in functions.php file. these codes will hook entry id into WooCommerce session and add them to order. At the end it will show data in woocoomerce Admin backend and email.

// Step 1: Capture the WPForms entry ID from the redirect URL
add_action('woocommerce_before_calculate_totals', function () {
    if (isset($_GET['entry_id']) && is_numeric($_GET['entry_id'])) {
        WC()->session->set('wpforms_entry_id', intval($_GET['entry_id']));
    }
});

// Step 2: Add the entry ID to the cart item as custom data
add_filter('woocommerce_add_cart_item_data', function ($cart_item_data, $product_id, $variation_id) {
    $entry_id = WC()->session->get('wpforms_entry_id');
    if ($entry_id) {
        $cart_item_data['wpforms_entry_id'] = $entry_id;
        // Clear after use to prevent reuse on future products
        WC()->session->__unset('wpforms_entry_id');
    }
    return $cart_item_data;
}, 10, 3);

// Step 3: Display entry ID below product name in cart & checkout
add_filter('woocommerce_get_item_data', function ($item_data, $cart_item) {
    if (isset($cart_item['wpforms_entry_id'])) {
        $item_data[] = [
            'key'   => 'Form Entry ID',
            'value' => '#' . esc_html($cart_item['wpforms_entry_id']),
        ];
    }
    return $item_data;
}, 10, 2);

// Step 4: Save entry ID to order item meta when order is placed
add_action('woocommerce_checkout_create_order_line_item', function ($item, $cart_item_key, $values, $order) {
    if (isset($values['wpforms_entry_id'])) {
        $item->add_meta_data('Form Entry ID', '#' . esc_html($values['wpforms_entry_id']), true);
    }
}, 10, 4);

// Step 5: Display below product name in order details (admin & email)
add_filter('woocommerce_order_item_name', function ($product_name, $item) {
    $entry_id = $item->get_meta('Form Entry ID');
    if (!empty($entry_id)) {
        $product_name .= '<br><small><strong>Form Entry:</strong> ' . esc_html($entry_id) . '</small>';
    }
    return $product_name;
}, 10, 2);

After adding all saving all codes. Make a demo order. You will see the Entry ID for respective order below the order details like below image. You can match the entry ID with the entries of wpforms

Final Thoughts

This approach not only enhances the user experience but also helps collect crucial data before checkout. Perfect for pet registrations, event bookings or anything custom.

Whether you’re building a pet startup or handling detailed orders, WPForms + WooCommerce is a combo worth mastering.

Let us know if you get any issues. Contact Dev below

3 Easy steps to add Wpforms in WooCommerce Products

Leave a Reply Cancel reply

Blog Categories