Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jetsloth/66f1a97297d556bb7231a729a5c3de91 to your computer and use it in GitHub Desktop.
Save jetsloth/66f1a97297d556bb7231a729a5c3de91 to your computer and use it in GitHub Desktop.
Example markup of Image Choices with a Product Option field
<li id="field_x" class="gfield gfield_price gfield_price_x gfield_option_x image-choices-field image-choices-use-images image-choices-show-labels image-choices-layout-horizontal ">
<label class="gfield_label">Field label</label>
<div class="ginput_container ginput_container_checkbox">
<ul class="gfield_checkbox" id="input_x">
<li class="gchoice_x image-choices-choice">
<input name="input_x" type="checkbox" value="Choice Label|1" checked="checked" id="choice_x">
<label for="choice_x" id="label_x" price=" +$ 1.00">
<span class="image-choices-choice-image-wrap" style="background-image: url(path/to/your/image);">
<img src="path/to/your/image" class="image-choices-choice-image" alt="Choice Label">
</span>
<span class="image-choices-choice-text">Choice Label</span>
<span class="image-choices-choice-price">
<span class="ginput_price"> +$ 1.00</span>
</span>
</label>
</li>
</ul>
</div>
</li>
@chrismccoy
Copy link

how can we remove the + sign from the output on ginput_price

@jetsloth
Copy link
Author

jetsloth commented Apr 8, 2020

how can we remove the + sign from the output on ginput_price

You can use the gform_format_option_label Javascript function. But it does need to be implemented a little differently since Image Choices also uses this function. Try something like

https://gist.github.com/jetsloth/301d0183ca85c8479bc4ca0b8b97e637

You can add that to a HTML field in your form, just make sure it's within <script></script> tags also. Or just take the code and add it to your theme or anywhere else you can add Javascript snippets to your site. Tweak as needed. The important parts are the very first line declaring gform_format_option_label_original and the return line calling gform_format_option_label_original

@chrismccoy
Copy link

thanks that works, i was doing a hacky way of doing it, i was doing.

add_filter( 'gform_field_choice_markup_pre_render', function ( $choice_markup, $choice, $field, $value ) {
    if ( $field->type == 'option' ) {
            $new_string = sprintf( '>%s', GFCommon::to_money( $choice['price'] ) );
            return str_replace( ">{$choice['text']}", $new_string, $choice_markup );
    }
    return $choice_markup;
}, 10, 4 );

in combination of hiding the .ginput_price { display:none;}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment