How To Put Product Description First In Woocommerce

How to Put Product Description First in WooCommerce: A Simple Guide

Introduction:

WooCommerce, the leading e-commerce platform for WordPress, offers a flexible and robust system for selling products online. By default, WooCommerce places the short description (excerpt) above the product title and price on the product page, and the full product description below, typically after the product image and additional tabs. However, in certain scenarios, you might want to prioritize the full product description and display it *before* the product image, short description, and other elements. This can be particularly effective for complex products, those with compelling narratives, or when you want to immediately immerse potential customers in the details. This guide will walk you through the simple steps to achieve this in WooCommerce.

Why Prioritize the Product Description?

Placing the full product description first can significantly impact your sales conversion rate. Here’s why:

• Immediate Information: Potential customers see the most comprehensive details right away, allowing them to quickly understand the product’s benefits and features.
• Improved Storytelling: You can craft a compelling narrative around your product right from the start, drawing the customer in and increasing their engagement.
• SEO Benefits: While the product description being first doesn’t directly affect SEO, it can indirectly help. A well-written, detailed description can improve user engagement (dwell time), which is a positive signal for search engines.
• Complex Products: For intricate or technical products, a thorough description helps address customer questions and concerns immediately.

Moving the Product Description: The Solution

There are a few ways to move the product description above the image and other elements in WooCommerce:

1. Using Code Snippets (Recommended):

This is the most flexible and recommended method as it allows you to customize the placement precisely. We’ll use WordPress’s `remove_action` and `add_action` hooks to re-arrange the display of the product description.

Steps:

1. Access your theme’s `functions.php` file: You can find this file in your WordPress dashboard under Appearance > Theme Editor (ensure you are using a child theme). Important: Always use a child theme to avoid losing changes when the parent theme is updated. Alternatively, use a plugin like “Code Snippets” to add the code without directly editing your theme files.

2. Add the following code snippet:

<?php

/

* Move the product description above the image and short description.

*/

remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20 );

remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 10 );

add_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 5 );

add_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_template_single_excerpt’, 10 );

?>

Explanation:

• `remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20)`: This line removes the short description (excerpt) from its default position in the `woocommerce_single_product_summary` hook. The number `20` is the priority of the function being removed.
• `remove_action(‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 10)`: This removes the default product tabs (which contain the full description) from its original location.
• `add_action(‘woocommerce_before_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 5)`: This adds the product tabs (containing the full description) to the `woocommerce_before_single_product_summary` hook, effectively placing it *before* the product image. The number `5` is the priority; lower numbers run earlier.
• `add_action(‘woocommerce_before_single_product_summary’, ‘woocommerce_template_single_excerpt’, 10)`: This adds the short description above the image *after* the product tabs.

3. Save the `functions.php` file (or activate the Code Snippet).

4. Check your product page: The full product description should now appear above the image and short description.

2. Using a WooCommerce Plugin:

Several WooCommerce plugins allow you to customize the product page layout without coding. Search for plugins like “WooCommerce Product Page Customizer” or similar. While this is easier, it might not offer the same level of customization as the code snippet method, and can sometimes introduce plugin conflicts.

Steps:

1. Install and activate the plugin: Search for a suitable plugin in the WordPress plugin repository (Plugins > Add New).

2. Configure the plugin settings: Look for options to re-arrange elements on the product page. Specifically, search for settings related to moving the product description.

3. Save your changes: The plugin should automatically adjust the product page layout.

Note: Plugin interfaces and features can vary, so consult the plugin’s documentation for specific instructions.

Customization

You can easily customize the action priorities to order it however you like. For example, to place the product short description after the image, simply add the following to the `functions.php` file.

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

This code will place the short description before the title, as it has a priority of 7, while the default is 20.

Considerations and Potential Issues:

• Theme Compatibility: Some themes have highly customized WooCommerce templates. These customizations might override the code snippets or plugin settings. If you encounter issues, consult your theme’s documentation or contact the theme developer.
• Child Theme Required: Always use a child theme when modifying theme files like `functions.php`. This ensures your changes are not lost during theme updates.
• Plugin Conflicts: Installing too many plugins can sometimes lead to conflicts. If you experience unexpected behavior after installing a product page customization plugin, try deactivating other plugins to identify the source of the conflict.
• Mobile Responsiveness: After making changes, ensure that your product pages remain responsive on different devices (desktops, tablets, and smartphones).
• SEO Implications: While prioritizing the product description can improve user engagement, it’s essential to maintain a balance between user experience and SEO best practices. Ensure that your product descriptions are well-written, informative, and optimized for relevant keywords. Also, you might want to include the product name and other important SEO elements higher up on the page.