求助：WordPress WooCommerce可变商品变体描述支持图文的实现方案

一、插件方案 #

• WooCommerce Variation Description：这款插件直接将默认变体描述字段替换为WordPress原生富文本编辑器（TinyMCE），支持插入图片、文本排版，和你正在使用的「Extra Variation Images」兼容性良好，激活后无需额外设置，变体编辑界面即可看到富文本编辑框。
• Advanced Custom Fields (ACF)：通过ACF创建自定义变体字段，字段类型选择「WYSIWYG编辑器」，并将字段组的显示位置设置为「Product Variation」。完成后每个变体都会新增一个支持图文的自定义描述字段，再添加以下代码将内容显示在前端：

  add_action( 'woocommerce_after_variation_description', 'display_acf_variation_description', 10 );
  function display_acf_variation_description() {
      global $product;
      $variation_id = $product->get_id();
      echo get_field( '你的自定义字段名称', $variation_id );
  }
  

  替换代码中的你的自定义字段名称为你在ACF中设置的字段名即可。

二、代码自定义方案（无需插件） #

直接修改默认变体描述字段为富文本编辑器，步骤如下：

1. 在主题的functions.php文件或自定义插件中添加代码：

   add_action( 'woocommerce_product_after_variable_attributes', 'convert_variation_description_to_wysiwyg', 10, 3 );
   function convert_variation_description_to_wysiwyg( $loop, $variation_data, $variation ) {
       // 移除默认文本框
       remove_action( 'woocommerce_product_after_variable_attributes', 'woocommerce_variation_description', 10 );
       
       // 插入富文本编辑器
       wp_editor( 
           wp_kses_post( $variation->get_description() ), 
           'variable_description[' . $loop . ']',
           array(
               'textarea_name' => 'variable_description[' . $loop . ']',
               'editor_height' => 150,
               'media_buttons' => true, // 启用图片上传按钮
               'quicktags' => true,
           )
       );
   }
   

2. 保存代码后进入可变商品编辑页，原变体描述文本框会替换为支持图文的富文本编辑器。
3. 若主题未默认显示变体描述，添加以下代码前端显示内容：

   add_action( 'woocommerce_after_variation_description', 'show_variation_wysiwyg_description', 10 );
   function show_variation_wysiwyg_description() {
       global $product;
       if ( $product->is_type( 'variable' ) && isset( $_REQUEST['attribute_pa_'] ) ) {
           $variation_id = $product->get_matching_variation( $_REQUEST );
           $variation = wc_get_product( $variation_id );
           echo wp_kses_post( $variation->get_description() );
       }
   }
   

注意事项 #

• 操作前请备份主题文件与数据库，避免代码错误导致网站异常。
• 若使用自定义主题，可能需要调整前端样式，确保富文本内容排版正常。

内容的提问来源于stack exchange，提问作者nas san