WooCommerce移动变体描述

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>

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

我也从这里和这里尝试了钩子代码，但这些也失败了(我怀疑我正在使用的 WooCommerce 3 及更高版本发生了一些变化(。有人知道如何移动变体描述吗？

Answer 1

可能

不是最好的解决方案，但要实现它，你可以在你的函数中使用一些jQuery.php：

   /*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;
    }

将"产品短"替换为描述的容器。

1. 环绕产品描述。
2. 在所需的div 之后创建一个新类
3. 将包装的div(#variation 摘录(移动到新创建的div (.product-after-main( 下。

希望对您有所帮助！干杯