Tiếng ViệtHầu hết các sự cố về hình ảnh mờ được gây ra do phong cách của chủ đề, điều này có nghĩa là thiết kế của chủ đề có kích thước hình ảnh, theo pixel, có thể trở nên mờ và không được hiển thị với chất lượng tốt nhất trên WooCommerce.
Cập nhật từ WooCommerce 3.3
Phiên bản 3.3 trở lên của WooCommerce được cài đặt với hỗ trợ cho tornar os temas compatíveis com o WooCommerce và melhorias para redimensionamento e renderização do tamanho da imagem (chỉ có bằng tiếng Anh). Những tính năng mới này có nghĩa là:
- Hình ảnh mờ do không tương thích với chủ đề hoặc mã chồng chéo không nên xảy ra nữa.
- Chủ sở hữu cửa hàng có thể kiểm soát chiều rộng và chiều cao của hình ảnh chính của họ.
- Việc thay đổi kích thước của hình ảnh thu nhỏ có thể được thực hiện một cách tự động hoặc thủ công.
- Hình ảnh được hiển thị cho khách hàng luôn có, theo mặc định, một vẻ ngoài tốt nhất, giúp bạn bán càng nhiều sản phẩm của mình!
Để biết thêm thông tin về cách sử dụng những tính năng mới này, hãy tham khảo Como adicionar e gerenciar produtos và Como adicionar imagens e galerias dos produtos .
Giải pháp khác
Nếu bạn đang sử dụng một phiên bản của WooCommerce trước phiên bản 3.3, chúng tôi khuyên bạn nên cập nhật lên phiên bản mới nhất để tận dụng những tính năng đã mô tả ở trên.
Nếu, vì một lý do nào đó, bạn không muốn sử dụng phiên bản mới nhất hoặc cập nhật lên phiên bản 3.3 không giải quyết được vấn đề mà bạn đang gặp phải, có thể là:
- Cài đặt kích thước hình ảnh của bạn quá nhỏ.
- Hình ảnh gốc cần có độ phân giải cao hơn.
Để giải quyết vấn đề này:
- Kích thước hình ảnh nên tương ứng hoặc lớn hơn kích thước hình ảnh của chủ đề của bạn.
- Hình ảnh gốc được tải lên cần phải có ít nhất 800×800 px hoặc cao hơn để hoạt động với hầu hết các chủ đề.
Dưới đây, chúng tôi cho bạn xem cách tìm kích thước hình ảnh tối đa được chủ đề của bạn khuyến nghị.
Loại hình ảnh
- Imagem de produto único: Hình ảnh lớn nhất và liên quan đến hình ảnh chính/nổi bật trên trang chi tiết sản phẩm cá nhân của bạn.
- Imagens de catálogo: Hình ảnh kích thước vừa được sử dụng trong hiển thị sản phẩm, chẳng hạn như trang Cửa hàng, trang Danh mục sản phẩm, Sản phẩm liên quan, Tăng doanh số và Doanh số chéo.
- Imagens em miniaturas de produtos: Hình ảnh nhỏ nhất, thường được sử dụng trong Giỏ hàng, Widgets và trong hình ảnh thu nhỏ của Thư viện (tùy chọn), dưới Hình ảnh sản phẩm đơn.
Kích thước hình ảnh mặc định
Ở WooCommerce versão 3.2x e anteriores , cài đặt Hình ảnh sản phẩm có thể được tìm thấy ở WooCommerce > Configurações > Produtos > Exibição > Imagens do produto . Lưu ý rằng con số đầu tiên là chiều rộng và con số thứ hai là chiều cao.
Hình ảnh mà bạn tải lên được thay đổi kích thước để phù hợp với các giá trị được nhập. Ví dụ, nếu cài đặt của bạn là 100×100 và bạn tải lên một hình ảnh 300×600, hình ảnh này sẽ được thay đổi kích thước thành 100×200. Bạn cũng có thể chọn ‘bắt buộc cắt’ hình ảnh của mình, ép buộc hình ảnh phải có kích thước được chỉ định trong cài đặt, bất kể hình ảnh Gốc mà bạn đã tải lên, theo cách này, hình ảnh sẽ được cắt bớt chứ không bị méo theo tỉ lệ.
Nếu bạn thay đổi cài đặt após gửi hình ảnh sản phẩm, bạn sẽ cần phải tạo lại các hình ảnh thu nhỏ trên WordPress để các thay đổi được áp dụng. Để làm điều này, chúng tôi khuyên bạn nên sử dụng plugin Regenerate Thumbnails .
Từ WooCommerce versão 3.3 , cài đặt Hình ảnh sản phẩm có thể được tìm thấy trong Personalizador , trong WooCommerce > Imagens do produto:
Tìm ra kích thước hình ảnh sản phẩm của chủ đề
Chủ đề mà bạn đã chọn có một kích thước tối đa của một hình ảnh cụ thể và do đó, bạn cần biết kích thước mà chủ đề của bạn hiển thị hình ảnh để cấu hình chúng trong WooCommerce.
Hình ảnh danh mục
Xác định nơi chủ đề của bạn hiển thị hình ảnh thu nhỏ lớn nhất. Trong một số trường hợp, đó là trang cửa hàng; với chủ đề Twenty Eleven, đó là trong hiển thị sản phẩm liên quan.
Với công cụ phát triển được kích hoạt trên trình duyệt của bạn, bạn có thể nhấn chuột phải vào hình ảnh và chọn “Kiểm tra” hoặc “Kiểm tra phần tử”. Điều này sẽ thông báo cho bạn kích thước của hình ảnh. Ghi chú những kích thước này, vì sau này bạn sẽ cần đến chúng.
Trong chủ đề Storefront (ở trên), hình ảnh danh mục lớn nhất được hiển thị với kích thước 213×213 px.
Hình ảnh sản phẩm đơn
Lặp lại quá trình đối với hình ảnh sản phẩm đơn — hình ảnh lớn nhất trên một trang sản phẩm.
Trong chủ đề Storefront, hình ảnh sản phẩm đơn lớn nhất được hiển thị với kích thước 298×298 px.
Hình ảnh thu nhỏ sản phẩm
Hình ảnh nhỏ nhất, có lẽ, là hình ảnh thu nhỏ trong thư viện sản phẩm. Lặp lại quá trình kiểm tra để lấy kích thước của hình ảnh.
Trong chủ đề Storefront, hình ảnh thu nhỏ sản phẩm được hiển thị với kích thước 43×43 px.
Điều chỉnh kích thước hình ảnh và tạo lại hình ảnh thu nhỏ
Giờ đây, với tất cả các kích thước hình ảnh thu nhỏ cho chủ đề cụ thể của chúng tôi, chúng tôi có thể thêm những kích thước mới này vào WooCommerce để đảm bảo rằng các kích thước hình ảnh trong tương lai sẽ có kích thước này hoặc lớn hơn.
Trong WooCommerce > Configurações > Produtos > Exibição , hãy đảm bảo rằng các kích thước hình ảnh tối đa ít nhất là lớn bằng với các kích thước mà chủ đề của bạn đang hiển thị cho các hình ảnh thu nhỏ này. Sau đó, bấm vào Salvar alterações .
Bây giờ, tất cả các hình ảnh sản phẩm mới được tải lên sẽ có hình ảnh thu nhỏ với cài đặt này và nên được hiển thị mà không mờ hoặc bị méo.
Nota: Lưu thay đổi não tự động cập nhật tất cả hình ảnh sản phẩm đã tải lên trước đó. Để cập nhật hình ảnh cũ, WordPress cần phải tạo lại hình ảnh thu nhỏ. Một plugin tuyệt vời làm chính xác điều này là Regenerate Thumbnails .
Hỗ trợ cho màn hình retina
Màn hình HiDPI, còn được gọi là màn hình retina, chứa gấp đôi số lượng pixel, hoặc nhiều hơn, so với các màn hình cũ hơn. Để có hình ảnh với pixel hoàn hảo trên màn hình retina, hãy đặt hình ảnh thu nhỏ của bạn với dobro kích thước được hiển thị bởi chủ đề của bạn. Ví dụ, nếu một chủ đề hiển thị hình ảnh 80×80 px, bạn nên đặt hình ảnh 160×160 px.
Điều này có thể ảnh hưởng đến hiệu suất, vì hình ảnh lớn hơn mất thời gian tải lên lâu hơn. Đây là một sự ưa thích cá nhân và bạn nên tham khảo các bộ phân tích của mình trước khi quyết định chọn lựa này. Thống kê của bạn sẽ thông báo cho bạn biết những thiết bị nào và kích thước màn hình nào phổ biến nhất mà khách hàng của bạn sử dụng.
