php 将变量描述移动到Woocommerce产品变量描述

js81xvg6 于 2023-08-02 发布在 PHP

关注(0)|答案(1)|浏览(101)

我正在尝试：在产品选项卡说明区域的单个产品页面上显示可变产品的子产品的变化说明。
在WooCommerce和可变产品中，父产品的描述存储在wp_posts->post_content中，每个子产品都有一个额外的_variation_description字段。在前端，父代的描述始终可见，并且在选择变体时显示子代的_variation_description。它用js更新，并显示在添加到购物车按钮之前，以及变体的价格。
在description.php中调用该描述，代码如下

the_content();

字符串
其输出父产品post_contentDB字段。在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调用的，所以如果我放一个div，class=“product_meta”，我就可以调用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中的数据有何不同。
也许有一个完全简单和容易的解决方案，我想要的，也许我的方法太复杂了。我会非常高兴的任何想法或提示或只是指出正确的方向。

php

来源：https://stackoverflow.com/questions/51330304/move-the-variation-description-to-the-woocommerce-product-variable-description

1条答案

按热度按时间

aiazj4mn1#

这可以通过一些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>

型
1.在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>

型
1.现在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文件中。
测试和作品。
其他相关线程：

将可变价格范围替换为WooCommerce 3中选择的可变价格
在WooCommerce可变产品单页中获取所选产品变体ID
可变产品选择器：获取实时选定值

赞(0）回复(0）举报 2023-08-02

我来回答

php 将变量描述移动到Woocommerce产品变量描述

1条答案

相关问题

热门标签

最新问答