How to Set Short Description Limit in WooCommerce Product Page

When designing WooCommerce product pages, one common challenge is controlling the length of short descriptions. Long product descriptions can disrupt your page layout and negatively impact user experience. In this guide, I'll show you how to easily set character or word limits for short descriptions on WooCommerce product pages.

Why You Need Short Description Limits

The product short description appears below the product image or near the add-to-cart button. Controlling its length helps:

• Maintain user attention - Lengthy text reduces reader engagement
• Keep design consistent - Uniform heights across all product pages
• Improve mobile responsiveness - Compact content works better on small screens
• Highlight key features - Focus on important information in limited space

Methods to Set Short Description Limits

Method 1: Using Functions.php (Word Limit)

Add this code to your theme's functions.php file:

function custom_short_description_limit($content) {
    if (is_product()) {
        $word_limit = 50; // Set your desired word limit
        $content = wp_trim_words($content, $word_limit, '...');
    }
    return $content;
}
add_filter('woocommerce_short_description', 'custom_short_description_limit');

This code automatically limits the short description to 50 words and adds "..." at the end.

Method 2: Setting Character Limit

If you prefer character limits over word limits:

function custom_short_description_char_limit($content) {
    if (is_product()) {
        $char_limit = 200; // Set your desired character limit
        if (strlen($content) > $char_limit) {
            $content = substr($content, 0, $char_limit) . '...';
        }
    }
    return $content;
}
add_filter('woocommerce_short_description', 'custom_short_description_char_limit');

Method 3: Using Plugins

For those not comfortable with coding, you can use plugins:

1. WooCommerce Customizer - Offers built-in options to customize descriptions
2. Advanced Custom Fields (ACF) - Create custom fields for manual control
3. Elementor or Divi Builder - Visual page builders for easy customization

Advanced Customization

Adding a Read More Button

Allow users to view the full description with a "Read More" button:

function custom_short_description_with_readmore($content) {
    if (is_product()) {
        $word_limit = 50;
        $full_content = $content;
        $trimmed_content = wp_trim_words($content, $word_limit, '');
        
        if (str_word_count($full_content) > $word_limit) {
            $content = $trimmed_content;
            $content .= ' <a href="#tab-description" class="read-more-link">Read More</a>';
        }
    }
    return $content;
}
add_filter('woocommerce_short_description', 'custom_short_description_with_readmore');

Styling with CSS

Add custom CSS for the read more link or truncated text:

.woocommerce-product-details__short-description {
    line-height: 1.6;
    margin-bottom: 20px;
}

.read-more-link {
    color: #0073aa;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.read-more-link:hover {
    text-decoration: underline;
    color: #005177;
}

Best Practices for Short Descriptions

1. Optimal Length: 30-50 words is ideal for mobile devices
2. Key Information First: Mention the most important features upfront
3. Preserve HTML Tags: wp_trim_words() automatically handles HTML tags safely
4. Test Thoroughly: Check the limit across different products
5. Responsive Design: Verify appearance on both mobile and desktop

Using Child Themes

Simply adding code to functions.php means it will be lost when you update your theme. Here's the proper way:

1. Create a child theme
2. Add the code to your child theme's functions.php
3. Activate the child theme

Creating a Child Theme

Create a new folder in /wp-content/themes/ named yourtheme-child and add these files:

style.css:

/*
Theme Name: Your Theme Child
Template: yourtheme
*/

functions.php:

<?php
// Add your custom code here

function custom_short_description_limit($content) {
    if (is_product()) {
        $word_limit = 50;
        $content = wp_trim_words($content, $word_limit, '...');
    }
    return $content;
}
add_filter('woocommerce_short_description', 'custom_short_description_limit');

Troubleshooting Common Issues

Problem: Code Not Working

Solution: Clear your cache and verify the code is in the correct file. Check for PHP syntax errors in your error log.

Problem: HTML Tags Breaking

Solution: Use wp_trim_words() function instead of substr() as it safely handles HTML.

Problem: Description Completely Removed

Solution: Verify the filter name is correct: woocommerce_short_description

Problem: Different Limits for Different Products

Solution: Use product categories or tags to apply different limits:

function custom_short_description_by_category($content) {
    if (is_product()) {
        global $product;
        
        if (has_term('electronics', 'product_cat', $product->get_id())) {
            $word_limit = 30; // Shorter for electronics
        } else {
            $word_limit = 50; // Standard for others
        }
        
        $content = wp_trim_words($content, $word_limit, '...');
    }
    return $content;
}
add_filter('woocommerce_short_description', 'custom_short_description_by_category');

Alternative: JavaScript Solution

If you can't modify PHP files, use JavaScript:

jQuery(document).ready(function($) {
    var maxLength = 200; // Character limit
    var description = $('.woocommerce-product-details__short-description');
    var text = description.text();
    
    if (text.length > maxLength) {
        var truncated = text.substr(0, maxLength) + '...';
        description.html(truncated + ' <a href="#tab-description" class="read-more">Read More</a>');
    }
});

Add this to your theme's JavaScript file or use a plugin like "Simple Custom CSS and JS".

Performance Considerations

When implementing description limits:

• Cache Compatibility: Ensure your solution works with caching plugins
• Database Queries: Avoid adding extra queries in the filter
• Mobile Optimization: Test loading speed on mobile devices
• SEO Impact: Full descriptions should still be accessible for search engines

Conclusion

Setting a short description limit in WooCommerce product pages is straightforward. You can choose between word limits or character limits depending on your needs. If you're not comfortable with coding, plugins are available, but using custom code in a child theme's functions.php is the best long-term solution.

This approach gives you complete control over your product page layout, improves user experience, and maintains design consistency across your store.