WooCommerce Product Add-Ons Ultimate allows you to extend its functionality with custom code. In this example, we look at how to set the min and max parameters of a number field based on the selected option in a select field. But you can adapt this as you wish.
This example has two fields – a select field and a number field. When the user chooses an option in the select field, the number field will update dynamically to allow different minimum and maximum values.
Here’s the settings for the select field. You’ll notice that there are a couple of extra columns for the options. You can enter a minimum and maximum value per option. When the user selects that option, the parameters will change in the number field.
Here’s the settings for the number field. There are no modifications to this.
When the user updates the select field on the front end, the values you’ve assigned for Min and Max in the select field option settings will be applied to the min and max attributes of the number field.
To achieve this, you just need to add the snippet below to your site. Don’t forget to update the field IDs in line 6 and line 13 to your own IDs.
| <?php | |
| /** | |
| * This is the ID of the select field that will set the min/max values | |
| */ | |
| function demo_minmax_get_colour_field_id() { | |
| return 1158; // Change this ID number | |
| } | |
| /** | |
| * This is the ID of the number field that has dynamic min and max values | |
| */ | |
| function demo_minmax_get_width_field_id() { | |
| return 1159; // Change this ID number | |
| } | |
| /** | |
| * Add new columns for min / max values | |
| */ | |
| function demo_minmax_add_extra_params( $option_count, $group_id, $item_key, $item, $key ) { | |
| if( isset( $item['field_id'] ) && $item['field_id'] == demo_minmax_get_colour_field_id() ) { | |
| $name = '_product_extra_groups_' . esc_attr( $group_id ) . '_' . esc_attr( $item_key ) . '[field_options][' . esc_attr( $option_count ) . ']'; | |
| $min_width = isset( $item['field_options'][esc_attr( $key )]['min_width'] ) ? $item['field_options'][esc_attr( $key )]['min_width'] : ''; | |
| $max_width = isset( $item['field_options'][esc_attr( $key )]['max_width'] ) ? $item['field_options'][esc_attr( $key )]['max_width'] : ''; ?> | |
| <td class="pewc-option-min_width pewc-option-extra"> | |
| <input type="number" class="pewc-field-option-extra pewc-field-option-min_width" name="<?php echo $name; ?>[min_width]" value="<?php echo esc_attr( $min_width ); ?>"> | |
| </td> | |
| <td class="pewc-option-max_width pewc-option-extra"> | |
| <input type="number" class="pewc-field-option-extra pewc-field-option-max_width" name="<?php echo $name; ?>[max_width]" value="<?php echo esc_attr( $max_width ); ?>"> | |
| </td> | |
| <?php } | |
| } | |
| add_action( 'pewc_after_option_params', 'demo_minmax_add_extra_params', 10, 5 ); | |
| /** | |
| * Add titles to the new columns | |
| */ | |
| function demo_minmax_add_extra_params_titles( $group_id, $item_key, $item ) { | |
| if( isset( $item['field_id'] ) && $item['field_id'] == demo_minmax_get_colour_field_id() ) { | |
| printf( | |
| '<th class="pewc-option-min_width pewc-option-extra-title"><div class="pewc-label">%s</div></th>', | |
| __( 'Min Width', 'pewc' ) | |
| ); | |
| printf( | |
| '<th class="pewc-option-max_width pewc-option-extra-title"><div class="pewc-label">%s</div></th>', | |
| __( 'Max Width', 'pewc' ) | |
| ); | |
| } | |
| } | |
| add_action( 'pewc_after_option_params_titles', 'demo_minmax_add_extra_params_titles', 10, 3 ); | |
| /** | |
| * Update the attributes on the front end | |
| */ | |
| function demo_minmax_option_attribute_string( $option_attribute_string, $item, $option_value, $option_index ) { | |
| if( isset( $item['field_id'] ) && $item['field_id'] == demo_minmax_get_colour_field_id() ) { | |
| $min_width = ! empty( $item['field_options'][$option_index]['min_width'] ) ? $item['field_options'][$option_index]['min_width'] : ''; | |
| $max_width = ! empty( $item['field_options'][$option_index]['max_width'] ) ? $item['field_options'][$option_index]['max_width'] : ''; | |
| $option_attribute_string .= " data-min-value='" . esc_attr( trim( $min_width ) ) . "'"; | |
| $option_attribute_string .= " data-max-value='" . esc_attr( trim( $max_width ) ) . "'"; | |
| error_log( $option_attribute_string ); | |
| } | |
| return $option_attribute_string; | |
| } | |
| add_filter( 'pewc_option_attribute_string', 'demo_minmax_option_attribute_string', 10, 4 ); | |
| /** | |
| * Add custom JS on the product page | |
| */ | |
| function demo_minmax_js() { | |
| if( ! function_exists( 'is_product' ) || ! is_product() ) { | |
| return; | |
| } ?> | |
| <script> | |
| ( function( $ ) { | |
| var minmax_update = { | |
| init: function() { | |
| $( 'body' ).on( 'change','.pewc-field-<?php echo demo_minmax_get_colour_field_id(); ?> select', this.reset_minmax ); | |
| $( '.pewc-field-<?php echo demo_minmax_get_colour_field_id(); ?> select' ).trigger( 'change' ); | |
| }, | |
| reset_minmax: function() { | |
| // Update the min and max params on the number field | |
| var min_value = $( this ).find( ':selected' ).attr( 'data-min-value' ); | |
| var max_value = $( this ).find( ':selected' ).attr( 'data-max-value' ); | |
| var field_id = <?php echo demo_minmax_get_width_field_id(); ?>; | |
| $( '.pewc-field-' + field_id ).attr( 'data-field-minval', min_value ); | |
| $( '.pewc-field-' + field_id + ' input' ).attr( 'min', min_value ); | |
| $( '.pewc-field-' + field_id ).attr( 'data-field-maxval', max_value ); | |
| $( '.pewc-field-' + field_id + ' input' ).attr( 'max', max_value ); | |
| } | |
| } | |
| minmax_update.init(); | |
| })( jQuery ); | |
| </script> | |
| <?php | |
| } | |
| add_action( 'wp_footer', 'demo_minmax_js' ); |
Here’s how to add a snippet.