How to add “Read More” link to Product description in Woocommerce WordPress

If you googled the question already, you might find many answers, suggesting using get_excerpt() function.  But that is not exactly what you need. What you need is to see only a part of product description (in case it is too long) and be able to limit the text by yourself, using just a standard WordPress tag. Unfortunately, this tag only works with default WordPress posts, while we want to use it in Woocommerce Product description as well.

So, here is a workaround. You will need to edit your woocommerce/content-single-product.php file and do some basic jQuery and CSS.

When working with get_the_content() function you may split the text in 2 parts: before tag and after. So, open yourwoocommerce/content-single-product.php file and import global variable $more, then set it to false to get the part before the tag:

<div class="collapsed-content">
    <?php
        global $more;
        $temp = $more;
        $more = false;
        $short_description = get_the_content( '' );
        echo $short_description;
        $more = $temp;
    ?></div>

The full description text can be displayed by calling the_content() function. Create a new <div> below your short description and echo your full description there:

<div class="full-content">
    <?php
        $full_description = the_content();
    ?>
</div>

The next thing you want to do is to change CSS of this <div>, so it wouldn’t be displayed before we need it:

.full-content {
    display: none;
}

Next, set your jQuery function to toggle these <div>s, upon clicking on “Read more..” link.

jQuery(function($) {
    $(document).ready(function() {
        $("#readMore, #readLess").click(function(){
            $(".collapsed-content").toggle('slow', 'swing');
            $(".full-content").toggle('slow', 'swing');
            $("#readMore").toggle();// "read more link id"
            return false;
        });
    });
});

So, by default only a short description before the < – – MORE – – > tag is shown. When user clicks on the link it just replaces it with the full description. Add some animations if you want. Perfect.