Image Choice Quantities

Description

Injects Number fields into matching Image Choice cards server-side so each image can collect a quantity without leaving the card layout. Supports multiple image-choice → quantity mappings per form. Configure a list of forms, each with one or more field mappings that pair an Image Choice field ID with a choice_N → Number field ID lookup.

Usage Notes

  • Form setup: Add an Image Choice field and one Number field per image card. Note the form ID, Image Choice field ID, and each Number field ID from the form editor.
  • Configuration: Edit $gf_image_choice_quantities. Each entry is one form. Under field_mappings, add one entry per Image Choice field. quantities maps choice_N (the last segment of the rendered card class) to a Number field ID.
  • Choice numbers: Copy the last segment of the rendered card class, e.g. gchoice_12_3_2 is form 12, Image Choice 3, choice 2. Select One (default) starts at 0. Select Multiple starts at 1 and skips values ending in 0 (1-9, then 11, 12, …).
  • Server-side injection: The Number field’s natural container is suppressed via gform_field_container_{form}_{field} and re-rendered inside the choice via GF_Field::get_field_content(). No FOUC.
  • Submission: The rendered input keeps its native name and ID, so form submission and validation are unchanged.
  • Conditional logic: The injected wrapper reuses the field_{form}_{field} ID, so conditional logic targeting the Number field still shows/hides it (now inside the choice).
  • Click targets: Nested field markup inside .gchoice can bubble clicks to the image choice input. A form-specific init script stops propagation on each quantity input so editing does not toggle the choice.
Discuss in community forums
View documentation

Resources

Code

Snippet Documentation

Frequently Asked Questions

Adding a snippet is easy-peasy.

How do I add a snippet to my WordPress site?

Click the Copy Code button to copy the snippet to your clipboard. Then paste it into the appropriate file in your WordPress installation — typically your theme’s functions.php file or a custom plugin file. Alternatively, you can use a code-snippets plugin to add the code without editing theme files directly.

Where should I place PHP snippets?

The recommended approach is to create a site-specific plugin or use a code-snippets manager plugin. Avoid adding code directly to your theme’s functions.php — those changes are lost when the theme updates. If you must use a theme file, use a child theme’s functions.php instead.

Where should I place JavaScript or CSS snippets?

JavaScript and CSS snippets should be enqueued properly using wp_enqueue_script() or wp_enqueue_style() within a PHP file (such as your custom plugin or child theme’s functions.php). Avoid pasting scripts directly into template files or the Customizer’s “Additional CSS” for anything non-trivial.

Do I need to log in to copy a snippet?

Yes. Snippet code is only visible to logged-in users. Create a free account or log in to view and copy the full code.

What does the “Requires” field mean?

Each snippet lists its dependencies — the minimum versions of WordPress, PHP, and any Gravity Forms add-ons needed for the snippet to work. Make sure your environment meets these requirements before using the code.

Will snippets break my site if I update Gravity Forms?

Snippets rely on Gravity Forms hooks and APIs that may change between major versions. Always check the snippet’s version compatibility before updating. We recommend testing on a staging site first. If a snippet stops working after an update, check back here — we update snippets when breaking changes occur.

Can I modify a snippet to fit my needs?

Absolutely. Snippets are starting points. You’re free to adapt them to your specific use case. If your changes might benefit others, consider contributing back via the linked GitHub repository.