WordPress: thay đổi kích thước hình ảnh sản phẩm WooCommerce

Trong bài viết này Daipho sẽ hướng dẫn bạn cách tùy chỉnh kích thước hình ảnh sản phẩm WooCommerce. Đa số trường hợp, bạn sẽ thay đổi kích thước dễ dàng. Tuy nhiên, một số theme có thể can thiệp và ngăn cản việc bạn thay đổi kích thước.

Các loại hình ảnh có thể tùy chỉnh trong WooCommerce

Trên một trang WordPress, WooCommerce hiển thị hình ảnh sản phẩm ở với nhiều định dạng khác nhau. Phổ biến nhất là kích thước thumbnail, single, và gallery.

1. Single là kích thước hình ảnh chính và nổi bật được được hiển thị trong trang chi tiết sản phẩm. Giá trị mặc định là 600 (px).
2. Thumbnail là kích thước ảnh hiển thị trên các trang danh mục, trang cửa hàng và kết quả tìm kiếm. Giá trị mặc định là 300 (px).
3. Và gallery là kích thước được dùng trong một số trường hợp đặc biệt như trong widget, trong 1 bộ sưu tập.

Nếu bạn truy cập vào web hosting, bạn sẽ thấy mỗi hình ảnh bạn tải lên đều có nhiều bản copy với kích thước khác nhau. Trong đó có những kích thước mà bạn đã chọn.

Tùy chỉnh kích thước hình ảnh sản phẩm WooCommerce trong bảng điều khiển

WooCommerce cung cấp một cài đặt chung cho phép tùy chỉnh kích thước hình ảnh sản phẩm. Bạn truy cập vào cài đặt hình ảnh này trong phần:

Giao diện > Tùy chỉnh > WooCommerce > Hình ảnh sản phẩm

• Chiều dài ảnh chính: là kích thước ảnh single. Chiều rộng được tính tự động theo cài đặt Cắt ảnh bên dưới.
• Chiều dài ảnh: là kích thước ảnh thumbnail. Chiều rộng được tính tự động theo cài đặt Cắt ảnh bên dưới.
• Cắt ảnh: WordPress sẽ cắt xén hình ảnh theo tỉ lệ này để đảm bảo việc hiển thị danh sách sản phẩm được ngay ngắn

Lưu ý: Chiều rộng của hình ảnh sản phẩm single hoặc hình ảnh chính sẽ không bị cắt xén và không bị ảnh hưởng bởi cài đặt cắt xén.

Thay đổi kích thước hình ảnh thu nhỏ của sản phẩm

Sau khi thực hiện bước bên trên, những ảnh bạn upload kể từ thời khắc này sẽ được cắt xén theo giá trị mới. Tuy nhiên các hình ảnh trước đó vẫn giữ kích thước cũ. Bạn thực hiện theo các bước sau để áp dụng thay đổi hàng loạt cho các ảnh trước đó:

WooCommerce > Trạng thái > Công cụ

Bạn cuộn xuống phần “Tạo lại hình thu nhỏ cửa hàng” và nhấp vào nút “Tạo lại”

Bạn có thể tham khảo thêm các thủ thuật khác về WordPress tại đây : https://www.daipho.com/blogtag/wordpress/.

Bạn có thể thao khảo các giao diện cho trang web của mình tại đây: https://store.daipho.com/san-pham/