Hướng dẫn cách CSS cho sản phẩm Flatsome đều nhau và đẹp mắt

Flatsome là một trong những theme WordPress thương mại điện tử (WooCommerce) phổ biến nhất hiện nay nhờ tốc độ nhanh và khả năng tùy biến mạnh mẽ. Tuy nhiên, trong quá trình nhập liệu, bạn rất dễ gặp phải tình trạng các khung sản phẩm hiển thị thò thụt, lệch nhau do kích thước ảnh hoặc độ dài tiêu đề không đồng nhất.

Bài viết này sẽ hướng dẫn cách CSS cho sản phẩm Flatsome đều nhau một cách triệt để, giúp giao diện cửa hàng của bạn trở nên gọn gàng và chuyên nghiệp hơn.

1. Nguyên nhân khiến khung sản phẩm Flatsome không đều nhau

Trước khi đi vào code, chúng ta cần hiểu rõ tại sao lưới sản phẩm lại bị lệch:

• Kích thước hình ảnh khác nhau: Bạn tải lên các ảnh có tỷ lệ khác nhau (ảnh vuông, ảnh chữ nhật đứng, ngang) khiến khung chứa ảnh bị thay đổi chiều cao.

• Độ dài tiêu đề sản phẩm (Product Title) không đồng đều: Sản phẩm có tên dài 2-3 dòng, sản phẩm lại chỉ có 1 dòng.

• Giá hoặc các badge (nhãn) độn chiều cao: Một số sản phẩm có giá khuyến mãi (hiển thị 2 dòng giá), hoặc có các nhãn “Giảm giá”, “Hết hàng” làm cấu trúc box thay đổi.

2. Cách 1: Xử lý đều ảnh bằng Flatsome Theme Options (Không cần code)

Trước khi can thiệp bằng CSS, bạn nên sử dụng tính năng có sẵn của Flatsome để đưa các hình ảnh về cùng một tỷ lệ. Đây là bước bắt buộc để tổng thể sản phẩm đều đặn hơn.

1. Truy cập vào trang quản trị WordPress, chọn Giao diện (Appearance) > Tùy biến (Customize).

2. Điều hướng tới WooCommerce > Product Image.

3. Tại phần Image Size, tích chọn Custom.

4. Điền tỷ lệ bạn muốn (Ví dụ: 1:1 cho ảnh vuông, hoặc 4:5 cho ảnh dọc).

5. Nhấn Đăng (Publish) để lưu lại.

Lúc này, hệ thống sẽ tự động crop hình ảnh sản phẩm về cùng một kích thước. Tuy nhiên, chiều cao của hộp (box) vẫn có thể bị lệch do tiêu đề. Hãy chuyển sang phần custom CSS dưới đây.

>> TẢI TÀI NGUYÊN: THEME FLATSOME WORDPRESS 

3. Cách 2: Hướng dẫn cách CSS cho sản phẩm Flatsome đều nhau tuyệt đối

Để các hộp sản phẩm bằng nhau tăm tắp, kể cả khi tiêu đề dài ngắn khác nhau, chúng ta sẽ sử dụng thuộc tính Flexbox trong CSS để đẩy nút “Thêm vào giỏ hàng” (Add to cart) xuống dưới cùng, đồng thời giới hạn số dòng của tiêu đề.

Cấu hình CSS giới hạn dòng tiêu đề và căn lề Box

Bạn hãy copy đoạn mã CSS dưới đây: