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> 

然而，当我试图走动的代码模板中，它只是停留在完全相同的地方即使我已将它放在添加到购物车按钮后。

而且我也尝试了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; 
    } 

替换“产品短”通过你的描述的容器。

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

希望有所帮助！欢呼声