Add or replace a variation fields into a WYSIWYG editor field in Woocommerce

Question

I'm trying to figure out how I can turn a Woocommerce Variation Subscription product text field into a WYSIWYG editor.

How it looks now:

As you can see I put code into that field to updates its appearance, but that isn't going to work for my client who knows no code. How can I add a text editor to this field?

Answer 1

It's not possible to replace the variation description, but it can be hidden (in case of need).

It's possible to add a WYSIWYG editor to Woocommerce variations. But it will not work properly due to jQuery and Ajax that is enabled on product variations and subscriptions variations.

Here is the code:

// Add WYSIWYG custom field in Variation Settings
add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );
function variation_settings_fields( $loop, $variation_data, $variation ) {

    $text_area = get_post_meta($variation->ID, '_description2', true) ? get_post_meta($variation->ID, '_description2', true) : '';
    $args['textarea_rows'] = 6;

    echo '<p>'.__( "Description 2", "woocommerce" ).'</p>';

    wp_editor( $text_area, "description2_$loop", $args );
}
// Save WYSIWYG custom field value as Variation post meta data
add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );
function save_variation_settings_fields( $variation_id, $loop ) {
    if( isset( $_POST["description2_$loop"] ) )
        update_post_meta( $variation_id, '_description2', wp_kses_post( $_POST["description2_$loop"] ) );
}

Code goes in function.php file of your active child theme (or active theme).

Tested but doesn't work properly and it's bugged: The tool bar doesn't appear and the editor stays blocked on "text" editor mode, so "visual" editor mode (tab) doesn't work. See below:

It just works as a normal text area field, saving the imputed text correctly