WooCommerce Ninja Forms Product Add-Ons

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.

Note: Currently not compatible with Ninja Forms 3.0. You must use and download this file: Ninja Forms version 2.9.58.

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.

Ninja Forms Choose Form
Choose your Ninja Form on the edit product page

Usage ↑ Back to top

Once you have a form and added it to your product, it should show up on the front end.

Ninja Form Product Detail Page
Ninja Form on the product detail page
Ninja Forms Cart
The product with the ninja forms add on in the cart
Ninja Forms Order Page
The product with the ninja forms add on on the edit order screen

Customization ↑ Back to top

You can use the following snippets to customize the plugin.

Note: This is a Developer level section. If you are unfamiliar with code and resolving potential conflicts, select a WooExpert or Developer for assistance. We are unable to provide support for customizations under our  Support Policy.

Hide price add-ons equal to zero

ninja-forms

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.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top