Add custom WooCommerce forms to your product pages. Create your WordPress form with the fields you need, and add a calculation to generate the total. Then select your form in the sidebar box on the WooCommerce product page. The product price used in your WooCommerce cart comes from the last calculation field in your form.

Subscribe on YouTube

Download and install

1. If you haven't already, install and activate the current version of Formidable Forms Premium on your WordPress site.
2. After confirming your Formidable Forms license, go to Formidable → Add-Ons and toggle on the WooCommerce add-on.
   

   

Add a form to WooCommerce products

1. Create a form. To connect with the WooCommerce price, include a calculation in your form. The total is accurate only when you use the right field types and settings. Use either of these approaches:
   • Using pricing fields. When using pricing fields in your form, you must use the Total field type and set your item options as Product field types.
     

     

     
     Other field types may give an inaccurate total. For example, if you sell shirts, your Product field can list each size with its price.
     

     

   • Using standard fields. For item options in standard fields, such as Dropdown, Radio Buttons, or Checkboxes fields, use a Text or Number field as your Total field. In each option field, check Use separate values and enter each option's price as its value. Then enable field calculations in the Total field: in its Advanced section, turn on Calculate Value, select Math, and insert the field IDs or keys of your option fields in the Field Formula box. In this example, the formula uses the ID of the Choose size field.
     

     

2. Create a WooCommerce product. The product sets the base price. On the edit product page, select your form in the Choose Form box in the sidebar. Then save your product.
   

   

   
   To use only the form total and leave out the WooCommerce product price, check Use the total in the form without adding the product price. The cart price comes from the saved entry, so this option needs the form to store entries. It doesn't apply when you have disabled storing entries in your form. In the cart, the product price shows crossed out, with the form total as the new price.
3. To add more charges to the WooCommerce price, such as a flat fee, add fields for them to your form. When you use standard fields, include those fields in the Total field's Field Formula. A Total field adds up the Product fields in your form on its own.
   

   

4. Your form now shows on the product page. It adjusts the price of the items added to the cart.
   

   

   
   When a customer fills in the form and clicks Add to cart, the form is saved as an entry. Its choices are added to the product in the cart. The customer then checks out with any payment method you've set up in WooCommerce. The form choices show in the cart and on the order.

Keep the form's Confirmation action set to Show Message, which is the default. The message doesn't show on the product page. WooCommerce shows its own "has been added to your cart" message instead.

If the action redirects to another page, the product isn't added to the cart. To send customers to the cart after they add a product, use the WooCommerce setting in Your cart is currently empty.

Set a default form

When a form creates WooCommerce products with the Create Post action, it can also attach a default Formidable form to each new product. These steps start from a form whose Create Post action already has its Post Type set to Products. To make each new product purchasable, map a price to both the _regular_price and _price custom fields. A product without a price can't be added to the cart, so its form doesn't show on the product page.

A form field can be mapped to only one custom field. Add a hidden field that copies the price: in its Advanced section, turn on Calculate Value and insert the price field's ID in the Field Formula box. Then map _regular_price to the price field and _price to the hidden field.

1. Add a hidden field to your form. In the field's Advanced section, in the Default Value box, insert the form ID to be connected to your WooCommerce Product.
   

   

2. Go to your form Settings → Actions & Notifications page. Under Current Actions, open the Create Post action.
3. In the Custom Fields section, click Add to add a new custom field.
   

   

4. If the Name is a dropdown, click Enter new. Type _attached_formidable_form as the Name. Select the hidden field with the form ID as the Value.
   

   

5. Click Update to save your changes.

Add a form to many products at once

To attach a form to many existing products, use the WooCommerce product CSV exporter and importer. The form is saved in each product's _attached_formidable_form custom meta. You add the form ID to that column and import the file again.

1. Go to Formidable → Forms and note the ID of the form in the ID column.
2. Go to Products → All Products and click Export at the top of the page.
3. Check Yes, export all custom meta and click Generate CSV. WooCommerce downloads a CSV file of your products.
   

   

4. Open the file in a spreadsheet app. Find the column named Meta: _attached_formidable_form. If no product has a form yet, the column isn't there. In that case, add a column with that exact name.
5. Enter the form ID in that column for each product that needs the form. An empty cell removes a form already attached to that product. Then save the file as a CSV.
6. Go to Products → All Products and click Import.
7. Choose your CSV file and check Update existing products. Then click Continue. WooCommerce matches each row to an existing product by its ID or SKU.
   

   

8. On the Column mapping screen, check that Meta: _attached_formidable_form is mapped to Import as meta data. Then click Run the importer.
   

   

When the import is complete, WooCommerce shows Import complete! with the number of products updated. The form now shows on each product page. It's also selected in each product's Choose Form box.

Collect user info in product without calculating price

Some products need a form that collects the customer's information without changing the base product price. Forms on product pages need a calculation, so add one that always equals zero.

1. In the form you wish to include with the product, add a hidden field and enable field calculations: in its Advanced section, turn on Calculate Value, select Math, and enter 0 (zero) in the Field Formula box. The zero total doesn't change the product price.
   

   

2. Save the changes to the form.
3. Go to Products and open the product where you plan to embed the form. In the Choose Form box in the sidebar, select your form.
   

   

Send users to checkout from a standalone form

A form that isn't on a product page can send users to the WooCommerce checkout with a product in the cart. It uses the WooCommerce add-to-cart link in the form's Confirmation action. The user then pays with any payment method you've set up in WooCommerce.

1. Go to Products → All Products and hover over a simple product to see its ID. Use a product that doesn't have a form selected in its Choose Form box.
   For a variable product, use the ID of a variation, not the product. Edit the product and open the Variations tab in the Product data box. The variation ID is the number after # on each variation. The product's own ID leaves the cart empty.
2. In your form, go to Settings → Actions & Notifications and open the Confirmation action.
3. Select Redirect to URL. In the Redirect URL box, enter your checkout page URL followed by ?add-to-cart= and the product ID. Your checkout page is set in WooCommerce → Settings → Advanced → Page setup. For example: https://example.com/checkout/?add-to-cart=123. Replace 123 with your product ID.
   

   

4. (Optional) To let the form set the quantity, add a Number field to the form. Then add &quantity= and the field's ID in brackets to the end of the URL. For example: https://example.com/checkout/?add-to-cart=123&quantity=[25]. Replace 25 with the ID of your Number field.
5. Click Update to save your changes.

When the form is submitted, the entry is saved. The user then lands on the checkout page with the product in the cart. WooCommerce shows a "has been added to your cart" message at the top of the page.

The cart uses the WooCommerce product price. The form's calculations don't change it, and the entry isn't linked to the order. To set the price from the form and keep the form choices with the order, add the form to the product page instead.

Replace the registration form

WooCommerce includes a basic registration form. This can be fully customized and replaced with a Formidable form.

1. Install the Formidable WordPress user registration plugin. This allows user accounts to be created and updated.
2. Create a registration form if you haven't yet.
3. Go to the Formidable → Global Settings → Registration settings page and scroll to the bottom.
4. If you haven't turned on registration in WooCommerce, click [Edit in WooCommerce] next to Allow customers to create an account on the "My account" page. In the WooCommerce Account creation settings, check On "My account" page and click Save changes.
   

   

5. Select the registration form you created from the Select Registration Form dropdown. This also replaces the WooCommerce login form on the same page.
   

   

Replace the profile form

The profile form is included in the My Account area in WooCommerce. You can replace it with a Formidable form, too.

1. Install the Formidable WordPress user registration plugin if you haven't yet.
2. Create a profile form.
3. Go to the Formidable → Global Settings → Registration settings page and scroll to the bottom.
4. Select the profile form you created from the Select Profile Form dropdown. This will replace the form on the WooCommerce account page, under the Account Details tab.
   

   

   
   The profile form edits the entry each customer made when they registered with your registration form. A customer who registered another way, such as at the WooCommerce checkout, sees an empty form.

Auto-populate WooCommerce billing address

When you register users or let them edit their profiles with the User Registration add-on, save their address as User Meta. WooCommerce then fills in the billing address fields on the checkout page.

1. Set up a form to register users or edit a profile with the User Registration add-on.
2. Add separate fields in the form for all the WooCommerce checkout fields you need to populate. The field names are listed after these steps.
3. In the User Meta section of the Register User action, enter each WooCommerce field name as the Name. Then select the form field that holds that value.
   

   

4. Map billing_country to a field whose options save two-letter country codes, not the full country name.

Here's a list of WooCommerce checkout field names that you can map to:

• billing_first_name
• billing_last_name
• billing_address_1
• billing_address_2
• billing_city
• billing_state
• billing_country
• billing_postcode
• billing_company
• billing_phone
• account_first_name
• account_last_name
• account_email

Create WooCommerce order from form

Use the Create Post form action to create a WooCommerce order each time the form is submitted. The order is created directly and isn't added to the cart. This is helpful for admin use, mainly when the order is paid another way, such as cash or check. In that case, the WooCommerce checkout isn't needed.

1. Create a form and add a Create Post form action to it. Set the Post type to Orders.
2. Set the Post Title to any field in your form and leave Post Content blank. The title is required, but WooCommerce replaces it with its own order title: "Order –" followed by the date. Map the Excerpt to a Paragraph field. It holds the customer's notes for the order.
3. Go to the Custom Fields section of the form action. Add a custom field for each order field you want to fill. The order custom field names are listed after these steps.
4. Map the _order_total and _customer_user custom fields to the correct values.
5. Click Update to save the form. When the form is submitted, an order is created on the WooCommerce → Orders page.

These are the custom field names you can map to, with the data type each one expects:

Add Order Status field

By default, an entry is created whether or not the WooCommerce order is completed. To see which orders are completed, add an Order Status field to your form.

1. Add a hidden field in your form and label it Order Status.
   

   

2. In the field's Advanced section, set the Default Value to Pending.
   

   

3. Use this code example to update the Order Status field value to Complete when the order is completed.
4. To get an email when the order is completed, set up your email notifications to trigger on a WooCommerce event. In the Trigger this action when list, clear Entry is created and select WooCommerce order completed. See Trigger actions after WooCommerce event. The code example saves the new value directly, so it doesn't run actions set to trigger when the entry is updated.

Trigger actions after WooCommerce event

Form actions can run after a WooCommerce event. In the action's Trigger this action when list, select one or more of these events.

• WooCommerce order completed: This event type is only triggered when the order is marked as complete, not on payment.
• WooCommerce payment: This event type is triggered when the payment for the order is complete.
• WooCommerce pending order: This event type is triggered when the order status changes to Processing.

Troubleshooting

Your cart is currently empty

If customers see this message after they click Add to cart on a product with a form, check the form's Confirmation action.

The block cart shows Your cart is currently empty! The classic cart shows Your cart is currently empty. On sites in British English, it says basket instead of cart.

The form entry is saved in the same request in which WooCommerce adds the product to the cart. When the Confirmation action is set to Redirect to URL, the form saves the entry and redirects right away, before WooCommerce adds the product. This happens even when the redirect goes to the cart page.

1. In the form, go to Settings → Actions & Notifications and open the Confirmation action.
2. Select Show Message. The message doesn't show on the product page. WooCommerce shows its own "has been added to your cart" message instead.
3. Click Update to save your changes.
4. (Optional) To send customers to the cart after they add a product, go to WooCommerce → Settings → Products. Next to Add to cart behaviour, check Redirect to the cart page after successful addition and click Save changes.
   

   

We’re sorry. It looks like you’ve already submitted that.

Customers see this message when they add the same product with the same form choices again within 60 seconds. Formidable blocks a second entry with the same values from the same visitor in that time. The product isn't added again.

To buy more than one, change the quantity next to Add to cart before adding the product. The cart then gets one line with that quantity.

To allow the same choices to be added again right away, remove the time limit for the product's form with the frm_time_to_check_duplicates hook. Use the ID of the form selected in the product's Choose Form box.

Related customizations

Add order ID to entry

Use the following code to add the WooCommerce order ID to a field in a Formidable form after the order is placed. Add a hidden field to your form. After checkout, the order ID is added to the hidden field.

Replace 25 with the ID of your form and 123 with the ID of the hidden field.

add_action( 'woocommerce_new_order_item', 'add_order_id_to_entry', 10, 3 );
function add_order_id_to_entry( $item_id, $cart_item, $order_id ) {
// check if there's form data to process
if ( empty( $cart_item->legacy_values['_formidable_form_data'] ) ) {
return;
}
// get form entry
$entry = FrmEntry::getOne( $cart_item->legacy_values['_formidable_form_data'] );
if ( $entry && $entry->form_id == 25 ) {
$field_id = 123;
$added = FrmEntryMeta::add_entry_meta( $entry->id, $field_id, null, $order_id );
if ( ! $added ) {
FrmEntryMeta::update_entry_meta( $entry->id, $field_id, null, $order_id );
}
}
}

Dynamically add order ID and entry meta to order

This extends the Add order ID to entry customization. It also saves entry values in the order meta.

add_action( 'woocommerce_new_order_item', 'save_entry_data_with_order', 10, 3 );
function save_entry_data_with_order( $item_id, $cart_item, $order_id ) {

// check if there's form data to process
if ( empty( $cart_item->legacy_values['_formidable_form_data'] ) ) {
return;
}

// get form entry
$entry = FrmEntry::getOne( $cart_item->legacy_values['_formidable_form_data'] );
if ( $entry ) {
global $wpdb;
// Order ID Field - Change 'woo order id' text to name of order id field in your form
$field_id = $wpdb->get_var ( $wpdb->prepare( "SELECT id FROM {$wpdb->prefix}frm_fields where name = 'woo order id' and form_id = %d ", $entry->form_id) );
$added = FrmEntryMeta::add_entry_meta( $entry->id, $field_id, null, $order_id );
if ( ! $added ) {
FrmEntryMeta::update_entry_meta( $entry->id, $field_id, null, $order_id );
}

// code below here is to save any custom fields to the WooCommerce Order Meta table to allow for easier use when combining with orders
// note that you can comment out any or all below if you do not want to save entry data with the order meta
// you will need to change the Name of the field in each query to the name of your field you want saved to the order
// be sure to change '_custom_key' text to whatever you would like your keyname to be in the order meta
$order = wc_get_order( $order_id );

$field_id = $wpdb->get_var ( $wpdb->prepare( "SELECT id FROM {$wpdb->prefix}frm_fields where name = 'Additional Person Name' and form_id = %d ", $entry->form_id) );
$meta_value = FrmEntryMeta::get_meta_value( $entry, $field_id );
if($meta_value === NULL) {$meta_value='';}
$order->update_meta_data( '_custom_key_1', $meta_value );

// Additional Person Email Field
$field_id = $wpdb->get_var ( $wpdb->prepare( "SELECT id FROM {$wpdb->prefix}frm_fields where name = 'Additional Person Email' and form_id = %d ", $entry->form_id) );
$meta_value = FrmEntryMeta::get_meta_value( $entry, $field_id );
if($meta_value === NULL) {$meta_value='';}
$order->update_meta_data( '_custom_key_2', $meta_value );

// Additional Person Phone Number Field
$field_id = $wpdb->get_var ( $wpdb->prepare( "SELECT id FROM {$wpdb->prefix}frm_fields where name = 'Additional Person Phone Number' and form_id = %d ", $entry->form_id) );
$meta_value = FrmEntryMeta::get_meta_value( $entry, $field_id );
if($meta_value === NULL) {$meta_value='';}
$order->update_meta_data( '_custom_key_3', $meta_value );

// Total Field
$field_id = $wpdb->get_var ( $wpdb->prepare( "SELECT id FROM {$wpdb->prefix}frm_fields where name = 'Total' and form_id = %d ", $entry->form_id) );
$meta_value = FrmEntryMeta::get_meta_value( $entry, $field_id );
if($meta_value === NULL) {$meta_value='';}
$order->update_meta_data( '_custom_key_4', $meta_value );

// save the order meta (works with both order storage types)
$order->save();
}
}

Change field value after completed order

Use the following code to change a field value after a WooCommerce order is completed.

Replace 25 with the ID of the form to update and 100 with the field ID to update. Replace 'Complete' with the new value you want to use. The field must have a default value when the form is submitted for this function to work.

add_action( 'woocommerce_order_status_completed', 'update_frm_entry_after_wc_order_completed' );
function update_frm_entry_after_wc_order_completed( $order_id ) {
$order = new WC_Order( $order_id );
$items = $order->get_items();
foreach ( $items as $item_id => $product ) {
if ( isset( $product['formidable_form_data'] ) && is_numeric( $product['formidable_form_data'] ) ) {
$entry_id = $product['formidable_form_data'];
$entry = FrmEntry::getOne( $entry_id );
if ( $entry && $entry->form_id == 25 ) {
$field_id = 100;//Replace 100 with the field ID to update
$new_value = 'Complete';
FrmEntryMeta::update_entry_meta( $entry_id, $field_id, null, $new_value );
}
}
}
}

Add username to field after completed order

This code example is similar to the one above. It adds the username to a field in the entry after the order is completed. Replace 576 with the form ID and 13686 with the field ID. Guest orders are skipped, because a guest has no username.

add_action( 'woocommerce_order_status_completed', 'add_username_to_frm_entry_after_wc_order_completed' );
function add_username_to_frm_entry_after_wc_order_completed( $order_id ) {
	$order = wc_get_order( $order_id );
	foreach ( $order->get_items() as $item_id => $product ) {
		if ( isset( $product['formidable_form_data'] ) && is_numeric( $product['formidable_form_data'] ) ) {
			$entry_id = $product['formidable_form_data'];
			$entry    = FrmEntry::getOne( $entry_id );
			if ( $entry && $entry->form_id == 576 ) { // Replace 576 with the form ID
				$user = get_user_by( 'id', $entry->user_id );
				if ( ! $user ) {
					continue; // Guest order: there is no username to save.
				}
				$field_id = 13686; // Replace 13686 with the field ID to update
				FrmEntryMeta::add_entry_meta( $entry_id, $field_id, null, $user->user_login );
			}
		}
	}
}

Show WooCommerce variations

WooCommerce includes the normal variation labels as part of the name in the cart. If your product uses both WooCommerce variations and a Formidable form, include this line to show the WooCommerce variations in the cart.

add_filter( 'woocommerce_product_variation_title_include_attributes', '__return_false' );

Use a form field to update WooCommerce quantity

WooCommerce accepts input from your form as part of its cost calculation, but the quantity comes from a WooCommerce field. To have a form field update the quantity too, use this JavaScript.

<script>
jQuery(document).ready(function($){
    jQuery('#field_iw7oc').change(function(){
        var fpField = $("#field_iw7oc").val();
        var wooField = jQuery(".input-text.qty.text");
        if(fpField == ''){
            wooField.val("1");
        } else {
            wooField.val(fpField);
        }
    });
});
</script>

Change 'iw7oc' to your quantity field's key. Place this snippet in your form's Settings → Customize HTML → After Fields box.

Modify field types in order

To add specific field types to the WooCommerce order and cart, see the example to modify field types in order.

Include or exclude fields in cart

To choose whether a field shows in the WooCommerce cart, use the example to include or exclude fields in cart.

Re-order fields in cart

See the example to re-order fields in cart.

Adjust values displayed in cart

See the wc_fp_cart_item_data hook for examples.

Display SKU

Use the [sku] shortcode to display a product's SKU on the product's page. When a form is on a product's page, set the default value of a field to [sku] to save the product's SKU in the field.

function get_sku( $atts ){
	return get_post_meta( get_the_ID(), '_sku', true );
}
add_shortcode( 'sku', 'get_sku' );

Get product price

Use the [price] shortcode to get the product's price when on the product's page. When a form is on a product's page, set the default value of a field to [price] to save the product's price in the field. Use it to calculate a total in the form from the product's price.

function ff_get_price( $atts ){
  $post_id = get_the_id();
  $product = wc_get_product( $post_id );
  
  if ( ! isset( $product ) ){
	return '';
  }
  
  return $product->get_price();
}

add_shortcode( 'price', 'ff_get_price' );

Add gallery to WooCommerce product

When creating a product with Create Post action, mapping the file upload field to _product_image_gallery under Post meta does not create the product gallery. To add a gallery to the product, use the frm_after_create_entry hook.