I want to add "Read More" button in the product description. I use this code:

<div class="value more" <?php /* @escapeNotVerified */
echo $_attributeAddAttribute; ?> >
    <?php if ($_product->getData('description'))
    $string = strip_tags($_product->getData('description'));

    if (strlen($string) > 1200)
        // truncate string
        $stringCut = substr($string, 0, 1200);
        $string = substr($stringCut, 0, strrpos($stringCut, ' ')) . '... <a href="javascript:void(0);" class="collapsed"><i class="fas fa-chevron-down"></i>' . __('Read More') . '</a>';
    echo $string;
{ ?>
        <?php /* @escapeNotVerified */
    echo $_attributeValue;

    <div class="less" style="display:none">
        <?php echo $_attributeValue; ?>
        <a href="javascript:void(0);" class="uncollapsed"><i class="fas fa-chevron-up"></i> <?=__('Read Less') ?></a>
    <script type="text/javascript">

But this code is limit my Description to 1200 characters, how I can made this code to have lines instead characters. I mean I want to add the Read More button after 10 text lines.

Thank you

  • yes its because this line $stringCut = substr($string, 0, 1200) – Pramod Feb 22 at 12:01

I have done this using javascript in one of my projects. I have posted my code here.

<div class="article-container">
    <div class="content">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

<script type="text/javascript">
    require(['jquery'], function($){
        $(document).ready(function() {

            $(document).on('click', '.morelink', function(e) {
                $(this).parent().append('<a class="lesslink">Show less</a>');

            $(document).on('click', '.lesslink', function(e) {
                $(this).parent().append('<a class="morelink">Show more</a>');

            $('.article-container .content').each(function() {

                var height = $( this ).height();

                if(height > 52){
                    $(this).parent().append('<a class="morelink">Show more</a>')



Let me know if you facing any issue in this. Thanks.

  • thank you for your answer but how we can display only 10 lines of text? – Robert Feb 22 at 14:08
  • You can give a height to up to 10 lines. As I give 3em for 2 lines. – ZealousWeb Feb 22 at 14:09
  • I don't think this is the right solution,I found something here: stackoverflow.com/questions/3922739/…, can you implement this on your code? – Robert Feb 22 at 14:26
  • For me above solution is working fine for now. If I struck then definitely use your solution. – ZealousWeb Feb 22 at 14:43
  • If you find any other solution then let me know. – ZealousWeb Feb 22 at 14:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.