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
    1625
    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

      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

        This is handled through CSS in which ellipsis is used.

        1 Reply Last reply Reply Quote 0
        • K
          Kamdjou last edited by

          @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
          • First post
            Last post