• Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Register
  • Login
Bagisto Forum

Bagisto

  • Register
  • Login
  • Search
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups

How to make the product name shows more characters?

Knowledge Base
2
3
1.9k
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • K
    Kamdjou last edited by Kamdjou 14 Feb 2022, 15:23 14 Feb 2022, 15:16

    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.

    1 Reply Last reply Reply Quote 0
    • devansh-webkul
      devansh-webkul last edited by 15 Feb 2022, 04:13

      This is handled through CSS in which ellipsis is used.

      1 Reply Last reply Reply Quote 0
      • K
        Kamdjou last edited by 16 Feb 2022, 14:55

        @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....

        1 Reply Last reply Reply Quote 0
        2 out of 3
        • First post
          2/3
          Last post