With the WooCommerce Ninja Forms Product Add-Ons extension, you can add a Ninja Form to products, and give users a variety of checkboxes, radio buttons and text fields to customize the product as you wish.
Ninja Forms extensions also have Conditional Logic to make a field visible under certain conditions.
Create a Ninja Form ↑ Back to top
The first step is to create a new Ninja Form.
If you just want to get a feel for the extension and how it works, we created a dummy form for you to use. That way you can see a complete form and how it works on the product page. If you want to use the sample form, skip down to the Create a Product section below.
Creating a New Form ↑ Back to top
If you’ve never created a Ninja Form before, there’s a nice write-up by Slocum Themes about creating a contact form with step-by-step instructions and a video. That covers the basics of adding new fields to the form.
Once you know the basics to get this working with WooCommerce, you must include the Total field on your form. This total field is the field we use to determine how the product price should be adjusted. Don’t worry about changing the label on the total field, as we’ll automatically hide the field and add the cost to the WooCommerce price.
You’ll most likely want to include a number of checkboxes, input fields, radio buttons, etc. that affect the total price. For any field you want included in the total calculation, make sure to check the Include in the auto-total setting. You also need to set how much each option/variation affects the total. Full documentation and how to set up the total and calculation fields is on the Ninja Forms website.
Create a Product ↑ Back to top
Once you have a form ready to go, or have the sample form installed along with this plugin, it’s time to add the form to a product.
The product should be the base price of the product. Set a price for your product, and then use Ninja Forms Product Addons to add to the base price.
On the edit product page, add the form using the Choose a Form select box. Now save your product.
Usage ↑ Back to top
Once you have a form and added it to your product, it should show up on the front end.
Customization ↑ Back to top
You can use the following snippets to customize the plugin.
Hide price add-ons equal to zero
Hide all sub-prices
FAQ ↑ Back to top
Calculations aren’t working. How do I fix this?
The best way to diagnose this issue is to make sure your form is working properly. Put the form on a regular page, and be sure the total field is getting the correct value.
When I press Add to cart, I get a black page with an error message. What’s happening?
Under your Ninja Form settings, confirm that you don’t have “Submit via AJAX (without page reload)?” checked. If the error still occurs after unchecking this field, then also ensure that the “Include in the auto total?” checkbox on a calculation field is not checked on your product form.
Can I have multiple total fields?
Right now you can only have one total field. If you need multiple total fields for advanced calculations please vote on this idea so we know there’s interest.