WooCommerce Ninja Forms Product Add-Ons

Note: Ninja Forms is now compatible with the latest version of Ninja form 3.4 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.

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

↑ Back to top

	/*
	* Snippet to hide price add-ons equal to zero.
	* Code goes in the functions.php file in your theme.
	*/

	add_filter( 'wc_nf_addons_format_cart_item_price' , 'wc_ninja_forms_hide_zero_price' );

	function wc_ninja_forms_hide_zero_price( $value ) {

	$hide_price = ' (' . wc_price( '0.00' ) . ')';

	if ( $value == $hide_price ) {
	return '';
	} else {
	return $value;
	}

	}

view raw wc-ninja-forms-product-add-ons-hide-zero-price-add-ons.php hosted with ❤ by GitHub

Hide all sub-prices

↑ Back to top


	/*
	* Snippet to hide all sub prices
	* Code goes in the functions.php file in your theme.
	*/
	add_filter( 'wc_nf_addons_cart_option', 'wc_ninja_forms_price' );
	function wc_ninja_forms_price( $display ) {
	return '';
	}

view raw wc-ninja-forms-product-add-ons-hide-sub-prices.php hosted with ❤ by GitHub

FAQ

↑ Back to top

Calculations aren’t working. How do I fix this?

↑ Back to top

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?

↑ Back to top

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?

↑ Back to top

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.