JetFormBuilder WooCommerce Cart and Checkout Action

Description

An extra plugin to integrate Gutenberg-built forms and WooCommerce checkout.

Add a WooCommerce
Direct checkout to Gutenberg forms

WooCommerce Cart & Checkout Action links JetFormBuilder forms to WooCommerce payments. It can perform the ‘Add to Cart’ action for a single product and redirect to the Checkout page. Add, edit, and shuffle the Forms Fields on the Thank you page, apply custom settings to them, and display only those order details you find noteworthy. There’s a possibility to pre-fill the Checkout fields after the redirect as well.

Addon Functionality:
  • WooCommerce integration
  • “Add to cart” feature
  • AJAX redirect to Checkout

How to Configure WooCommerce Cart & Checkout Action

How to set up

Go to JetFormBuilder & Addons and find the “WooCommerce Cart & Checkout Action” addon in the All Available Addons section. Press the “Install Addon” button and, once installed, it will appear on Your Installed Addons. Next, click “Activate Addon” to get it ready for further work.

woocommerce checkout addon installation and activation
JetFormBuilder WooCommerce Cart and Checkout Action 6

As you can see, all PRO version add-ons can be easily installed and activated via JetFormBuilder Dashboard.

How to configure the WooCommerce Cart & Checkout Action

 

Follow the JetFormBuilder & Forms and open one of the created order submission forms. In the right-side menu, you will see the Post Submit Actions section. Click on the “New Action” button and select the “Add to Cart & Redirect to Checkout” option from the list.

redirect to checkout post-submit action
JetFormBuilder WooCommerce Cart and Checkout Action 7

NOTE. For proper functioning of the action, please make sure that the WooCommerce plugin is activated. If it is not, you will be shown the admin notice.

woocommerce cart & checkout addon error
JetFormBuilder WooCommerce Cart and Checkout Action 8
WooCommerce Cart & Checkout Action Settings

 

Once the Post Submit Action is picked, you can proceed to edit it. Click on the pencil-shaped icon, and the Edit Action window will appear. Now, let’s go over the settings it contains.

redirect to checkout action’s editing window
JetFormBuilder WooCommerce Cart and Checkout Action 9
  • Get product ID from. This Radio type field contains two options – “Form Field” and “Manual Input.” By choosing either one, you determine where the form will get the product ID from. It can be done either dynamically (by pulling the product ID from the corresponding Form Field) or manually (by providing the product ID through Manual Input);
  • Product ID field / Input product ID. Choose the corresponding Product ID field from the drop-down list or input the Product ID manually if you have chosen the second option at the previous step;
  • WooCommerce Price field. Here, your need to select the field that stores the total price. If you leave this field empty intentionally, the price will therefore be obtained from the post meta value;
  • Heading for Order Details. In this field, you need to type the title that you intend to show before the order metadata on the Checkout page;
  • WooCommerce order details. By clicking on the “Set up” button, you get to configure a list of custom fields that will be displayed on the “Thank You” page and during order preview in the dashboard. To put it otherwise, you can edit the form metadata here, which means that these order details will be the same for all Redirect to Checkout actions within one particular form. Let’s check out the settings:
    • Safe deleting. This toggle is active by default and prevents you from deleting items unintentionally. When it is on, the item will be only removed after you confirm that you mean to remove it;
    • Label. You can provide the field label here;
    • Select form field. Pick the corresponding form field that you are willing to show on the Order Details list;
    • Add new item. Allows you to add another custom field;
    • Update. Click this button to save the changes and return to the action edit window;
    • Cancel. Click this button to return to the action edit window without saving the changes.
woocommerce order details setup window
JetFormBuilder WooCommerce Cart and Checkout Action 10
  • WooCommerce checkout fields map. Here, you can connect the WooCommerce checkout fields to the corresponding form fields. By doing so, you get a partly pre-filled form after being redirected to the Checkout page.

There are no reviews yet.

Write a review

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.