WS Form PRO is a powerful form development plugin for WordPress. The WooCommerce add-on for WS Form PRO allows you to add forms to products in your store. You can use this add-on to request additional information about a product before it is added to the cart. Furthermore, the add-on works with popular WooCommerce extensions such as QuickView and Wishlist.
Examples of using the WooCommerce add-on include:
- Donation or ‘name your price’ products
- Interactive product configurators
- Complex price calculations
- File uploads
- Customer signatures
… and more!
Getting Started ↑ Back to top
Product customizations work by embedding forms created in WS Form into a WooCommerce product page.
Create or edit a product. Ensure it has a name and a regular price of zero or greater.
Next, click on the ‘WS Form’ tab in the ‘Product Data’ section. From here you can either:
- Choose a form you have already created from the dropdown
- Click the blank template to create a form from scratch
- Click a template to create a ready-made form
Once the form has been created, click ‘Publish’ (or ‘Update’ for an existing product) to save your changes.
If you select a ready-made template, you can click the product URL to test the product customization straight away! Most of our ready-made templates contain example data that you will want to edit.
Editing The Form ↑ Back to top
To edit the form, click the ‘Edit Form’ link. This will take you to the WS Form layout editor.
For help with building a form, please visit our knowledge base.
Any of the WS Form field types can be added to a product to request information, upload a file or even request a signature. Multi-tab forms are fully supported, allowing you to offer step-by-step product customization to customers. You can even include conditional logic in your form to make product customization interactive for the customer.
If you want your form to adjust the price of the product, you can add any combination of e-commerce fields to your form. The total price of the e-commerce fields in your form will be added to the price of the product set in WooCommerce. The price of the product in WooCommerce can be any amount, including zero. So, for example, to create a donation product, you would set the product price to zero and then simply add a price field to your form.
Once you have finished editing your form, you need to ensure it has been published. Simply click the ‘Publish’ button at the top of the layout editor to do this.
Your product is now ready to use! Customers can customize the product on your website and make a purchase.
Customizing Product Prices ↑ Back to top
It is possible to add WS Form e-commerce fields to your form to change the price of the product. The sum of the WS Form e-commerce fields will be adding to the price of the product.
For example, to create a donation product, you would set the WooCommerce product price to zero, and then add a WS Form price field to your form that would enable someone to enter their donation amount. The amount they enter would then become the price of the product when it is added to the cart.
The WS Form e-commerce fields that can be used to customize a product are:
- Price Enter a price
- Price Select Choose a price from a select pulldown
- Price Checkbox Select prices by clicking checkboxes
- Price Radio Select prices by choosing a radio button
- Price Range Select a price by dragging a range slider
Examples of customizing product prices:
To learn more about the WS Form e-commerce fields:
WooCommerce Field Types ↑ Back to top
The WooCommerce add-on installs some optional field types that you can use on your form. You can place these fields on your form in the same way as any other field type, giving you full control over your form layout.
To view a demo of these fields, click here.
The fields are as follows:
Subtotal ↑ Back to top
The ‘Subtotal’ field outputs the price of the product before any customizations are applied. The price is styled to match the normal WooCommerce price, but you can easily edit the format if you are familiar with HTML. To edit the HTML of this field, simply click the settings icon of the field.
Options ↑ Back to top
The ‘Options’ field outputs the calculated price of the e-commerce fields on your form. This is the same value as the ‘Cart Total‘ field used in our e-commerce fields, but instead of acting like a cart total, it is the total amount that will be added to the base price of the WooCommerce product.
Total ↑ Back to top
The ‘Total’ field is the sum of the ‘Sub-total’ and ‘Options’ fields and allows you to display the price that will be used when the product is added to the cart.
Subtotal (WooCommerce) + Options (WS Form) = Total (Add to cart price)
Quantity ↑ Back to top
The ‘Quantity’ field allows you to place the WooCommerce quantity field anywhere on your form. This field acts exactly the same way as the WooCommerce quantity field. If you have set a minimum and/or maximum quantity this field will inherit those properties.
You can hide the WooCommerce quantity field and use this instead by checking the ‘Hide’ setting when editing a product.
Add to Cart Button ↑ Back to top
The ‘Add to Cart’ button allows you to add a WooCommerce add to cart button anywhere on your form. This button will only be active when the form is fully validated. If you have any variations on your product, a variant will also need to be selected in order for your form to validate.
The normal WS Form ‘Submit’ button also acts like a WooCommerce ‘Add to Cart’ button.
Clear Button ↑ Back to top
The ‘Clear’ button is used in conjunction with products that have variants. When clicked, it will reset the variations selected. Additionally, this button will also reset your form to its default state. This is not to be confused with the WS Form ‘Clear’ button which clears all form fields. It is named ‘Clear’ here to match the terminology used by WooCommerce.
Choosing Which Fields Appear in Cart and Orders ↑ Back to top
There might be an occasion when you do not want a field on your form to appear in the cart. For example, you might be using a range slider to set a price field and you only want the price field to be included in the cart.
When the WooCommerce add-on is installed it adds a new setting called ‘Exclude from WooCommerce cart and orders’ that enables you to control whether or not a field will be saved to the cart when the ‘Add to Cart’ button is clicked. This setting can be found when you click to edit a field at the bottom of the ‘Basic’ tab.
If checked, the field will be excluded from WooCommerce carts, orders or confirmation emails.
Changing How a Product Looks ↑ Back to top
The WS Form tab on a WooCommerce product has various settings that allow you to control the presentation of your product.
Catalog – Button Label ↑ Back to top
The default button label shown on products listed in your WooCommerce catalog is set to ‘Select options’. You can change this to anything you wish using the ‘Button label’ setting. For example, you could change this to ‘Donate’ for a donation product.
Product – WooCommerce Price – Hide / Prefix / Suffix ↑ Back to top
The WooCommerce price can be hidden using these settings. You can also add a prefix and suffix to the price. If you want to change the price to something else entirely, simply hide the price and enter some text into the prefix setting.
Use the ‘Subtotal’ WS Form field (see above) if you want to show this price elsewhere.
Product – WooCommerce Variation Price – Hide ↑ Back to top
If your product has variations, you can hide this by enabling this setting.
Product – WooCommerce Quantity – Hide ↑ Back to top
To hide the standard WooCommerce quantity field, enable this setting. You can add your own quantity field on your form by using the WS Form WooCommerce field equivalent (see above).
Product – WooCommerce Add To Cart – Hide ↑ Back to top
To hide the standard WooCommerce Add To Cart button, enable this setting. You can add your own Add to Cart button on your form by using the WS Form WooCommerce field equivalent (see above). This is useful if you have a multi-tab form and only want the Add to Cart button to appear on the last tab.
Cart – Edit ↑ Back to top
If you want customers to be able to edit a product in the cart after they have added it, you can enable the ‘Editable’ setting. If enabled, Customers can click the product in their cart, make any necessary adjustments and then click to add the product to their cart again.
WS Form Actions ↑ Back to top
One of the great features of the WooCommerce add-on is that your form actions also run when an order is processed. This means that you could send an email to a particular department when a product customization has been sold. Or, you could send notifications about a sale to Slack or any of our third party that WS Form integrates with such as Salesforce, Zapier or MailChimp. For developers, you can even run a WordPress hook when a product customization has been sold.
If you do not want the form actions to run when the order is placed, uncheck this setting.