{"id":4356,"date":"2025-04-12T11:50:38","date_gmt":"2025-04-12T11:50:38","guid":{"rendered":"https:\/\/scriptfeeds.com\/blog\/?p=4356"},"modified":"2025-04-12T20:53:54","modified_gmt":"2025-04-12T20:53:54","slug":"add-wpforms-in-woocommerce-products","status":"publish","type":"post","link":"https:\/\/scriptfeeds.com\/blog\/wordpress\/add-wpforms-in-woocommerce-products\/","title":{"rendered":"3 Easy steps to add Wpforms in WooCommerce Products"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<p>If you&#8217;re looking to collect custom data like <strong>User details, user preferences or custom input<\/strong> before a product purchase on WooCommerce, integrating <strong>WPForms<\/strong> 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.<\/p>\n\n\n\n<p>In this blog, we\u2019ll walk you through exactly <strong>how to embed Wpforms on a WooCommerce product page<\/strong> and make sure that form data is captured, stored and shown in the final order\u2014just like my brother <strong><em>Gippy <\/em><\/strong>helped me implement on one of our client sites.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-link-color has-medium-font-size wp-elements-b93bf7d6d6ef61d19336c37dfc993679\"><strong>Here we are not using any Automation or third party plugins. It&#8217;s just pure code.<\/strong> <strong>This Guide is for Single WooCommerce Product. If you have Multiple products<\/strong><\/p>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-link-color has-medium-font-size wp-elements-5b3ec09b535e4b6d6f433f8ed5bfe33d\"><strong><a href=\"https:\/\/scriptfeeds.com\/blog\/services\/wpforms-in-wocoomerce-plugin\/\">Get this our super light weight Plugin here<\/a><\/strong> <strong>for Multiple Products<\/strong><\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#why-wp-forms-woo-commerce-is-powerful\">Why WPForms in WooCommerce Is Powerful<\/a><\/li><li><a href=\"#what-well-achieve\">What We\u2019ll Achieve<\/a><\/li><li><a href=\"#prerequisites\">Prerequisites<\/a><\/li><li><a href=\"#step-by-step-guide\">Step by Step Guide<\/a><ul><li><a href=\"#create-your-wp-form\">Step 1 &#8211; Create Your Wpforms<\/a><\/li><li><a href=\"#create-your-wp-form-1\">Step 2- Customizing the wpforms<\/a><\/li><li><a href=\"#step-3-embed-the-form-on-a-product-page\">Step 3 &#8211; Embed the Form on a Product Page<\/a><\/li><li><a href=\"#step-4-disable-add-to-cart-until-form-is-filled\">Step 4 &#8211; Disable &#8220;Add to Cart&#8221; Until Form Is Filled<\/a><\/li><li><a href=\"#step-5-save-entry-id-in-woo-commerce-session\">Step 5 &#8211; Save Entry ID in WooCommerce Session<\/a><ul><li><a href=\"#final-thoughts\">Final Thoughts<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-wp-forms-woo-commerce-is-powerful\"><strong>Why WPForms in WooCommerce Is Powerful<\/strong><\/h2>\n\n\n\n<p>By default, WooCommerce doesn\u2019t allow much customization in terms of collecting <strong>custom input<\/strong> on a product page. You can use variations, but if you need more dynamic form fields like<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Color, Type <\/li>\n\n\n\n<li>Some contact details<\/li>\n\n\n\n<li>Date of registration or delivery<\/li>\n\n\n\n<li>Multi-step forms with conditional logic<\/li>\n<\/ul>\n\n\n\n<p>That\u2019s where <a href=\"https:\/\/wpforms.com\/\" target=\"_blank\" rel=\"noopener\"><strong>WPForms<\/strong> <\/a>shines! Pair it with WooCommerce and you&#8217;ve got a flexible custom checkout system.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-well-achieve\"><strong>What We\u2019ll Achieve<\/strong><\/h2>\n\n\n\n<p>We&#8217;ll set up and create a system where:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>A Wpforms appears on the product page.<\/li>\n\n\n\n<li>Users must fill it out before clicking \u201cAdd to Cart\u201d.<\/li>\n\n\n\n<li>After form submission, they\u2019re redirected to the cart to make a payment.<\/li>\n\n\n\n<li>After Successful payment, Forms details will be visible on WooCommerce order.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"prerequisites\"><strong>Prerequisites<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>WooCommerce plugin installed and activated.<\/li>\n\n\n\n<li>WPForms plugin (free or pro depending on your field needs).<\/li>\n\n\n\n<li>Basic understanding of WordPress file structure and plugins. (You can just follow below steps)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-by-step-guide\"><strong>Step by Step Guide<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"create-your-wp-form\"><strong>Step 1 &#8211; Create Your Wpforms<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to wpforms and create a new form<\/li>\n\n\n\n<li>Create some required field which you wanna show on Product Page and save the form.<\/li>\n\n\n\n<li>Now go to your product and note down the Product ID, like below image, ID displayed below the Product name in Product list.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"212\" src=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-1024x212.png\" alt=\"Note down product ID\" class=\"wp-image-4586\" srcset=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-1024x212.png 1024w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-300x62.png 300w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-150x31.png 150w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-768x159.png 768w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-399x83.png 399w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-800x166.png 800w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-750x155.png 750w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-1140x236.png 1140w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image.png 1158w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"create-your-wp-form-1\"><strong>Step 2- Customizing the wpforms<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to wpforms and select &#8220;EDIT&#8221; on form which you wanna add in Product page.<\/li>\n\n\n\n<li>Select &#8220;<strong>Settings<\/strong>&#8221; on left side menu<\/li>\n\n\n\n<li>Then Select confirmation from right submenu. check the image below<\/li>\n\n\n\n<li>In Default Confirmation, elect &#8220;<strong>Go to URL (Redirect)<\/strong>&#8220;<\/li>\n\n\n\n<li class=\"has-vivid-red-color has-text-color has-link-color wp-elements-7068b640e95bc856d17318adc6617bac\">In Confirmation Redirect URL box, Paste this url : <strong>https:\/\/yoursite.com\/checkout\/?add-to-cart={product_id}&amp;quantity=1&amp;entry_id={entry_id}<\/strong><\/li>\n\n\n\n<li>Don&#8217;t forget to <strong>change yoursite with your domain name<\/strong> . Also add your product ID (without braces) which you noted in above steps.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"439\" src=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-2-1024x439.png\" alt=\"wpforms configuration\" class=\"wp-image-4589\" srcset=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-2-1024x439.png 1024w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-2-300x129.png 300w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-2-150x64.png 150w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-2-768x329.png 768w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-2-1536x659.png 1536w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-2-2048x879.png 2048w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-2-399x171.png 399w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-2-800x343.png 800w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-2-750x322.png 750w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-2-1140x489.png 1140w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3-embed-the-form-on-a-product-page\"><strong>Step 3 &#8211; Embed the Form on a Product Page<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Copy your wpforms <strong>shortcode <\/strong>and paste in in your <strong>product short description<\/strong> (Because short description display first on product page)<\/li>\n\n\n\n<li>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.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>add_action('woocommerce_before_add_to_cart_button', function () {\n    if (is_product('pet-registration')) { \/\/ Optional: Limit to specific product\n        echo do_shortcode('&#91;wpforms id=\"123\" title=\"false\" description=\"false\"]');\n    }\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-4-disable-add-to-cart-until-form-is-filled\"><strong>Step 4 &#8211; Disable &#8220;Add to Cart&#8221; Until Form Is Filled<\/strong><\/h3>\n\n\n\n<p>Add this code in in your functions.php file of child theme. This code will disable the <strong>ADD TO CART<\/strong> button unless form submitted. <\/p>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-link-color has-small-font-size wp-elements-2cf95a0302f5e663c054e006ac9ec0ad\">Remember this code will disable the &#8220;ADD TO CART&#8221; button for all WooCommerce products.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_action('woocommerce_before_add_to_cart_button', function () {\n    ?&gt;\n    &lt;script&gt;\n        document.addEventListener('DOMContentLoaded', function () {\n            const atcBtn = document.querySelector('form.cart button&#91;type=\"submit\"]');\n            if (atcBtn) {\n                atcBtn.disabled = true;\n                atcBtn.style.opacity = 0.5;\n                atcBtn.title = \"Please complete the form above first.\";\n            }\n\n            \/\/ Listen for WPForms submission\n            document.addEventListener('wpformsAjaxSubmitSuccess', function (event, formData) {\n                const entryId = formData.entryId || formData.data.entry_id;\n                if (entryId) {\n                    \/\/ Enable Add to Cart\n                    if (atcBtn) {\n                        atcBtn.disabled = false;\n                        atcBtn.style.opacity = 1;\n                        atcBtn.title = \"\";\n                    }\n\n                    \/\/ Redirect to cart with entry_id in URL\n                    const currentUrl = new URL(window.location.href);\n                    currentUrl.searchParams.set(\"entry_id\", entryId);\n                    window.location.href = currentUrl.toString(); \/\/ Reload with ?entry_id=\n                }\n            });\n        });\n    &lt;\/script&gt;\n    &lt;?php\n});\n\n<\/code><\/pre>\n\n\n\n<p>In case you wanna hide the button <strong>&#8220;ADD TO CART&#8221;<\/strong> for specific Products, use below code <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_action('woocommerce_before_add_to_cart_button', function () {\n    global $product;\n\n    \/\/ Add your product IDs here\n    $restricted_products = &#91;123, 456]; \/\/ Replace with real product IDs\n\n    if (in_array($product-&gt;get_id(), $restricted_products)) {\n        ?&gt;\n        &lt;style&gt;\n            form.cart button&#91;type=\"submit\"] {\n                display: none !important;\n            }\n        &lt;\/style&gt;\n\n        &lt;script&gt;\n            document.addEventListener('DOMContentLoaded', function () {\n                const atcBtn = document.querySelector('form.cart button&#91;type=\"submit\"]');\n\n                \/\/ Listen for WPForms submission\n                document.addEventListener('wpformsAjaxSubmitSuccess', function (event, formData) {\n                    const entryId = formData.entryId || formData.data.entry_id;\n                    if (entryId &amp;&amp; atcBtn) {\n                        atcBtn.style.display = 'inline-block';\n\n                        \/\/ Optional: redirect back with entry_id in URL\n                        const currentUrl = new URL(window.location.href);\n                        currentUrl.searchParams.set(\"entry_id\", entryId);\n                        window.location.href = currentUrl.toString();\n                    }\n                });\n            });\n        &lt;\/script&gt;\n        &lt;?php\n    }\n});\n<\/code><\/pre>\n\n\n\n<p>For Hiding the button just replace this line <strong>&#8220;display: none !important;&#8221;<\/strong> to <strong>&#8220;opacity: 0.5; pointer-events: none;&#8221;<\/strong> in above code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-5-save-entry-id-in-woo-commerce-session\"><strong>Step 5 &#8211; Save Entry ID in WooCommerce Session<\/strong><\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Step 1: Capture the WPForms entry ID from the redirect URL\nadd_action('woocommerce_before_calculate_totals', function () {\n    if (isset($_GET&#91;'entry_id']) &amp;&amp; is_numeric($_GET&#91;'entry_id'])) {\n        WC()-&gt;session-&gt;set('wpforms_entry_id', intval($_GET&#91;'entry_id']));\n    }\n});\n\n\/\/ Step 2: Add the entry ID to the cart item as custom data\nadd_filter('woocommerce_add_cart_item_data', function ($cart_item_data, $product_id, $variation_id) {\n    $entry_id = WC()-&gt;session-&gt;get('wpforms_entry_id');\n    if ($entry_id) {\n        $cart_item_data&#91;'wpforms_entry_id'] = $entry_id;\n        \/\/ Clear after use to prevent reuse on future products\n        WC()-&gt;session-&gt;__unset('wpforms_entry_id');\n    }\n    return $cart_item_data;\n}, 10, 3);\n\n\/\/ Step 3: Display entry ID below product name in cart &amp; checkout\nadd_filter('woocommerce_get_item_data', function ($item_data, $cart_item) {\n    if (isset($cart_item&#91;'wpforms_entry_id'])) {\n        $item_data&#91;] = &#91;\n            'key'   =&gt; 'Form Entry ID',\n            'value' =&gt; '#' . esc_html($cart_item&#91;'wpforms_entry_id']),\n        ];\n    }\n    return $item_data;\n}, 10, 2);\n\n\/\/ Step 4: Save entry ID to order item meta when order is placed\nadd_action('woocommerce_checkout_create_order_line_item', function ($item, $cart_item_key, $values, $order) {\n    if (isset($values&#91;'wpforms_entry_id'])) {\n        $item-&gt;add_meta_data('Form Entry ID', '#' . esc_html($values&#91;'wpforms_entry_id']), true);\n    }\n}, 10, 4);\n\n\/\/ Step 5: Display below product name in order details (admin &amp; email)\nadd_filter('woocommerce_order_item_name', function ($product_name, $item) {\n    $entry_id = $item-&gt;get_meta('Form Entry ID');\n    if (!empty($entry_id)) {\n        $product_name .= '&lt;br&gt;&lt;small&gt;&lt;strong&gt;Form Entry:&lt;\/strong&gt; ' . esc_html($entry_id) . '&lt;\/small&gt;';\n    }\n    return $product_name;\n}, 10, 2);\n\n<\/code><\/pre>\n\n\n\n<p>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<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-4-1024x579.png\" alt=\"\" class=\"wp-image-4647\" srcset=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-4-1024x579.png 1024w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-4-300x170.png 300w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-4-150x85.png 150w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-4-768x434.png 768w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-4-1536x869.png 1536w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-4-399x226.png 399w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-4-800x453.png 800w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-4-750x424.png 750w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-4-1140x645.png 1140w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2025\/04\/image-4.png 2001w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"final-thoughts\"><strong>Final Thoughts<\/strong><\/h4>\n\n\n\n<p>This approach not only enhances the user experience but also helps collect crucial data <strong>before checkout<\/strong>. Perfect for pet registrations, event bookings or anything custom.<\/p>\n\n\n\n<p>Whether you\u2019re building a pet startup or handling detailed orders, WPForms + WooCommerce is a combo worth mastering.<\/p>\n\n\n\n<p><strong>Let us know if you get any issues. Contact Dev below<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4304,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":{"format":"standard"},"jnews_primary_category":[],"footnotes":""},"categories":[86,75],"tags":[],"class_list":["post-4356","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce","category-wordpress"],"_links":{"self":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts\/4356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/comments?post=4356"}],"version-history":[{"count":0,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts\/4356\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/media\/4304"}],"wp:attachment":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/media?parent=4356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/categories?post=4356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/tags?post=4356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}