GF Product Table Documentation | OIO Publisher

GF Product Table

Transform Gravity Forms products into beautiful, conversion-optimized order tables

Version 2.5

1. Getting Started

What is GF Product Table?

GF Product Table transforms your Gravity Forms product fields from the default clunky layout into a clean, professional order table. Think WooCommerce or Shopify checkout – but for Gravity Forms.

Requirements

WordPress 5.0 or higher
Gravity Forms 2.5 or higher (2.7+ recommended)
PHP 7.4 or higher

Installation

Upload the Plugin

Go to Plugins → Add New → Upload Plugin and select the gf-product-table.zip file.

Activate

Click Activate Plugin after installation completes.

Configure Your Form

Open any form with product fields and enable the Product Table feature (see Setup Guide below).

2. Setup Guide

Method 1: Using the Product Table Panel (Recommended)

Open the Form Editor

Navigate to Forms → [Your Form] → Edit

Open the Product Table Panel

In the right sidebar, click the Product Table tab.

Enable the Table

Check “Enable Product Table for this form”

Select Products

Check which product fields you want to include in the table. You can also add:

Product Image – URL or use the media library
Description – Short description shown below product name

Save the Form

Click Update to save your changes.

Method 2: Using Form Settings

You can also enable the table via Form Settings → Form Options → Enable Product Table.

Adding Product Images

For each product in the table, you can add an image in two ways:

Media Library: Click “Select” in the Product Table panel to choose an image
Direct URL: Paste an image URL directly

💡 Tip: Image Sizing Images are displayed at 60×60 pixels. For best results, use square images (1:1 aspect ratio). Non-square images will be scaled to fit without distortion.

Adding Product Descriptions

Add a brief description for each product. This appears below the product name in a smaller, lighter font. Keep it short – 1-2 sentences max.

3. Customization

Customize the table appearance via Form Settings → Form Options.

Custom Labels

Change any column header text:

Setting	Default	Example
Product Column Label	Product	Item, Service, Package
Options Column Label	Options	Size, Variant, Selection
Price Column Label	Price	Unit Price, Cost
Qty Column Label	Qty	Quantity, Amount
Subtotal Column Label	Subtotal	Line Total, Amount
Products Total Label	Products Total:	Order Total:, Items Total:

Custom Colors

Setting	Default	Description
Primary Color	`#6366f1`	Quantity buttons color
Header Background	`#f9fafb`	Table header row background

💡 Color Format Enter colors as hex codes including the # symbol (e.g., #6366f1).

Display Options

Hide Native Total Field: Hides the default Gravity Forms total field (use if you only want the table’s “Products Total”)
Use Table Checkout Button: Adds a checkout button directly in the table footer
Checkout Button Text: Customize the button text (default: “Checkout”)

4. Payment Gateway Setup

⚠️ Critical: Payment Amount Setting The most common issue with payments is incorrect configuration of the payment amount. Always set your payment feed to charge the Form Total, not a specific product field.

Stripe Setup

Open Stripe Feed

Go to Form Settings → Stripe

Set Transaction Type

Select “Products and Services”

Set Payment Amount

IMPORTANT: Set Payment Amount to “Form Total” – NOT a specific product field.

Save Settings

Click Save Settings

PayPal Setup

Same principle – ensure your PayPal feed is set to charge the Form Total.

Why This Matters

GF Product Table syncs product quantities and options to Gravity Forms’ native fields. Gravity Forms then calculates the total. If your payment feed points to a specific product instead of Form Total, it will only charge for that one product – ignoring other products, shipping, taxes, etc.

Common Mistake If your order shows $50 but Stripe only charges $25, check your Stripe feed – it’s probably set to a specific product field instead of Form Total.

5. Multi-Step Forms

GF Product Table fully supports multi-step (multi-page) forms.

Recommended Setup

Step 1: Product selection (with Product Table)
Step 2: Shipping options, customer details
Step 3: Payment and confirmation

How It Works

When users select products and quantities on Step 1, those values are synced to Gravity Forms’ native hidden fields. When they navigate to subsequent steps, Gravity Forms preserves these values automatically.

💡 Best Practice Place the product table on the first step of your form. This ensures all product selections are captured before the user proceeds.

Showing Order Summary on Later Steps

To show the order summary on Step 2 or 3:

Add a Total field – this displays the running total
Or use Gravity Forms’ Subtotal field (calculation type)

The Product Table itself only displays on the step where your products are. Use native GF fields for order summaries on other steps.

6. Compatibility

Supported Product Types

Product Type	Status	Notes
Single Product	✓ Supported	Full support with quantity controls
Dropdown Product	✓ Supported	Displays as dropdown in Options column
Radio Product	✓ Supported	Displays as dropdown in Options column
Option Fields	✓ Supported	Linked option fields show in Options column
Quantity Field	✓ Supported	Uses table’s built-in quantity controls
Hidden Product	Partial	Works but not displayed in table
Calculation Product	Partial	For totals – don’t include in table
User Defined Price	✗ Not Supported	Use native GF field outside table
Checkbox Options	✗ Not Supported	Use native GF field outside table

Add-on Compatibility

Add-on	Status	Notes
Stripe	✓ Compatible	Set payment amount to Form Total
PayPal	✓ Compatible	Set payment amount to Form Total
Square	✓ Compatible	Set payment amount to Form Total
Coupons	✓ Compatible	Discounts apply to GF total
Conditional Logic	✓ Compatible	Show/hide products based on conditions
Partial Entries	✓ Compatible	Works normally

Theme Compatibility

GF Product Table uses isolated CSS that shouldn’t conflict with most themes. If you experience styling issues, the table uses the .gfpt-wrapper class which you can target with custom CSS.

7. Troubleshooting

Payment Issues

❌ Payment amount is wrong (e.g., $25 charged instead of $50)

Cause: Payment feed is set to a specific product field instead of Form Total.

Fix: Go to Form Settings → Stripe/PayPal → Change “Payment Amount” to Form Total.

❌ Payment is $0

Cause: Products have 0 quantity, or the Total field is missing.

Fix:

Add a Total field to your form
Ensure products start with quantity 0 (user must add items)
Check that product prices are set correctly in field settings

Display Issues

❌ Table not showing

Possible causes:

Product Table not enabled – Go to Form Settings → Form Options → Enable Product Table
No products selected – Open Product Table panel and check products
JavaScript error – Check browser console (F12) for errors

❌ Native product fields still showing

Cause: CSS hiding not applied.

Fix: The plugin adds gfpt-hidden-native class to hide fields. If your theme overrides this, add custom CSS:

.gfpt-hidden-native {
    display: none !important;
}

❌ Images look distorted

Cause: Non-square images with wrong aspect ratio.

Fix: Use square images (1:1 ratio) or images that look good cropped to square. The plugin uses object-fit: contain to prevent distortion.

❌ Options dropdown too wide

Cause: Long option text.

Fix: Shorten option names, or add custom CSS to limit width:

.gfpt-option-select {
    max-width: 200px;
}

Multi-Step Form Issues

❌ Values reset to 0 on step 2/3

Cause: Plugin was syncing on pages where table doesn’t exist (fixed in v2.3.7+).

Fix: Update to the latest version. The plugin now only syncs when the table is visible.

❌ Total shows $0 on payment step

Cause: No Total or Subtotal field on the payment step.

Fix: Add a Total field to the step where payment occurs. GF needs this to calculate the charge.

Calculation Issues

❌ “Products Total” doesn’t match GF Subtotal

This is expected. The table’s “Products Total” only includes products IN the table. GF’s Subtotal includes all pricing fields (shipping, fees, etc.).

❌ Subtotal/Total field is hidden

Cause: Plugin hides calculation fields with “subtotal” in the label.

Fix: Rename your field to something else (e.g., “Order Total”) or use a Total field type instead of Calculation.

8. FAQ

Can I have multiple tables on one form?

Currently, all enabled products appear in a single table. If you need separate product groups, consider using multiple forms or conditional sections.

Can I change the quantity button colors?

Yes! Go to Form Settings → Form Options → Primary Color and enter your preferred hex color.

Does it work with AJAX-enabled forms?

Yes, AJAX form submission is fully supported.

Can I use this with WooCommerce?

This plugin is for Gravity Forms only. For WooCommerce, use WooCommerce’s native cart functionality.

How do I show/hide products based on user selection?

Use Gravity Forms’ built-in Conditional Logic on your product fields. Products will show/hide in the table based on your conditions.

Can users enter their own price?

User Defined Price fields are not supported in the table. Add them as regular GF fields outside the table.

Why can’t I select multiple options (checkboxes)?

The table is designed for single-selection options (dropdowns). This fits the “shopping cart” paradigm – pick a product, choose a variant, set quantity. Checkbox options don’t fit this model well. Use native GF checkbox fields outside the table if needed.

Can I export orders to a spreadsheet?

Yes! Use Gravity Forms’ built-in Entry Export feature. All product data is stored in GF’s entry system normally.

Does it support recurring payments/subscriptions?

The table works with one-time payments. For subscriptions, the subscription setup is handled by your payment add-on (Stripe, PayPal) – the table just handles the product display.

Need More Help?

If you’re still stuck, we’re here to help:

Email: support@oiopublisher.com
Website: oiopublisher.com

When contacting support, please include:

WordPress version
Gravity Forms version
GF Product Table version
Screenshot of the issue
Any error messages from browser console (F12 → Console)