我正在尝试:在产品选项卡描述区域的单个产品页面上显示可变产品子项的变体描述。
在 WooCommerce 和可变产品中，父级具有存储在 wp_posts->post_content 中的描述，每个子级都有一个附加的 _variation_description 字段。在前端，父项的描述始终可见，并且当选择变体时，子项的_variation_description 将显示。它使用 js 进行更新，并显示在“添加到购物车”按钮之前以及变体的价格。
描述在description.php中用代码调用
the_content();
输出父产品 post_content 数据库字段。 变体描述在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 中的数据有什么区别。
也许有一个完全简单易行的解决方案来满足我想要的，也许我的方法太复杂了。我将非常高兴任何想法或提示或只是指出正确的方向。
最佳答案
这可以通过一些 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 文件中。
经过测试并有效。
其他相关主题:
关于php - 将变体描述移至 Woocommerce 产品变量描述，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51330304/