CODEWITHSUNDEEP
phpwordpresswoocommerce
Hamza Ahmad
Hamza Ahmad

Reputation: 545

Move Variation Description to below the title on Single Product Page in WooCommerce

I am trying to move the variation description from the product-summary to below the title and above the price.

I have tried this code:

add_action('plugins_loaded', 'move_variation_description', 50);

function move_variation_description(){ 
  // Remove the hook from the original location
  remove_action( 'woocommerce_single_product_summary', array( 
WC_Variation_Description::get_instance()->frontend, 
'add_variation_description' ), 25 );
  // Re-add the hook to where you want it to be
  add_action( 'woocommerce_before_single_product_summary',  array( 
WC_Variation_Description::get_instance()->frontend, 
'add_variation_description' ), 25 );
}

But without any success. Code from Here doesn't seem to work either.

Any help is greatly appreciated.

Thank you.

Upvotes: 0

Views: 3686

Answers (3)

coding-dude.com
coding-dude.com

Reputation: 808

It's a bit tricky to achieve this since the variation description seems to be bundled up with the "add to cart" button. I have achieved this using the following method (explanations at the end):

  1. You need to remove the product short description as this always goes above the variation description. Just add:

    add_action( 'woocommerce_single_product_summary', 'single_product_summary_action', 1 );
    function single_product_summary_action() { // remove the single_excerpt //(we will manually add it back in the add-to-cart/variation-add-to-cart-button) remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 ); }

  2. You need to override the WooCommerce template for variation "add to cart" button. You do this by making a copy of the WooCommerce file templates/single-product/add-to-cart/variation-add-to-cart-button.php in your theme. In that new file search for the line

    do_action('woocommerce_after_add_to_cart_quantity');

And add this right after it:

woocommerce_template_single_excerpt();

This will add the product short description back in.

In this way the variation description will be moved up.

Please note that: - this solution moves the short description, not the variation description. But the end result is that the variation description will be moved up also. - take a look at the WooCommerce file templates/content-single-product.php. This specifies the order in which WC loads the various parts of the templates via the woocommerce_single_product_summary action. That's where I got the 20 for the remove action.

Upvotes: 1

Hamza Ahmad
Hamza Ahmad

Reputation: 545

Achieved it using the code below in functions.php

//Move Variation Description
add_action( 'wp_footer', 'ec_child_modify_wc_variation_desc_position' );
function ec_child_modify_wc_variation_desc_position() {
    ?>
    <script>
    (function($) {
        $(document).on( 'found_variation', function() {
            var desc = $( '.woocommerce-variation.single_variation' ).find( 
'.woocommerce-variation-description' ).html();
            var $entry_summary = $( '.product_title' ), $wc_var_desc = 
$entry_summary.find( '.woocommerce-variation-description' );

            if ( $wc_var_desc.length == 0 ) {
                $entry_summary.append( '<div class="woocommerce-variation-
description"></div>' );
            }
            $entry_summary.find( '.woocommerce-variation-description' 
).html( desc );
        });
    })( jQuery );

    </script>
    <style>form.variations_form .woocommerce-variation-description { 
display: none; }</style>
    <?php
}

Upvotes: 1

TBI
TBI

Reputation: 2809

You can override woocommerce template. Create a folder named woocommerce in your theme and further corresponding folders where relevant file is added in woocommmerce plugin. e.g woocommerce/single-product/layouts/ where product.php is added. In that overridden file you can move the variation description from the product-summary to below the title and above the price by changing the HTML.

Upvotes: 1

Related Questions