将变体描述移至 Woocommerce 产品变量描述

Question

我正在尝试：在产品选项卡描述区域的单个产品页面上显示可变产品子项的变体描述。

在 WooCommerce 和可变产品中，父级具有存储在 wp_posts->post_content 中的描述，每个子级都有一个附加的 _variation_description 字段。在前端，父项的描述始终可见，并且子项的_variation_description 显示为选择了一个变体。它使用 js 进行更新，并显示在添加到购物车按钮之前以及变体的价格。

描述在description.php中调用代码

the_content();

输出父产品 post_content db 字段。 变体描述在variation.php中调用，代码

<script type="text/template" id="tmpl-variation-template">
    <div class="woocommerce-variation-description">{{{ data.variation.variation_description }}}</div>
</script>

据我了解，这适用于 wp.template，我还检查了Javascript Reference wp.template 上的信息 js 在 add-to-cart-variation.js 中，模板是用

构建的

template     = wp.template( 'variation-template' );

然后可以更新我不太了解的数据。我的理解是所有的js调用都是表单，

form.$singleVariation.html( $template_html );

然后我意识到为什么我不能只从variation.php 复制代码并将其粘贴到description.php，因为它会在表单标签之外。

另一方面，SKU 的数据不是从表单中调用的，而是通过 .product_meta 调用的，所以如果我放置一个 class="product_meta" 的 div，我可以调用 sku 并从任何地方用 js 更新它.例如我可以把这段代码放到description.php中

 <div class="product_meta">
       <?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>
          <?php if ( $sku = $product->get_sku() ) : ?>
             <span class="sku_wrapper"><?php esc_html_e( 'SKU:', 'woocommerce' ); ?> 
             <span class="sku" itemprop="sku"><?php echo $sku; ?></span></span>
          <?php endif; ?>
       <?php endif; ?>
 </div>

而且效果很好。

所以我在这里卡住了。我只想在 description.php 中动态显示变体描述，我想如果我了解 wp.template 在 add-to-cart-variation.js 中的工作原理，我就能弄清楚。但我不能。我不完全了解变体形式中的内容是如何更新的，以及 SKU 中的数据有什么区别。

对于我想要的东西，也许有一个完全简单易行的解决方案，也许我的方法太复杂了。我会很高兴任何想法或提示或只是指向正确的方向。

Answer 1

这可以通过一些 jQuery 代码来完成，我们将在其中将变体描述复制到可变产品描述选项卡中。但首先您需要对某些模板进行一些非常小的更改。

这里是相关的官方文档：Template structure & Overriding templates via a theme

模板更改和必要的代码：

1. 在single-product/tabs/description.php 模板文件中，您将替换以下行：

   <?php the_content(); ?>
   

   通过以下行（我们只是添加了一个带有选择器类的html <div> 标签）：

   <div class="product-post-content"><?php the_content(); ?></div>
   

2. 在single-product/add-to-cart/variation.php 模板文件中，您将替换以下行：

   <div class="woocommerce-variation-description">{{{ data.variation.variation_description }}}</div>
   

   通过以下行（我们只是隐藏变体描述）：

   <div class="woocommerce-variation-description" style="display:none;">{{{ data.variation.variation_description }}}</div>
   

3. 现在是 jQuery （已注释） 代码 （仅在可变产品的单个产品页面上）：

   add_action( 'wp_footer', 'move_variation_description' );
   function move_variation_description(){
       global $product;
       // Only on single product pages for variable products
       if ( ! ( is_product() && $product->is_type('variable') ) ) return;
       // jQuery code
       ?>
       <script type="text/javascript">
           jQuery(function($){
               a = '.woocommerce-variation-description', b = a+' p', c = 'input.variation_id',
               d = '#tab-description .product-post-content', de = $(d).html();
   
               // On load, adding a mandatory very small delay
               setTimeout(function(){
                   // variation ID selected by default
                   if( '' != $(c).val() && $(a).text() != '' )
                       $(d).html($(a).html());
               }, 300);
   
               // On live event (attribute select fields change)
               $('table.variations select').on( 'blur', function(){
                   // variation ID is selected
                   if( '' != $(c).val() && $(a).text() != '' ){
                       $(d).html($(a).html()); // We copy the variation description
                   }
                   // No variation ID selected
                   else {
                       $(d).html($(a).html()); // We set back the variable product description
                   }
                   console.log($('input.variation_id').val()); // TEST: Selected variation ID … To be removed
               });
           });
       </script>
       <?php
   }
   

   此代码位于您的活动子主题（或活动主题）的 function.php 文件中。

经过测试并且有效。

其他相关话题：

• Replace the Variable Price range by the chosen variation price in WooCommerce 3
• Get the selected product variation ID in WooCommerce variable products single pages
• Variable product selectors: Getting the live selected values