CSS giới hạn ký tự tiêu đề sản phẩm trong Woocommere

WooCommerce là nền tảng thương mại điện tử phổ biến trên WordPress, hỗ trợ bán sản phẩm với nhiều biến thể khác nhau. Tuy nhiên, mặc định hệ thống sẽ hiển thị khoảng giá từ thấp nhất đến cao nhất, đôi khi gây nhầm lẫn cho khách hàng. Để hiển thị thông tin minh bạch và chuyên nghiệp hơn, bạn có thể tùy chỉnh để hiển thị giá cao nhất trong sản phẩm biến thể WooCommerce. Đây là một cách đơn giản giúp cải thiện trải nghiệm mua sắm và tăng độ tin cậy cho cửa hàng online.

CSS giới hạn ký tự tiêu đề sản phẩm trong Woocommere – Để giới hạn ký tự hiển thị tiêu đề sản phẩm trong Woocommerce có rất nhiều cách khác nhau. Có thể bạn sử dụng plugin wordpress có sẵn hoặc những đoạn mã rút ngắn trong function.

Rút ngắn ký tự tiêu đề sản phẩm bằng CSS

Sử dụng CSS là cách đơn giản nhất và hiệu quả tốt hơn khi bạn hover chuột vào tiêu đề rút gọn sẽ hiện ra thông tin đây đủ. Dưới đây là đoạn mã css, hãy copy và sử dụng nhé!

/* CSS rút ngắn tiêu đề */
.class-tieu-de-blog {
    padding-top: 5px;
    text-align: center;
    color: #000;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; //là số dòng mà bạn muốn rút ngắn
}

Hoặc có thể sử dụng đoạn mã CSS sau

.woocommerce ul.products li.product h3 {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

Giới hạn số lượng ký tự bằng PHP

Sử dụng đoạn mã phía dưới copy vào file function.php

/* Giới hạn số lượng ký tự bằng PHP - thangoi.com */
add_filter( 'the_title', 'mx_shorten_product_title', 10, 2 );
function mx_shorten_product_title( $title, $id ) {
  if ( is_shop() && get_post_type( $id ) === 'product' ) {
     return substr( $title, 0, 15 ); // Thay đổi số ký tự muốn giới hạn
  } else {
     return $title;
  }
}

Giới hạn số lượng từ bằng PHP

/* Giới hạn số lượng từ bằng PHP - thangoi.com */
add_filter( 'the_title', 'mx_shorten_product_title', 10, 2 );
function mx_shorten_product_title( $title, $id ) {
  if ( is_shop() && get_post_type( $id ) === 'product' ) {
    return wp_trim_words( $title, 4 ); // Thay đổi số lượng Từ mà bạn muốn hiển thị
   } else {
    return $title;
   }
}

Việc tùy chỉnh WooCommerce để hiển thị giá cao nhất trong biến thể sản phẩm không chỉ giúp khách hàng nắm rõ mức giá tối đa mà còn tạo sự minh bạch trong bán hàng. Thủ thuật này góp phần nâng cao tính chuyên nghiệp cho website thương mại điện tử và hỗ trợ tăng tỷ lệ chuyển đổi.