There may come a time in your life when you’re working with WooCommerce and WooCommerce Subscriptions and you realise that you need to add a custom field to a variable subscription product. Admittedly, most people will live their entire lives without encountering this need but if you’re one of the few who do, then hopefully this article will help.
We are going to add a custom text field to a variable subscription product and save it. The code below is everything you need.
| <?php | |
| /** | |
| * Add a custom text field to a variable subscription product | |
| * @since 1.0.0 | |
| */ | |
| function prefix_display_fields( $loop, $variation_data, $variation ) { | |
| $custom_field_value = get_post_meta( $variation->ID, 'my_custom_field', true ); | |
| ?> | |
| <div class="variable_subscription_pricing show_if_variable-subscription"> | |
| <p class="form-row form-row-first form-field show_if_variable-subscription _subscription_my_custom_field"> | |
| <label for="variable_subscription_my_custom_field[<?php echo esc_attr( $loop ); ?>]"> | |
| <?php | |
| // translators: placeholder is a currency symbol / code | |
| echo esc_html__( 'My Custom Field', 'text-domain' ); | |
| ?> | |
| </label> | |
| <input type="text" class="wc_input_my_custom_field" name="variable_my_custom_field[<?php echo esc_attr( $loop ); ?>]" value="<?php echo esc_attr( $custom_value ); ?>" placeholder="<?php echo esc_attr_x( 'e.g. Hello', 'example text', 'text-domain' ); ?>"> | |
| </p> | |
| </div> | |
| <?php | |
| } | |
| add_action( 'woocommerce_variable_subscription_pricing', 'prefix_display_fields', 10, 3 ); | |
| /** | |
| * Save the custom field | |
| * @since 1.0.0 | |
| */ | |
| function prefix_save_product_variation( $variation_id, $index ) { | |
| if ( isset( $_POST['variable_my_custom_field'][ $index ] ) ) { | |
| $variable_my_custom_field = sanitize_text_field( $_POST['variable_my_custom_field'][ $index ] ); | |
| update_post_meta( $variation_id, 'variable_my_custom_field', $variable_my_custom_field ); | |
| } | |
| } | |
| add_action( 'woocommerce_save_product_variation', 'prefix_save_product_variation', 20, 2 ); |
Displaying the custom field
The function prefix_display_fields will output the field. Note that the $loop parameter is used to keep track of which variation is being displayed. The function is hooked to the woocommerce_variable_subscription_pricing action.
Saving the custom field value
Having output the field, we now want to save any values entered. The prefix_save_product_variation function accomplishes this by hooking to the woocommerce_save_product_variation action. Note that the $index parameter is used here to identify which variation is being saved.
Hi! I was able to create the field and save it, but I’m having problems outputting it. I was wondering if you could elaborate on that. I’d also like to know if you could e-mail me a quote of what it would cost to have a few modifications like that done. Thanks!
Hello Gareth,
The code doesn’t seem to work anymore.
The custom field isn’t saved in my test site.
Thanks
Daniele
Hi Daniele
I can only suggest to check your code. It worked for me when I tested it.
This is the one that worked for me:
https://wordpress.stackexchange.com/questions/276941/woocommerce-add-extra-field-to-variation-product
Thanks