Gravity Forms is a premium plugin which costs $59 USD and one of the most widely used form builder plugins developed for WordPress.

Its drag-and-drop interface can make building complex forms very easy  without having any programming knowledge.

WooCommerce is the most widely used ecommerce solution which integrates into WordPress.

Whether you’re selling products online or just want to showcase products, it can be installed with a couple clicks through the WordPress plugin library.

On a recent project I created a form using the Gravity Forms plugin which pulled products from a WooCommerce catalogue into checkbox fields by category slug.

The form allowed visitors to place an order for multiple products on a single page rather than adding individual items to a shopping cart and then complete their order on checkout.

The benefits of having a single page order form can not only simplify the order process and but also increase conversions.

The following steps will guide you through creating check boxes on a Gravity Form that provide a selection of WooCommerce products by category.

Gravity Forms CSS Customization1. Create a checkbox field in your gravity form to display products for a specific category.

In the checkbox form field you can assign a CSS class to display the products in multiple columns. To do this, select the Appearance tab and paste the following gf_list_4col in the Custom CSS Class field.

2. Add the following CSS to your theme and be sure to update the “icon-check.png” to link locally on your server.

Copy to Clipboard

3. Paste and modify the following code in your WordPress themes functions.php file.

Copy to Clipboard

The end result should allow visitors to click items for selection rather than check boxes for form submission.