How to add a custom field to a WooCommerce Subscriptions variation product
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. You can do this two ways – the easy way with a plugin, the harder way with some custom code. I’ll show both methods.
By the way, you can also take a look at this article on adding custom fields to WooCommerce variations.
Add custom fields to WooCommerce subscriptions with a plugin
All you need for this method is the WooCommerce Product Add-Ons Ultimate plugin. This will allow you to add all kinds of custom field to your subscription product, including:
- Checkboxes
- Checkbox groups
- Child products
- Custom prices (name your own price)
- Date pickers
- File uploads
- Image swatches
- Number fields
- Radio buttons
- Text fields
- Textareas
Check out the Add-Ons Ultimate plugin for more information.
WooCommerce Product Add-Ons Ultimate
Create unique shopping experiences by allowing customers to personalise products with extra options
Add a custom field to a subscription product programmatically
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