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.

Advertisements

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

    1. Hey Jim! Thanks for the interest in our blog!

      It goes in any custom JS file you have in you project or within a plain block. Just gotta be in your source code below the

      tags that your are trying to modify, so somewhere before the closing tag is a good place.

      Liked by 1 person

      1. Thanks for getting back to me. I’m using Woocommerce with the Storefront theme. Searching through the files I didn’t see a custom JS file anywhere but I’m somewhat lost when it comes to JS. I tried putting it into content-single-product.php but that didn’t do anything. Do I need to create a custom js file to upload to the site?

        Liked by 1 person

      2. I added the plugin above and added the JS there but it’s still not working. I know the plugin worked because I accidentally left the comment that shows default w/the plugin and it showed at the top of the page.

        I added the css above using the same plugin. Could that be the problem?

        I’m surprised WooCommerce doesn’t have a simple fix for this. I’ve searched everywhere though and you are the only solution I’ve found.

        Like

  1. Thanks again. I missed your earlier update.

    I changed the javascript to the footer but that didn’t seem to do it either. I’ve got something wrong somewhere.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s