Recent Topics

How to make the product name shows more characters?



  • Hi @devansh-webkul,
    Please I will like to customize the way product names are appearing in product list.
    as you can see below:
    666822a1-c4b8-4da3-b111-3e208832fbf9-image.png

    I want to make the names as highlighted here in yellows show more characters than now.

    Thanks for the advice.



  • This is handled through CSS in which ellipsis is used.



  • @devansh-webkul
    Thanks for pointing out.

    I have to overwrite the css form the velocity theme velocity.scss from this:

    .product-card-new .card-body .product-name, .product-card-new .card-body .product-rating {
        width: 15rem; 
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    

    To this:

    .product-card-new .card-body .product-name, .product-card-new .card-body .product-rating {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    

    and the result was fantastic as needed ☺
    b7147969-368f-4519-ac01-13e6ef79139a-image.png

    Thanks once more my friend....


Log in to reply