[Tip hay Flatsome]Hướng dẫn cố định dòng tiêu đề sản phẩm khi hiển thị danh sách sản phẩm

[Tip hay Flatsome]Hướng dẫn cố định dòng tiêu đề sản phẩm khi hiển thị danh sách sản phẩm

Cái này thì chắc nhiều bác bị rồi, em trước đây làm cho khách cũng bị càm ràm, cũng hơi bị cáu. Hôm nay em chia sẻ cái mà nhiều bác chắc chắn cũng sẽ bị như em.

Cái này thì không phải dùng riêng cho Flatsome mà nó còn dùng được cho tất cả các website dùng Woocommerce. Vì thuộc tính ông thánh này là của plugin bán hàng Woo mà. Nên các thẻ CSS của nó là như nhau..

Cố định dòng tên tiêu đề sản phẩm WordPress Flatsome
Cố định dòng tên tiêu đề sản phẩm WordPress Flatsome

Không dài dòng nữa. Các bác copy đoạn này vào phần CSS toàn trang và làm theo hướng dẫn dưới đây nếu bác nào chưa biết.

/*Co dinh khoang cach ten sp*/
p.name.product-title a {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
height: 40px; /*tùy theo bạn muốn hiển thị bao nhiêu hàng, như ở đây là 2 hàng tiêu đề như hình*/
}

Còn nếu biết rồi thì không cần đọc đoạn này.

Mục này chỉ hướng dẫn các bác chân ngang hoặc newbie thôi. Túm cái váy lại là chỉ cần hiểu xíu về CSS hoặc hiểu các thuộc tính của nó là quất chết hết mà.

Các bác copy đoạn code trên vào. Làm theo thứ tự:

  • Đăng nhập vào bảng tin. Nhìn menu trong trang admin bên trái. Click vào Giao diện/Tùy biến (Theme/Customize)
  • Đợi nó chuyển trang, sau đó kéo xuống phía dưới cùng. Nhìn thanh menu bên cột trái có chứ CSS. Nhấp vào đó.
  • Dán đoạn này vào.
  • Trường hợp anh em nào đã có đoạn code css từ trước thì cuối đoạn code đã dán từ trước. Anh em nhớ xuống dòng 2 phát rồi dán đoạn code trên vào

Chúc anh em thành công, có vấn đề gì cứ ởi em, comment dưới là được.

5/5 - (2 bình chọn)
[related_posts_by_tax posts_per_page="6" title="Bài liên quan" taxonomies="category,post_tag"]

12 bình luận về “[Tip hay Flatsome]Hướng dẫn cố định dòng tiêu đề sản phẩm khi hiển thị danh sách sản phẩm

  1. Avatar of huân
    huân cho biết:

    Chào bạn, mình hiện tại có làm theo cách của bạn nhưng không hiển thị rút gọn tên của sản phẩm được. Bạn có thể cho mình thêm hướng giải quyết được không

  2. Avatar of Tuấn
    Tuấn cho biết:

    cảm ơn bạn nhiều ạ, mình đã áp dụng được cho tiêu đề sản phẩm, còn tiêu đề bài viết thì bạn có thể hướng dẫn được không ạ.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Hotline: 0974.0707.83(Zalo/Viber)