Question

我正在尝试将变体描述的位置移到WooCommerce网站上的添加到购物车按钮下方。我注意到（与变体产品的所有其他部分不同）它使用的是js模板：

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

    <div class="woocommerce-variation-price">
        {{{ data.variation.price_html }}}
    </div>

    <div class="woocommerce-variation-availability">
        {{{ data.variation.availability_html }}}
    </div>
</script>
<script type="text/template" id="tmpl-unavailable-variation-template">
    <p><?php _e( 'Sorry, this product is unavailable. Please choose a different combination.', 'woocommerce' ); ?></p>
</script>

然而，当我尝试在模板中移动代码时，它只是停留在完全相同的位置，即使我已经将它放在添加到购物车按钮之后。

我还尝试过来自here和here的钩子代码，但是这些也失败了（我怀疑在我使用的WooCommerce 3及以上版本中发生了一些变化）。有人知道如何移动变体描述吗？

Answer 1

可能不是最好的解决方案，但为了实现它你可以在 function.php 中使用一些jQuery：

   /*Move the description div to another one
    ===================================== */
    add_action( 'wp_footer', 'move_composite_product_tab' );
    function move_composite_product_tab() {
      if (is_product()) :
       ?>
        <script>
            jQuery(document).ready(function($) {
                $(window).load(function() {
                    $( ".product-short" ).wrap( "<div id='variation-excerpt'></div>" );
                    $( ".variations_form" ).after( "<div class='product-after-main'></div>" );
                    document.getElementsByClassName("product-after-main")[0].appendChild(
                    document.getElementById("variation-excerpt")
                    );
                });
            });
       </script>
    <?php
    endif;
    }

替换＆＃34;产品简称＆＃34;通过你的描述的容器。

包装产品说明。
在所需的div之后创建一个新类
在新创建的（.product-after-main）下移动包装的div（＃variation-excerpt）。

希望有所帮助！干杯

WooCommerce移动变体描述

1 个答案: