How to Move Description Under Image in WooCommerce

WooCommerce Move Description under Image

Do you want to move the description to under the image (product thumbnail) on the WooCommerce product page?

In WooCommerce to move a description under the image requires you to create an action hook that targets the product thumbnail and then use the remove_action() to remove the original description and move it to the new location.

Today, I am going to share with you a quick snippet that you can add to your WooCommerce theme to help you move the description under the image.

I will also explain how everything works to help you learn why this code snippet added to functions.php moves the product description to under the product thumbnail or the image.

WooCommerce Move Description under Image In 5 Steps

WooCommerce Move Description under Image

The objective of this tutorial is to help you move the description under the image as shown in the image above. To accomplish this move, you need to take the following steps:

  1. Log in to your WooCommerce site dashboard and open the functions.php file
  2. Create a  hook that will add the description to the product thumbnail, for example, add_action( 'woocommerce_product_thumbnails', 'move_description_to_under_image');
  3. Create the callback function and return the excerpt() in the callback function and this will print the description under the image.
  4. Create a remove_action to remove the previous description from the original position since you have already added the same description under the image.
  5. Add this snippet and save the changes and the description should appear below the image

Let us illustrate these steps to move the description under the image and you can implement the same code on your WooCommerce theme to achieve the same results.

Action Hook to Add Description under Image in WooCommerce

When creating the snippet to move the description to the position under the image on the product page, the first step is to add the action hook that will copy the product description to the new position. The following is the filter hook you should add.

The callback function can have another other name but the WooCommerce hook should be at 'woocommerce_product_thumbnails'

add_action( 'woocommerce_product_thumbnails', 'move_description_to_under_image', 40 );

Callback function to Move Description Under the Image

The callback function should just return the excerpt since that is what we want to display.

The reason we are returning the expert is that the WooCommerce product is a custom post type and the product description is equivalent to the post excerpt, the same way the reviews are equivalent to the comments in an ordinary post. So the callback function code will be as follows:

function move_description_to_under_image(){

    the_excerpt();

}

The combined code snippet is as follows:

add_action( 'woocommerce_product_thumbnails', 'move_description_to_under_image', 40 );

function move_description_to_under_image(){

     the_excerpt();

}

This code adds the description to the position we want but we have the original description still in place as you can see in the image below:

WooCommerce Move Description under Image

Remove the Original Product Description with Remove_action

Now we need to remove the description that is added by default in WooCommerce using the remove_action WordPress function.

This removes action will hook on woocommerce_single_product_summary and the code is as follows :

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

The full code to remove the product summary and move the description under the image is as follows:

/**
 * Remove Original Product Description
 */ 
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

/**
 * Add the new product description under the image 
 */ 

add_action( 'woocommerce_product_thumbnails', 'move_description_to_under_image', 40 );
function move_description_to_under_image(){
    return the_excerpt();
}

Add this code to the functions.php file of your child theme and save the changes and check to see if you have successfully moved the product description to under the image as shown below :

WooCommerce Move Description under Image

Conclusion

When you want to move the description to under the image in WooCommerce, you need to add a hook on the WooCommerce product thumbnails.

The hook should display the product’s custom post-type excerpt. You should also use remove_action to remove the original product summary.

Similar Articles

Comments are closed.