WooCommerce Integration with eForm

Starting eForm v3.4 it is now possible to integrate with WooCommerce to handle the cart and checkout procedure. eForm provides a nice way for direct, one-page payment through PayPal and Stripe. But if you want to use WooCommerce instead, to streamline your entire shop, it is now possible too.

Before we jump in, checkout what we will be creating first, in this video.

Setup WooCommerce

In order to make WooCommerce integration work, you need to have WooCommerce active and setup. For this we recommend going through the official documentation. Once all setup, please follow the rest of the guide to setup your first eForm with WooCommerce payment.

Create a mathematical eForm

eForm WooCommerce Integration basically relies on a mathematical field. The concept of the integration is simple:

  • You create a product in WooCommerce.
  • You create an eForm with atleast one mathematical element.
  • You setup WooCommerce integration inside eForm with reference to the WooCommerce Product.

eForm now handles the product pricing and variations, while WooCommerce handles the rest (cart and checkout).

Product variations are recorded and displayed too. So if a user submits the same data twice, then the quantity in the cart will update.

Starting version 3.7.1, you can create a non-mathematical form and if you do not mention any math element to WooCommerce, eForm will just add the product to the cart.

For the above form, we add several numeric fields and one mathematical element. The form can be downloaded and imported from here.

Download WooCommerce Integration Form

Enable WooCommerce Integration

 

  • Go to Payment > WooCommerce.
  • Click on Enable button.

This enables and gives you options for tuning the integration.

  • WooCommerce Product ID: The ID of the product which will be added to the cart. The price of the product can be anything, since eForm will override it anyway. To find out the product ID, go to Products and hover over the desired product. More information here.
  • Mathematical Element ID: The ID of the eForm mathematical element which will decide the price. Make sure the formula you use on the element points directly to other numeric elements. This will ensure proper attributions of the product. If you do not mention any mathematical id, then eForm will just add the product to the cart without modifying the pricing.
  • Order status to consider payment complete: The status of the order where eForm will consider payment complete. This comes in handy with locking submission till payment completion. eForm will even send out the user notification email (if enabled) when the order reaches this state.
  • Redirect To: The page where you’d like to redirect when the submission is done. The recommended is the cart page from where user can review and change quantity.

Now just publish the form and try submitting it to see how WooCommerce integration works.

Conditional Product Selector

Starting version 3.5, eForm can now have conditional product selector. Scroll down to the settings page and you will find the section. Here you can specify a product ID for a bunch of conditional logic.

The product will be selected if the conditions are met, overriding the default product ID.

Automatic Product Variations

eForm mathematical field formula works just like product variation of WooCommerce. In our sample form, we use the formula (M0+M3+M1)*M2. When a form is submitted the following variations are added to the order.

  • M0: Select type of Tee.
  • M3: Select Preferred Fabric.
  • M1: Additional Features.
  • M2: Order Quantity.

Thereby when a form is submitted, the cart is populated accordingly (as you can see in the image above). eForm takes it up itself to automatically detect the elements responsible for the pricing and shows them accordingly.

Conditionally hidden elements won’t populate any attributes since eForm v3.6.7.

Manual Product Variation

Apart from the variables under mathematical formula, you can now have manual product attributes. Under the same settings area you should see an option Additional Attributes. Enter there the field ids (comma separated) of your form elements, like M1,M2,O7,F24 etc. eForm will take the values from those element and will populate more attributes in the cart.

The conditional logics are also admired here.

Overriding Quantity

Previously eForm would just add 1 quantity of the order. But starting version 3.6.7 you can use a form element to override quantity. The following elements are recommended:

  • Feedback Small or Other Form Elements > Small Text with number only validation.
  • MCQ Single Slider element.

Under any circumstances, put the element ID, like M0 or O1 in the field.

eForm will use the mentioned element to automatically adjust order quantity in the cart.

Administrating Orders

eForm records the product variation data to the admin side as well.

  • As you can see from the image above, the same set of data is available from the WooCommerce > Order area.
  • Additionally a hidden meta data _eform_data_id is present which shows the submission ID responsible for this order.

That is all we needed to tell you about WooCommerce Integration. We will be publishing a video tutorial soon. If you have any question, please feel free to use our support forum.

Non Overriding Price

Starting version 3.7.1, you can just skip giving the mathematical element ID. If so, previously eForm would not add any product to cart. But from now on, eForm will add the product (or the conditional product) without modifying the price. The product attributes will still be populated.

If you do give a math element, and if the element is conditionally hidden, then eForm will not add the product to the cart.

Swashata has written 226 articles

Hi there, I am the Lead Developer at WPQuark.com. I love to create something beautiful for WordPress and here I write about how to use them. When I am not working, usually I am doing a number of other creative things ;).