Building a Discount Coupon Solution with JetPlugins 

With all the variety of powerful tools Crocoblock offers, you can be creative and make your own solutions, one of which I will describe in this article. 

So, when the robust JetFormBuilder works seamlessly with JetEngine, which I consider the most powerful plugin for dynamic content in the WordPress ecosystem, it opens the door to some truly exciting use cases.

💡 Read this comprehensive guide on how JetFormBuilder can put working with dynamic content on another level, especially in conjunction with JetEngine. 

Table of Contents

• The Goal and Tools
• WordPress Coupons: Use Case Implementation with Crocoblock
  • Creating coupons
  • Creating a checkout form
  • Adding JetFormBuilder free add-on and creating a query
  • Fetching the discount value for the coupon code
• FAQ
• Wrapping Up

The Goal and Tools

I want to give the users of my WooCommerce website coupons and make them work: each coupon has its discount, and they must work at checkout when the user enters a coupon code into the corresponding field. 

Two Crocoblock plugins can be used to implement it: JetFormBuilder and JetEngine. JetFormBuilder is used for the checkout, as you can create checkout forms for PayPal/Stripe or WooCommerce payment methods. JetEngine, in turn, is a tool for storing coupons and fetching data. 

WordPress Coupons: Use Case Implementation with Crocoblock

This is a custom solution that uses one of the free add-ons. You can find more add-ons on the dedicated website page. 

Creating coupons

First, I need to create coupons, and Custom Content Type (CCT) is the best performance-driven solution for this as it stores records in a separate database table, which speeds up its querying a lot. 

How to create a Custom Post Type, you could ask? Well, it’s very straightforward: go to JetEngine > JetEngine on the Dashboard and activate the Custom Content Type module. Now, using this WordPress entity, you will be able to create items that are optimized for your site’s performance. 

For the Coupon content type, I will need just two meta fields: Text and Number value. The Text field will contain the coupon label, and the numeric field will contain the discount amount or percent. 

Now, go to the newly created CCT and add the test coupon. In my case, it’s called “NewYear” and has a discount amount of “20.” 

Creating a checkout form

Now, let’s create a checkout form where the coupons will do their job. 

💡 Read this guide for more details about creating a form for selling goods without WooCommerce. 

For my demonstration form, I will create three subscription levels using the Checkbox field type. It has a field called “Calculation” where you can add the price. This field is hidden, so if you want to inform users about the price, write it in the Label input. 

If you have a fixed price, let’s say for the one product you sell using this form, you can display it as a paragraph text and then add a Hidden field with the price – so it will be available for calculations. 

Also, for this form, we will need a Text field where users can insert the coupon code, a Hidden field to fetch the coupon discount, and a Calculated field to display the final price. Create them, don’t forget to add names, and click “Publish.” We will set up the Hidden and Calculated fields in the final step. 

Adding JetFormBuilder free add-on and creating a query

Now, download the free add-on, which can help you not only with the coupon case but also in many other cases, as it works with different types of fields. You can check out more examples in this article. 

⏬ Download the Field Updater add-on from GitHub. 

Install and activate the add-on just like a normal plugin. 

After that, go to JetEngine > Query Builder and add a new query. We need it to fetch the coupon discount value based on the coupon code, and the add-on I’ve mentioned above is created exactly for the purpose of getting field values based on other fields’ values. 

Here are the settings for the query:

• Query Type – Custom Content Type Query;
• From Content Type – select the custom content type you’ve created to store coupons. In my case, it’s called “Coupon”; 
• In the Query section, click “Add New,” and in the Field dropdown, choose the name of the field you use for the coupon code. In Compare, choose “Equals,” and for the Value field, click on the database icon to open the list of macros. Choose the “JFB Update Field – Form Field Value,” and you will see an input for a form field name. Copy and paste the name of the field you used for the coupon code in your form. 

This short video will guide you through:

Fetching the discount value for the coupon code

This is the last step in setting up the coupon functionality. Go back to the form and click on the Hidden field – let’s set it up so it fetches the discount value depending on the coupon code the user enters. Choose “Manual Input” as a value, open the Field Updater tab on the right panel, and activate the toggle. 

In the Field to Listen section, insert the field name of the input for a coupon code (add_coupon in my case). 

In the Callback field, insert the query ID of the query you’ve just created and the object field to show (take it from your custom post type for the coupons, the field for the discount value), separating them with a vertical bar (“|”). 

The query ID is shown at the end of the URL in the browser’s address bar when the query is open:

As my discount value field is “discount” and the query ID is 80, it will look like this:

80|discount 

This short video will guide you through:

That’s it for the tricky part. 

Now, go to the Calculated field and set up the formula for your final price, taking the initial price value from the field where you have the price and the discount value from the Hidden field. 

For example, if your discount value means the percentage to subtract from the starting price, the formula will look like this:

%choose_subscription%-(%choose_subscription%*%coupon_price%/100)

Where %choose_subscription% is the field with the initial price, and %coupon_price% is the value from the hidden field that is fetched according to the coupon code the user enters. 

All the field macros (with the % sign) are available by clicking on the wrench icon in the Calculated field. 

Insert the form into the page, style it, and enjoy the result!

Remember that if you use Elementor or Bricks, you don’t have to style the form using the Block Editor. Add the JetForm widget to the page, and you will find styling options for every little detail of the form there.

FAQ

Wrapping Up

In this article, I’ve described the process of creating a custom coupon solution using JetFormBuilder, JetEngine, and the JFB Update Field add-on. It may seem a bit overwhelming at first, but once you implement it yourself, you will see how straightforward and handy it is. You can be creative and use it for different cases, such as displaying related items and more.