问题
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?
回答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
回答2:
functions.php:
/**
* Adding variation specifications field
*
* @param $loop
* @param $variation_data
* @param $variation
*/
function demo_product_variation_fields($loop, $variation_data, $variation)
{
wp_enqueue_editor();
woocommerce_wp_textarea_input(
array(
'id' => "demo_variation_specs{$loop}",
'name' => "demo_variation_specs[{$loop}]",
'value' => get_post_meta($variation->ID, '_demo_variation_specs', true),
'label' => __('Specifications', 'woocommerce'),
'desc_tip' => true,
'description' => __('Some description.', 'woocommerce'),
'wrapper_class' => 'form-row form-row-full',
)
);
}
function demo_save_product_variation_fields($variation_id, $loop)
{
$text_field = $_POST['demo_variation_specs'][$loop];
update_post_meta($variation_id, '_demo_variation_specs', $text_field);
}
function demo_load_variation_fields($variations)
{
$variations['demo_variation_specs'] = get_post_meta(
$variations['variation_id'],
'_demo_variation_specs',
true
);
return $variations;
}
add_action('woocommerce_product_after_variable_attributes', 'demo_product_variation_fields', 10, 3);
add_action('woocommerce_save_product_variation', 'demo_save_product_variation_fields', 10, 2);
add_filter('woocommerce_available_variation', 'demo_load_variation_fields');
function demo_manage_admin_js()
{
wp_enqueue_editor();
$theme_version = wp_get_theme()->get('Version');
wp_register_script(
'variations-editor',
get_bloginfo('stylesheet_directory') . '/assets/js/variations-editor.js',
array('jquery', 'quicktags'),
$theme_version,
true
);
wp_enqueue_script('variations-editor');
/**
* Example of adding a plugin to the WP JS editor
*/
wp_register_script(
'tinymce_table_plugin',
get_bloginfo('stylesheet_directory') . '/assets/js/tinymce/plugins/table/plugin.min.js',
array('wp-tinymce-root'),
$theme_version,
true
);
wp_enqueue_script('tinymce_table_plugin');
}
add_action('admin_enqueue_scripts', 'demo_manage_admin_js');
wp-content/themes/demo/assets/js/variations-editor.js:
var documentBody = $(document.body);
function initEditor(event) {
var editorConfig = wp.editor.getDefaultSettings;
editorConfig.mediaButtons = true;
editorConfig.quicktags = true;
editorConfig.tinymce = {
theme:
"modern",
skin:
"lightgray",
language:
"en",
relative_urls: false,
remove_script_host:
false,
convert_urls:
false,
browser_spellcheck:
true,
fix_list_elements:
true,
entities:
"38,amp,60,lt,62,gt",
entity_encoding:
"raw",
keep_styles:
false,
resize:
"vertical",
menubar:
false,
branding:
false,
preview_styles:
"font-family font-size font-weight font-style text-decoration text-transform",
end_container_on_empty_block:
true,
wpeditimage_html5_captions:
true,
wp_lang_attr:
"en-US",
wp_keep_scroll_position:
false,
wp_shortcut_labels:
{
"Heading 1":
"access1", "Heading 2":
"access2", "Heading 3":
"access3", "Heading 4":
"access4", "Heading 5":
"access5", "Heading 6":
"access6", "Paragraph":
"access7", "Blockquote":
"accessQ", "Underline":
"metaU", "Strikethrough":
"accessD", "Bold":
"metaB", "Italic":
"metaI", "Code":
"accessX", "Align center":
"accessC", "Align right":
"accessR", "Align left":
"accessL", "Justify":
"accessJ", "Cut":
"metaX", "Copy":
"metaC", "Paste":
"metaV", "Select all":
"metaA", "Undo":
"metaZ", "Redo":
"metaY", "Bullet list":
"accessU", "Numbered list":
"accessO", "Insert\/edit image":
"accessM", "Remove link":
"accessS", "Toolbar Toggle":
"accessZ", "Insert Read More tag":
"accessT", "Insert Page Break tag":
"accessP", "Distraction-free writing mode":
"accessW", "Add Media":
"accessM", "Keyboard Shortcuts":
"accessH"
}
,
toolbar1:
"formatselect,bold,italic,bullist,numlist,link,table",
wpautop:
false,
indent:
true,
elementpath:
false,
plugins:
"table,charmap,colorpicker,hr,lists,paste,tabfocus,textcolor,wordpress,wpautoresize,wpeditimage,wpgallery,wplink,wptextpattern",
init_instance_callback: function (editor) {
editor.on('dirty', function () {
editor.save();
});
}
};
var textArea = $('.woocommerce_variation textarea');
textArea.each(function (index) {
var textAreaId = $(this).attr('id');
if (tinymce.get(textAreaId)) {
wp.editor.remove(textAreaId);
}
wp.editor.initialize(textAreaId, editorConfig);
var editor = tinymce.get(textAreaId);
editor.on('blur', function () {
$('#' + textAreaId).trigger('change');
});
});
}
documentBody.on('woocommerce_variations_loaded', {name: 'woocommerce_variations_loaded'}, initEditor);
documentBody.on('woocommerce_variations_added', {name: 'woocommerce_variations_added'}, initEditor);
documentBody.on('woocommerce_variations_removed', {name: 'woocommerce_variations_removed'}, initEditor);
来源：https://stackoverflow.com/questions/51867300/add-or-replace-a-variation-fields-into-a-wysiwyg-editor-field-in-woocommerce