Làm cách nào để thêm hình ảnh sản phẩm trong WooC Commerce?

Khi cửa hàng WooC Commerce gửi email đặt hàng cho khách hàng của bạn, theo mặc định, nó chỉ bao gồm tên sản phẩm trong bảng mặt hàng đặt hàng trong email. Tuy nhiên, đây không phải là dữ liệu duy nhất mà WooC Commerce có thể đưa vào bảng mục đơn hàng của email. Theo mặc định, các mục dữ liệu này bị “tắt”. WooC Commerce có thể bao gồm thông tin sản phẩm có liên quan như SKU và hình ảnh sản phẩm. Quá trình này rất đơn giản và liên quan đến việc chuyển đổi các giá trị mặc định cho các phần dữ liệu này “bật”. Điều này cho phép WooC Commerce thêm nhiều thông tin hơn trong email

Thêm hình ảnh sản phẩm và/hoặc SKU vào email đặt hàng WooC Commerce

Với WooC Commerce, bạn có thể dễ dàng đưa hình ảnh sản phẩm vào các mặt hàng đặt hàng trong email giao dịch của cửa hàng. Có thể thực hiện “bật” các mục dữ liệu này bằng cách sử dụng bộ lọc

Bộ lọc này chuyển vào tất cả các giá trị mặc định cho bảng mục đơn đặt hàng qua email. Theo mặc định, SKU, ghi chú mua hàng, hình ảnh và liên kết tải xuống đều được đặt thành false [“tắt”]. WooC Commerce tự xử lý một cách có điều kiện một số mục dữ liệu này, chẳng hạn như liên kết tải xuống khi quyền truy cập tải xuống cần được cấp. Tuy nhiên, SKU và hình ảnh cần được “bật” thủ công

Tôi sẽ bắt đầu bằng cách kích hoạt hình ảnh sản phẩm trong mẫu mặt hàng đặt hàng qua email. Tôi sẽ chuyển dữ liệu vào bộ lọc và sau đó trả lại. Tuy nhiên, thay vào đó, tôi sẽ thay đổi giá trị show_image thành true bằng đoạn mã này [trong plugin hoặc hàm tùy chỉnh. php]

function cw_add_wc_order_email_images[ $output, $order ] {
   static $run = 0;
   if [ $run ] {
        return $output;
    }
   $args = array[
        'order'                 => $order,
        'items'                 => $order->get_items[],
        'show_download_links'   => $show_download_links,
        'show_sku'              => $show_sku,
        'show_purchase_note'    => $show_purchase_note,
        'show_image'   	=> true,
        'image_size'    => array[ 100, 50 ]
    ];
   $run++;
   return $order->email_order_items_table[ $args ];
}
add_filter[ 'woocommerce_email_order_items_table', 'cw_add_wc_order_email_images' ];

Đoạn mã này cũng có thể được chỉnh sửa để thay đổi kích thước hình ảnh. Thay vì bao gồm $image_size cho giá trị này, tôi có thể chuyển vào một mảng kích thước. Số đầu tiên trong mảng này sẽ là chiều rộng và số thứ hai là chiều cao

Hãy thay đổi kích thước hình ảnh

'image_size' => $image_size

To
'image_size' => array[ 100, 50 ]

Thêm thông tin SKU vào email WooC Commerce

Có thể dễ dàng bật SKU sản phẩm trong email bằng cùng một đoạn mã. Để làm được điều này, bạn cần thay đổi

'show_sku' => $show_sku,

To
'show_sku' => true,

Lưu ý cuối cùng về việc thêm SKU vào email, tôi không thích vị trí hiện tại [nội tuyến với tên sản phẩm. Để thay đổi điều này

function cw_edit_order_item_name[ $name ] {
    return $name . '
'; } add_filter[ 'woocommerce_order_item_name', 'cw_edit_order_item_name' ];

Phần kết luận

Trong bài viết này, tôi đã thảo luận về cách bật tính năng bổ sung hình ảnh sản phẩm và thông tin SKU về sản phẩm trong email WooC Commerce. Quá trình này thực sự đơn giản và có thể được thực hiện thông qua các đoạn mã đơn giản. Nếu bạn cần làm rõ thêm bất kỳ điều gì hoặc muốn đóng góp cho cuộc thảo luận, hãy để lại nhận xét bên dưới

Đánh giá của khách hàng tại

“Hiệu suất tuyệt vời với mức giá và nhiều quyền kiểm soát”

Sean P [Chủ SMB]

Owais Alam

là Người quản lý cộng đồng WordPress tại Cloudways - Nền tảng lưu trữ WooC Commerce được quản lý và là nhà phát triển PHP dày dạn kinh nghiệm. Anh ấy thích phát triển tất cả các loại trang web trên WordPress và đặc biệt yêu thích WooC Commerce. Bạn có thể gửi email cho anh ấy tại [email protected]

Trong các bài viết trước, chúng tôi đã thêm các loại sản phẩm khác nhau trong WooC Commerce. Hình ảnh trong cửa hàng trực tuyến cung cấp hình ảnh trực quan cho khách hàng và giúp họ hiểu rõ hơn về bất kỳ sản phẩm nào. Vì vậy, trong bài viết này, tôi sẽ giải thích cách bạn có thể thêm hình ảnh sản phẩm hoặc phòng trưng bày sản phẩm

Hình ảnh sản phẩm

Hình ảnh sản phẩm hay chính xác hơn là hình ảnh nổi bật đóng vai trò là hình ảnh chính cho sản phẩm của bạn. Mỗi sản phẩm có một hình ảnh đặc trưng. Bạn nên bao gồm một hình ảnh nổi bật rõ ràng và đảm bảo rằng không có văn bản trên hình ảnh. Theo kinh nghiệm cá nhân của tôi, những hình ảnh có văn bản bên trên sẽ ít hiển thị hơn và lộn xộn hơn, dẫn đến tình trạng CTR [Tỷ lệ nhấp chuột] thấp, trong khi những hình ảnh không có văn bản trong đó được nhấp/xem nhiều hơn, dẫn đến doanh số bán hàng nhiều hơn và tốt hơn . Ví dụ: bạn có thể kiểm tra hình ảnh nổi bật của các khóa học Tuts+

Thêm hình ảnh sản phẩm

Nếu bạn nhìn về phía dưới bên phải của trang chỉnh sửa sản phẩm, bạn sẽ tìm thấy hộp meta cho Hình ảnh sản phẩm. Bạn có thể đặt hình ảnh tại đây bằng cách nhấp vào Đặt hình ảnh sản phẩm.  

Khi bạn nhấp vào nó, bạn sẽ được chuyển đến trình tải lên hình ảnh giống như trong hình trên. Từ đây, bạn có thể tải lên tệp hình ảnh mới từ máy tính của mình hoặc bạn có thể nhấp vào Thư viện phương tiện để chọn hình ảnh đã tải lên làm hình ảnh sản phẩm của mình

Nhấp vào nút Đặt hình ảnh sản phẩm sau khi bạn hoàn tất lựa chọn của mình. Sau đó, hãy nhấp vào Lưu bản nháp [nếu sản phẩm chưa được xuất bản] hoặc Cập nhật [nếu sản phẩm đã được xuất bản] và hình ảnh sản phẩm sẽ xuất hiện ở giao diện người dùng

Phòng trưng bày sản phẩm

Thông thường các trang web có thể có một hình ảnh nổi bật duy nhất, nhưng một trang web thương mại điện tử phải có nhiều hình ảnh trên một sản phẩm để bán hàng tốt hơn. Bây giờ, cách thực hành tốt nhất ở đây là thêm ít nhất ba và nhiều nhất là năm hình ảnh. Khách hàng luôn cần nhiều hơn những gì bạn cung cấp cho họ. Nhưng điều đó không có nghĩa là bạn có thể thêm hàng chục hình ảnh trong bộ sưu tập hình ảnh. Hình ảnh thư viện là để xem nhanh hơn. Nếu bạn muốn thêm nhiều hình ảnh hơn, bạn cần sử dụng trình chỉnh sửa cho phần mô tả sản phẩm

Phòng trưng bày sản phẩm sẽ chứa tất cả các hình ảnh liên quan đến một sản phẩm. Một hình ảnh nổi bật hoặc sản phẩm cũng sẽ là một phần của bộ sưu tập này, nhưng sẽ được coi là hình ảnh chính

Thêm Thư viện Sản phẩm

Để thêm Thư viện sản phẩm, hãy nhìn về phía dưới bên phải của trang, gần hộp meta cho Hình ảnh sản phẩm và bạn sẽ tìm thấy hộp meta cho Thư viện sản phẩm. Tại đây, hãy nhấp vào Thêm hình ảnh thư viện sản phẩm, và bạn sẽ lại được chuyển hướng đến trình tải hình ảnh lên từ đó bạn có thể tải lên và chọn hình ảnh sẽ xuất hiện trong thư viện

Khi hình ảnh của bạn được tải lên, hãy nhấp vào Thêm vào thư viện

Khi bạn xuất bản sản phẩm, những hình ảnh bộ sưu tập này sẽ xuất hiện ở giao diện người dùng. Hình trên cho thấy hình ảnh sản phẩm được hiển thị dưới dạng hình ảnh chính và các hình ảnh bộ sưu tập liên quan được hiển thị ngay bên dưới hình ảnh đó. Khách hàng có thể nhấp vào bất kỳ hình ảnh nào trong số này và cuộn qua toàn bộ thư viện

Sắp xếp lại hoặc xóa hình ảnh khỏi Thư viện sản phẩm

Nếu muốn thay đổi thứ tự hình ảnh trong thư viện, bạn có thể kéo và thả hình ảnh theo thứ tự ưu tiên

Để xóa hoặc xóa hình ảnh khỏi thư viện, hãy di chuột qua hình ảnh bạn muốn xóa và nhấp vào dấu chéo xuất hiện màu đỏ

Để xác nhận lại những thay đổi này, hãy nhấp vào Lưu bản nháp hoặc Cập nhật

Đây là cách bạn có thể thêm các hình ảnh khác nhau cho sản phẩm của mình trong bất kỳ cửa hàng trực tuyến nào. Nếu bạn có bất kỳ câu hỏi nào liên quan đến chủ đề này, bạn có thể bình luận bên dưới

Làm cách nào để thêm hình ảnh sản phẩm vào WooC Commerce theo lập trình?

Thêm hình ảnh WooC Commerce theo cách lập trình. .
Chuyển đến Giao diện> Tùy chỉnh
Sau đó, WooC Commerce> 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ỏ”
Đặt chiều cao của hình ảnh trong “Thumbnail Crop”
Nhấp vào “Xuất bản”

Tại sao hình ảnh sản phẩm của tôi không hiển thị trên WordPress?

Chúng tôi khuyên bạn nên kiểm tra cài đặt chủ đề WordPress của mình hoặc liên hệ với bộ phận hỗ trợ chủ đề của bạn để được trợ giúp. Đối với plugin, mã lỗi thời là lý do phổ biến nhất dẫn đến xung đột plugin . Các plugin có quyền truy cập vào thư viện phương tiện của bạn cũng có thể ngăn hình ảnh nổi bật hiển thị đúng cách. Trước tiên, hãy thử cập nhật tất cả các plugin của bạn.

Chủ Đề