Quay lại

Code thu gọn mô tả danh mục sản phẩm

Khi làm SEO cho website bán hàng WooCommerce, chúng ta thường viết mô tả dài cho các trang danh mục sản phẩm. Tuy nhiên, mô tả quá dài sẽ ảnh hưởng đến trải nghiệm người dùng (UX).

Vấn đề

Mô tả danh mục dài (500-1000 từ) giúp SEO nhưng:

  • Đẩy sản phẩm xuống dưới fold
  • Người dùng phải scroll nhiều
  • Không ai đọc hết đoạn mô tả dài
  • Ảnh hưởng UX trên mobile

Giải pháp: Thu gọn mô tả với nút "Xem thêm"

Hiển thị phần mô tả ngắn (2-3 dòng) và ẩn phần còn lại. Người dùng muốn đọc thêm có thể click nút "Xem thêm".

Code PHP

Thêm vào functions.php của child theme:

// Thu gọn mô tả danh mục sản phẩm
add_action('woocommerce_archive_description', 'collapse_category_description', 5);
function collapse_category_description() {
  if (is_product_category()) {
    remove_action('woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10);

    $term = get_queried_object();
    if ($term && !empty($term->description)) {
      echo '<div class="term-description-wrapper">';
      echo '<div class="term-description collapsed">' . wpautop($term->description) . '</div>';
      echo '<button class="toggle-description">Xem thêm</button>';
      echo '</div>';
    }
  }
}

Code CSS

.term-description-wrapper {
  position: relative;
}

.term-description.collapsed {
  max-height: 80px;
  overflow: hidden;
}

.term-description.expanded {
  max-height: none;
}

.toggle-description {
  background: none;
  border: none;
  color: #0066cc;
  cursor: pointer;
  padding: 5px 0;
  font-size: 14px;
}

.toggle-description:hover {
  text-decoration: underline;
}

Code JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const toggleBtn = document.querySelector('.toggle-description');
  const description = document.querySelector('.term-description');

  if (toggleBtn && description) {
    toggleBtn.addEventListener('click', function() {
      description.classList.toggle('collapsed');
      description.classList.toggle('expanded');
      this.textContent = description.classList.contains('expanded') ? 'Thu gọn' : 'Xem thêm';
    });
  }
});

Kết quả

  • Mô tả SEO vẫn đầy đủ trong source code
  • Người dùng thấy giao diện gọn gàng
  • Sản phẩm hiển thị ngay trên fold
  • Người dùng quan tâm có thể mở rộng đọc thêm