VietNetwork.Vn

WooCommerce cho phép bạn thay đổi kích thước hình ảnh sản phẩm trên các trang Sản phẩm và Cửa hàng đơn lẻ từ Giao diện > Tùy chỉnh > WooCommerce > Hình ảnh sản phẩm.


Ngoài ra, bạn không phải tạo lại hình ảnh theo cách thủ công sau khi thay đổi kích thước chúng bằng một plugin bổ sung, vì WooCommerce có thể cắt, thay đổi kích thước và tự động tạo lại kích thước hình ảnh ngay lập tức.

Mặc dù điều này có vẻ đủ dễ dàng, nhưng thường xảy ra trường hợp các giao diện hoặc plugin có thể ghi đè cài đặt "Tùy chỉnh" và thậm chí ẩn chúng hoàn toàn, điều này gây ra nhiều nhầm lẫn.

Trong bài đăng này, chúng tôi sẽ xem xét cài đặt hình ảnh mặc định của WooCommerce và cuối cùng với danh sách Câu hỏi thường gặp, chúng tôi sẽ cố gắng đề cập đến tất cả các tình huống có thể xảy ra trong trường hợp bạn không thể tìm ra giải pháp. Có một câu hỏi? Hãy sử dụng khu vực bình luận!

1. Thay đổi kích thước Trang sản phẩm đơn Hình ảnh nổi bật

Thực hiện theo các bước sau để thay đổi kích thước hình ảnh sản phẩm:

• Chuyển đến Giao diện> Tùy chỉnh
• Sau đó, truy cập WooCommerce> Hình ảnh sản phẩm
• Viết chiều rộng mong muốn của bạn vào trường " Chiều rộng hình ảnh chính ".
• Nhấp vào " Xuất bản "

Lưu ý: Chiều cao của hình ảnh sản phẩm đơn lẻ hoặc 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.

2. Thay đổi kích thước hình ảnh thu nhỏ của trang cửa hàng

Thực hiện theo các bước sau để thay đổi kích thước hình ảnh cửa hàng, danh mục và danh mục sản phẩm:

• Chuyển đến Giao diện> Tùy chỉnh
• Sau đó, truy cập WooCommerce> Hình ảnh sản phẩm
• Viết chiều rộng mong muốn của bạn vào trường " Chiều rộng hình thu nhỏ ".
• Nhấp vào " Xuất bản "

Ngoài ra, bạn có thể xác định "chiều cao" của hình thu nhỏ của cửa hàng bằng cách thiết lập tỷ lệ khung hình chiều rộng:chiều cao trong phần " Cắt hình thu nhỏ ":

• 1:1 : Nếu bạn chọn 1:1, hình ảnh của bạn sẽ được cắt thành hình vuông
• Tùy chỉnh : Trong Tùy chỉnh, bạn có thể chọn tỷ lệ khung hình của hình ảnh. Đây là một số tỷ lệ khung hình phổ biến (1:1, 5:4, 4:3, 3:2, 16:9 và 3:1).
• Uncropped : Chiều cao của hình ảnh sẽ không bị ảnh hưởng. Hình ảnh sẽ hiển thị theo tỷ lệ khung hình mà chúng được tải lên.

3. Những câu hỏi thường gặp

3. 1. Tôi không thể tìm thấy phần Chiều rộng hình ảnh chính và Chiều rộng hình thu nhỏ?

Một trong những vấn đề phổ biến nhất được các chủ cửa hàng báo cáo là "Tôi dường như không thể tìm thấy Trường Chiều rộng Hình ảnh Chính và Chiều rộng Hình thu nhỏ trong Giao diện > Tùy chỉnh > WooCommerce > Hình ảnh Sản phẩm ".

Lý do đằng sau điều này là, giao diện của bạn đã tuyên bố hỗ trợ WooCommerce và xác định các cài đặt đó trong hàm PHP của nó. Nếu nó được xác định trước thì chúng sẽ bị xóa khỏi Tùy biến. Vì vậy, về cơ bản, nếu giao diện của bạn khai báo kích thước hình ảnh trong hỗ trợ giao diện, cài đặt chiều rộng hình ảnh sẽ không khả dụng.

3.2. Làm cách nào để thay đổi Chiều rộng hình ảnh chính và Chiều rộng hình thu nhỏ nếu chúng được đặt theo giao diện?

Bạn phải ghi đè độ rộng hình ảnh được đặt theo giao diện của mình thông qua mã. Ví dụ: Trong Mặt tiền cửa hàng, bạn sẽ không tìm thấy bất kỳ cài đặt Chiều rộng hình ảnh chính hoặc Chiều rộng hình thu nhỏ nào vì chúng đã được đặt thông qua storefront/inc/class-storefront.php:

add_theme_support( 'woocommerce', apply_filters( 'storefront_woocommerce_args', array(
   'single_image_width' => 416,
   'thumbnail_image_width' => 324,
   'product_grid' => array(
      'default_columns' => 3,
      'default_rows' => 4,
      'min_columns' => 1,
      'max_columns' => 6,
      'min_rows' => 1
   )
)));
Trong Mặt tiền cửa hàng, Hình ảnh một sản phẩm đã được đặt thành rộng 416px và hình thu nhỏ thành rộng 324px. Trong trường hợp đó, bạn có thể ghi đè cuộc gọi này thông qua giao diện con của mình:

/**
 * @snippet       Edit Image Sizes @ Storefront Theme
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'storefront_woocommerce_args', 'bbloomer_resize_storefront_images' );
 
function bbloomer_resize_storefront_images( $args ) {
   $args['single_image_width'] = 999;
   $args['thumbnail_image_width'] = 222;
   return $args;
}
3.3. Định dạng tải lên lý tưởng cho hình ảnh sản phẩm WooCommerce là gì?

Hình vuông, nền trắng, PNG hoặc JPG, tối thiểu 600 * 600 pixel (không quá 1000 * 1000 pixel)

3.4. Hình ảnh cửa hàng của tôi ở khắp mọi nơi. Chuyện gì vậy?

Bạn đã bật "cắt xén hình thu nhỏ 1:1" chưa? Đó là cách duy nhất để làm cho chúng nhất quán (điều này sẽ đưa bạn trở lại câu trả lời số 3 – kích thước tải lên lý tưởng là hình ảnh vuông!).

Nếu hình thu nhỏ không dành cho bạn hoặc không hoạt động, thì:

• Thay đổi kích thước tất cả các hình ảnh và làm cho chúng nhất quán theo tỷ lệ (tất cả 4:3, tất cả 2:5, v.v., tùy thuộc vào "Cắt hình thu nhỏ" > Cài đặt tùy chỉnh của bạn
• Đảm bảo kích thước hình ảnh không DƯỚI kích thước được xác định trong cài đặt. Nếu chiều rộng Hình thu nhỏ của bạn là 350px và bạn tải lên một hình ảnh có chiều rộng nhỏ hơn 350px, thì giao diện của bạn có thể kéo dài hình ảnh đó (hình ảnh sẽ hiển thị dạng pixel) hoặc không (hình ảnh đó sẽ có chiều cao nhỏ hơn các hình ảnh còn lại)