WooCommerce move variation description

Question

I am trying to move the location of the variation description to be below the add to cart button on a WooCommerce site. I notice that (unlike all the other parts of the variation product) it is using a js template:

<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>

However, when I try to move that code around in the templates, it just stays at exactly the same place, even if I have placed it after the add to cart button.

And I have also tried the hook code from here and here, but these too fail (I suspect something has changed in WooCommerce 3 and above, which I am using). Anyone know how to move the variation description?

bkseen bkseen · Accepted Answer · 2017-06-15T07:03:06

Probably not the best solution around but to achieve it you could use a bit of jQuery in your function.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;
    }

Replace "product-short" by the container of your description.

Wrapping around the product description.
Creating a new class after the desired div
Move the wrapped div (#variation-excerpt) under the new created one (.product-after-main).

Hope that helps! Cheers

WooCommerce move variation description

1 Answers