1

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?

Stephen
  • 8,038
  • 6
  • 41
  • 59

1 Answers1

0

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.

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

Hope that helps! Cheers

bkseen
  • 389
  • 1
  • 3
  • 19
  • Thanks for the response, I appreciate it. I am hoping that there is a hook I can use instead, but if no one else responds or I can't find one elsewhere, I will give this a go. – Stephen Jun 15 '17 at 23:39
  • There is probably a hook for it but since the 3.x it, unfortunately, became pretty hard to find some good answer online regarding WooCommerce. The time will do the things ;) – bkseen Jun 15 '17 at 23:44