ARTICLES

Use Fluent Forms To Suggest WooCommerce Products Dynamically Without Additional Plugin

Imagine how cool it is if we can use Fluent Forms to suggest some WooCommerce products after visitor answered a few simple questions. Some more, it’s without additional plugin.

Fluent Forms

Yea, Fluent Forms plugin is my favorite WordPress form builder as always. WP Manage Ninja just released latest version (4.3.5) and added a very interesting module — Quiz module! (Only for Pro version) I will play around with this module later for sure. But now let us focus on the WooCommerce products suggestion feature first!

Environment Setup

  • WordPress 5.9.3
  • PHP 7.4
  • Open LiteSpeed Server
  • Hello Theme by Elementor (You can use any theme you like)
  • Fluent Forms Free 4.3.5
  • Fluent Forms Pro 4.3.5 (Optional)
  • WooCommerce 6.4.1
  • All custom codes in this tutorial place in theme / child theme functions.php

I created several WooCommerce products in my test website so I could use them as suggested products later on.

My dummy products in shop page.
My dummy products in shop page.

Step 1 – Plan Your Product Suggestion Logic

We must set a product suggestion logic first. So mine will be as below.

My product suggestion logic.
My product suggestion logic.

Logic explanation:

As long as the gender is female, my form will suggests T shirt and branded wallet. If visitor is male, suggests gaming keyboard and laptop if hobby is Gaming, suggests basketball and sport shoes if hobby is Sports, suggests all 4 products if hobby is Shopping.

Step 2 – Create Form

Once plan and logic set, I can easily create a product suggestion form with 2 questions. Ask for visitor’s hobby and gender. I set both as radio input, required, and given the name attribute accurately so we can code it out smooth later. Please avoid to name them as radio_input_1 or input_1 etc, this will be confusing yourself as the coder.

Form with 2 radio input only.
Suggestion form with 2 radio input only.

Hobby field details.
Hobby field details.

Gender field details.
Gender field details.

After saved the form, switch to the Settings & Integrations tab, I will activate the Deny empty submission option. If you are using Fluent Forms Pro version, you could activate the Delete entry data after form submission or Enable auto delete old entries too since this is a product suggestion form and the submission not necessary to keep. (Of course you can keep If you want to analyze your visitor submission.)

Deny empty submission and custom message.
Deny empty submission and custom message.

Activate these setting if you do not want to keep the submission entries. For Pro version only.
Activate these setting if you do not want to keep the submission entries. For Pro version only.

Now, you can use the shortcode [fluentform id="YOUR_FORM_ID"] to embed it on any page you like. I just create a simple page and paste the shortcode into it.

Embed form into a page via shortcode.
Embed form into a page via shortcode.
Frontend page view.
Frontend page view.

Step 3 – Use Fluent Forms Hooks

Okay, the required validations just let Fluent Form to handle. We just need to get the visitor answers from fluentform_before_insert_submission action hook.

<?php

add_action( 'fluentform_before_insert_submission', 'itchycode_suggest_products', 10, 3 );

function itchycode_suggest_products( $insertData, $data, $form ) {

	// My product suggestion form id is 3
	$my_form_id = 3;
	if( $form->id != $my_form_id ) {
		return;
	}

	// Get the visitor answers from $data
	$hobby = $data['hobby'];
	$gender = $data['gender'];

	// Suggested product ids will be saved in this array
	$product_ids = array();

	/**
	 * My WooCommerce product IDs  as below:
	 * Sport Shoes => 99
	 * Basketball => 98
	 * Branded Wallet => 97
	 * Gaming Keyboard => 96
	 * Laptop => 95
	 * T Shirt => 69
	 */


	if( $gender == 'Female' ) {
		// Female will suggest T Shirt and Branded Wallet only
		$product_ids = [69, 97];
	} else {
		// Male
		switch( $hobby ) {
			case 'Sports':
				// $hobby === 'Sports', suggest Basketball and Sport Shoes
				$product_ids = [98, 99];
				break;
			case 'Gaming':
				// $hobby === 'Gaming', suggest Gaming Keyboard and Laptop
				$product_ids = [96, 95];
				break;
			case 'Shopping':
			default:
				// $hobby === 'Gaming', suggest Basketball, Sport Shoes, Gaming Keyboard and Laptop
				$product_ids = [98, 99, 96, 95];
				break;
		}
	}

}
?>

Please read thru the comments and you will understand it easily. However, the form still do nothing because we just populate our product IDs without next action. How to display those products after the form submission?

Step 4 – Use WooCommerce products shortcode

The easiest way to display WooCommerce products is using it’s prebuilt shortcode. You could read more in their documentation page.

// This will output products by ID
[products ids="98,99,96,95"]

We will also use fluentform_submission_confirmation filter hook to replace the confirmation message with our WooCommerce products.

Final code as below. (Additional codes started on line 53.)

<?php

add_action( 'fluentform_before_insert_submission', 'itchycode_suggest_products', 10, 3 );

function itchycode_suggest_products( $insertData, $data, $form ) {

	// My product suggestion form id is 3
	$my_form_id = 3;
	if( $form->id != $my_form_id ) {
		return;
	}

	// Get the visitor answers from $data
	$hobby = $data['hobby'];
	$gender = $data['gender'];

	// Suggested product ids will be saved in this array
	$product_ids = array();

	/**
	 * My WooCommerce product IDs  as below:
	 * Sport Shoes => 99
	 * Basketball => 98
	 * Branded Wallet => 97
	 * Gaming Keyboard => 96
	 * Laptop => 95
	 * T Shirt => 69
	 */


	if( $gender == 'Female' ) {
		// Female will suggest T Shirt and Branded Wallet only
		$product_ids = [69, 97];
	} else {
		// Male
		switch( $hobby ) {
			case 'Sports':
				// $hobby === 'Sports', suggest Basketball and Sport Shoes
				$product_ids = [98, 99];
				break;
			case 'Gaming':
				// $hobby === 'Gaming', suggest Gaming Keyboard and Laptop
				$product_ids = [96, 95];
				break;
			case 'Shopping':
			default:
				// $hobby === 'Gaming', suggest Basketball, Sport Shoes, Gaming Keyboard and Laptop
				$product_ids = [98, 99, 96, 95];
				break;
		}
	}

	add_filter( 'fluentform_submission_confirmation', function( $returnData, $form, $confirmation ) use ( $my_form_id, $product_ids) {

		// Only target my product suggestion form
		if( $form->id!= $my_form_id ) {
			return $returnData;
		}

		// Convert our product ids into string with comma separator
		$ids = implode(',', $product_ids);
		$limit = count($product_ids);
		$columns = 4;

		// Execute the products shortcode by WooCommerce
		ob_start();
		echo do_shortcode("[products limit='{$limit}' columns='{$columns}' ids='{$ids}']");
		$wc_products = ob_get_clean();

		// Replace the confirmation message with our WooCommerce products
		$returnData = [
			'message'     => $wc_products,
			'action'      => 'hide_form',
		];
	
		return $returnData;
	
	}, 10, 3);

}


?>

Great! Let’s check our result in frontend now!

Test 1 = Hobby: Gaming, Gender: Female
Test 1 = Hobby: Gaming, Gender: Female
Test 2 = Hobby: Shopping, Gender: Male
Test 2 = Hobby: Shopping, Gender: Male

Work like a charm!!

Conclusion

This is just a simple customization to connect different plugins and work together. I am always suggest WordPress users to try use your existing installed plugins to solve your problem. Learn and understand your existing plugins is a must. Try not to install new plugin for every single new requirement. The more plugins you have, the more efforts needed to maintain your WordPress website.

Hope my article and sharing can help a little on your current problem. Welcome to connect with me and please please correct me if any code in this article is wrong or there is better approach.

Action & Filter hooks used in this tutorial:

  • fluentform_before_insert_submission
  • fluentform_submission_confirmation
  • [products] shortcode
  • About Author

    Jenn@Itchycode
    I like to solve problems by coding. I like websites, web applications and everything viewable from browser. Knowledge sharing can grows my confidence. A simple "thank you" will make my day :)
    More about me

Subscribe For Notification

Get notification whenever new article published.
Subscription Form

Discussion

COMMENT
Be the first to drop a comment.
New comment
Comment Form