Question

我要尝试的是：在“产品”标签说明区域的单个产品页面上显示可变产品子级的变体说明。

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

在description.php中使用代码调用该描述

the_content();

输出父产品的post_content db字段。变体描述在variant.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 );

所以我意识到了为什么我不能仅仅从variant.php复制代码并将其粘贴到description.php的原因，因为它位于form标记之外。

另一方面，SKU的数据不是从表单中调用的，而是通过.product_meta调用的，因此，如果我将class设置为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

相关的官方文档

模板会更改，并提供必要的代码：

在single-product/tabs/description.php模板文件上，您将替换以下行：
```
<?php the_content(); ?>
```
通过以下行（我们只需添加带有选择器类的html <div>标记）
：
```
<div class="product-post-content"><?php the_content(); ?></div>
```

在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>

现在添加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文件上。

经过测试可以正常工作。

其他相关线程：

Answer 2

嗨，我试过这个解决方案，但我得到：

    Uncaught TypeError: e.indexOf is not a function
    at S.fn.init.S.fn.load (jquery-3.5.1.min.js?ver=3.5.1:2)
    at script.js?ver=1.0:1

将版本描述移至Woocommerce产品变量描述

2 个答案: