How to add a custom field to a WooCommerce Subscriptions variation product

cody davis 253928 unsplash

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 featured image

WooCommerce Product Add-Ons Ultimate

Personalise products with extra fields and custom options

Find Out More

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 );
view raw woocommerce-subscriptions-custom-field.php hosted with ❤ by GitHub

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.

Four comments

  1. User image

    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!

Leave a Reply

Your email address will not be published. All fields are required.