将变体描述移至Woocommerce产品变量描述 [英] Move the variation description to the Woocommerce product variable description

问题描述

我在尝试：在产品标签描述区域的单个产品页面上显示变量产品子项的变体描述。

What I am trying: Show the Variation Description of the Child of a Variable Product on single product page in the product tab description area.

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

In WooCommerce and variable products the parent has the description which is stored in wp_posts->post_content and every child has an additional _variation_description field. On the frontent the description of the parent is always visible and the _variation_description of the Child is showing as a variation is selected. It gets updated with js and is displayed before the add to cart button together with the price of the variation.

描述在description.php中调用，代码为

The description is called in description.php with the code

the_content();

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

which outputs the parent products post_content db field. The variation description is called in variation.php with the code

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

据我所知，这适用于wp.template，我也检查了 Javascript参考wp.template
js位于add-to-cart-variation.js和该模板使用

As I understand this works with wp.template and I also checked the info on Javascript Reference wp.template The js is in add-to-cart-variation.js and the template is built with

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

然后数据可以更新，我不太详细了解。我的理解是所有的js调用都是以这种形式，

Then the data can be updated which I do not really understand in detail. What I understand is that all the js calls are in the form,

form.$singleVariation.html( $template_html );

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

so then I realized why I couldn't just copy the code from variation.php and paste it to description.php because there it would be outside the form tag.

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

On the other hand the data for SKU is not called from within the form, it is called through .product_meta so if I put a div with class="product_meta" I can call the sku and have it updated with js from anywhere. For example I can put this code into 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中的数据有何不同。

So here I am stuck. I just want to have the variation description displayed dynamically in the description.php and I thought if I understand how the wp.template works in add-to-cart-variation.js I could figure it out. But I can't. I do not exactly understand how the content is being updated in the variation form and what the difference is to the data in SKU.

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

Maybe there is a totally simple and easy solution for what I want, and maybe my approach is too complicated. I would be very glad for any Ideas or hints or just pointing in the right direction.

推荐答案

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

This can be done with some jQuery code, where we will copy the variation description to the variable product description tab. But first you need to make some very small changes on some templates.

以下是与以下相关的官方文档：模板结构&通过主题覆盖模板

Here is the official docs related to: Template structure & Overriding templates via a theme

模板更改和必要的代码：

The templates changes and the necessary code:

1. 在单件产品/ tabs / description.php 模板文件中，您将替换该行：

1. On single-product/tabs/description.php template file, you will replace the line:

<?php the_content(); ?>

由以下行（我们只是添加一个周围的html < ; div> 带选择器类的标签）：

by the following line (We just add a surrounding html <div> tag with a selector class):

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

On single-product / add-to-cart / variation .php 模板文件，您将替换该行：

On single-product/add-to-cart/variation.php template file, you will replace the line:

<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文件中您的活动子主题（或活动主题）。

This code goes on function.php file of your active child theme (or active theme).

经过测试并且有效。

其他相关主题：

• 用WooCommerce 3中选择的变化价格替换可变价格范围


• 在WooCommerce变量产品单页中获取所选产品变体ID


• 可变产品选择器：获取实时选定值

• 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

这篇关于将变体描述移至Woocommerce产品变量描述的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！