3 cách rút ngắn tiêu đề sản phẩm Woocommerce

Một vấn đề rất phổ biến: đôi khi tiêu đề sản phẩm WooCommerce quá dài. Trên hết, bạn cũng có thể muốn duy trì trải nghiệm cửa hàng nhất quán và làm cho tất cả các tiêu đề sản phẩm WooCommerce có cùng độ dài. Đây là cách bạn làm điều đó.

Vấn đề: Tiêu đề sản phẩm của WooCommerce quá dài, từ đó khiến cho giao diện của bạn trở nên “nhấp nhô” hay “thò thụt”… làm giảm thẩm mỹ của trang danh mục sản phẩm

Hãy cùng tôi sử dụng giải pháp khắc phục vấn đề này nhé!

Cách 1 ( chỉ dùng CSS )

Copy đoạn mã sau và dán vào style.css của theme/child theme hoặc vào quản trị thêm nhé

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

Cách 2 ( PHP ) – Giới hạn số lương KÝ TỰ

Giới hạn tất cả các tiêu đề sản phẩm của WooCommerce với số lượng ký tự tối đa. Cách này sử dụng bằng cách copy và dán đoạn mã này vào file function.php

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 ); // change last number to the number of characters you want
  } else {
     return $title;
  }
}

Cách 3 ( PHP ) – Giới hạn số lượng TỪ

Giới hạn tất cả các tiêu đề sản phẩm của WooC Commerce với số lượng từ tối đa

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 ); // change last number to the number of WORDS you want
   } else {
    return $title;
   }
}

Giới hạn SỐ KÝ TỰ ( cách 2 ) và SỐ TỪ ( cách 3 )là khác nhau, hết sức lưu ý khi sử dụng. ( Cách 2 và cách 3 )

---

Hãy áp dụng lên website của bạn, Thành công hay trục trặc gì thì liên hệ với mình, mình không hứa sẽ giúp nhưng sẽ hướng dẫn bạn cách xử lý vấn đề!