Cách thêm biến thể màu sắc vào sản phẩm WooCommerce

One Page Pro - Multi Purpose OnePage WordPress Theme
5/5 - (1 bình chọn)

Mẫu màu là một cách tuyệt vời để giới thiệu các sản phẩm bạn bán trên cửa hàng trực tuyến của mình. Chúng có thể giúp khách hàng chọn đúng mặt hàng nhanh hơn. Chúng cũng là một cách tuyệt vời để tăng tỷ lệ chuyển đổi vì chúng trông sạch hơn và chuyên nghiệp hơn.

Cách thêm biến thể màu sắc vào sản phẩm WooCommerce

Mẫu màu là một cách tuyệt vời để giới thiệu các sản phẩm bạn bán trên cửa hàng trực tuyến của mình. Chúng có thể giúp khách hàng chọn đúng mặt hàng nhanh hơn. Chúng cũng là một cách tuyệt vời để tăng tỷ lệ chuyển đổi vì chúng trông sạch hơn và chuyên nghiệp hơn.

Trong hướng dẫn này, chúng ta sẽ khám phá cách bật mẫu màu trong WooCommerce . Chúng ta cũng sẽ xem cách thêm các biến thể vào sản phẩm của bạn để khách hàng có thể chọn các tùy chọn khác nhau cho mỗi biến thể.

Tại sao nên sử dụng biến thể màu sắc trong WooCommerce?

Màu sắc là một trong những yếu tố quan trọng nhất khi đưa ra quyết định mua hàng vì đây thường là điều đầu tiên mà khách hàng cân nhắc khi mua một sản phẩm nào đó.

Mẫu màu cho phép bạn giới thiệu sản phẩm WooCommerce của mình theo cách tốt nhất có thể và có thể giúp tăng tỷ lệ chuyển đổi và doanh số. Một sản phẩm có nhiều tùy chọn màu sắc sẽ hấp dẫn người mua hơn nếu được hiển thị bằng mẫu màu thay vì chỉ sử dụng văn bản.

Cách thêm biến thể màu sắc vào sản phẩm WooCommerce

Là chủ cửa hàng trực tuyến, có lẽ bạn đã biết rằng trang sản phẩm biến thể WooCommerce mặc định có chức năng cơ bản là giới thiệu các biến thể sản phẩm khác nhau.

Thuộc tính mặc định WooCommerce

Tuy nhiên, nó chỉ cho phép bạn hiển thị các biến thể trong menu thả xuống dạng văn bản. Chúng không trực quan lắm; chúng khiến khách hàng khó so sánh các tùy chọn khác nhau cạnh nhau; và chúng cần nhiều lần nhấp để chọn.

Để cải thiện điều này, bạn sẽ cần plugin WooCommerce Variation Swatches .

Hiển thị các biến thể màu sắc bằng plugin

Cách đơn giản nhất để hiển thị các biến thể dưới dạng mẫu màu là sử dụng plugin.

Mẫu biến thể WooCommerce

Thay thế danh sách thả xuống biến thể bằng mẫu trong WooCommerce

Tìm hiểu thêm

Plugin WooCommerce Variation Swatches dễ sử dụng và cho phép bạn hiển thị các biến thể dưới dạng mẫu màu (cũng như nhiều loại mẫu màu khác). Cài đặt nhanh chóng và có thể tùy chỉnh hoàn toàn. Bạn có thể:

  • Thay thế các biến thể WooCommerce tiêu chuẩn bằng mẫu chỉ bằng một cú nhấp chuột
  • Chọn từ nhiều loại mẫu: màu sắc, hình ảnh, nút văn bản hoặc nút tùy chọn
  • Đặt các loại mẫu khác nhau cho mỗi thuộc tính hoặc sản phẩm nếu bạn muốn
  • Thiết lập kiểu toàn cục hoặc theo thuộc tính/sản phẩm
  • Xác định hình dạng và màu sắc của mẫu

Hướng dẫn: Cách thêm biến thể màu vào WooCommerce

Chúng ta hãy cùng xem qua hướng dẫn nhanh về cách thêm các biến thể màu sắc bằng cách sử dụng plugin WooCommerce Variation Swatches.

Bước 1: Tải xuống và cài đặt plugin

Khi bạn mua plugin, bạn sẽ nhận được email có liên kết đến tệp zip. Tải xuống tệp zip sau đó vào Plugin > Thêm mới trong bảng điều khiển WordPress của bạn. Tải tệp zip lên và kích hoạt plugin.

Bước 2: Xác định màu sắc của bạn

Điều đầu tiên bạn cần làm sau khi kích hoạt plugin là xác định màu biến thể của bạn. Vào Products > Attributes và nhấp vào bất kỳ thuộc tính nào sử dụng màu làm tùy chọn. Nhấp vào ‘Configure terms’.

thêm biến thể màu sắc vào sản phẩm
thêm biến thể màu sắc vào sản phẩm

Bây giờ bạn có thể thiết lập màu cho từng thuật ngữ. Nhấp vào tùy chọn, ví dụ ‘Màu xanh’, và sử dụng công cụ chọn màu để thiết lập màu bạn muốn hiển thị.

thêm biến thể màu sắc vào sản phẩm
thêm biến thể màu sắc vào sản phẩm

Nhấp vào ‘Cập nhật’ và lặp lại cho tất cả các màu. Bạn sẽ có thể thấy tất cả các màu của mình được liệt kê trong bảng.

Thuộc tính màu WooCommerce với tất cả các điều khoản được liệt kê
thêm biến thể màu sắc vào sản phẩm

Bây giờ bạn đã thiết lập màu sắc, bạn có thể thay đổi các biến thể để chúng hiển thị các mẫu màu.

Bước 3: Cấu hình mẫu màu của bạn trên toàn cầu

Nếu bạn muốn thay đổi tất cả các biến thể của mình để hiển thị các mẫu màu, thì bạn có thể thực hiện việc này từ trang cài đặt chính. Điều này lý tưởng nếu tất cả các thuộc tính của bạn (hoặc hầu hết các thuộc tính) là màu sắc. Nếu bạn chỉ muốn hiển thị một số biến thể dưới dạng các mẫu màu, hãy bỏ qua Bước 4 bên dưới.

Vào WooCommerce > Cài đặt > Mẫu biến thể để thiết lập tùy chọn chung của bạn. Bạn có thể thiết lập tùy chọn tại đây và áp dụng chúng cho tất cả các biến thể của mình – hoặc bạn có thể ghi đè chúng ở cấp sản phẩm và thuộc tính.

Để đặt các biến thể của bạn thành mẫu màu, hãy chọn ‘Mẫu màu’ từ cài đặt ‘Kiểu mặc định’. Thao tác này sẽ thay đổi tất cả các trường biến thể của bạn thành mẫu hiển thị màu.

Đặt tất cả các biến thể thành mẫu màu trong WooCommerce

Bước 4: Cấu hình các kiểu chính của bạn

Vẫn tại WooCommerce > Cài đặt > Mẫu biến thể, bạn có thể cấu hình các cài đặt và kiểu toàn cầu khác. Ví dụ, nếu bạn muốn đặt tùy chọn toàn cầu về cách các biến thể bị vô hiệu hóa hoạt động (ví dụ: làm mờ dần, ẩn chúng, hiển thị dấu chéo qua chúng), thì bạn có thể thực hiện điều đó từ cài đặt ‘Hành vi mặc định khi bị vô hiệu hóa’. Bạn cũng có thể xác định hình dạng mặc định trên trang này.

Để thiết lập kiểu, hãy nhấp vào mục menu ‘Kiểu’. Bạn có thể cập nhật kích thước, màu sắc, văn bản và đường viền tại đây.

Mẫu biến thể WooCommerce styles.jpeg

Ở giai đoạn này, nếu bạn đã hoàn thành Bước 3, tất cả các biến thể của bạn sẽ được hiển thị dưới dạng mẫu màu. Tuy nhiên, nếu bạn cần đảm bảo rằng chỉ một số trường biến thể hiển thị dưới dạng mẫu màu, bạn sẽ cần hoàn thành Bước 5 bên dưới.

Bước 5: Đặt các biến thể dưới dạng mẫu màu ở cấp độ thuộc tính hoặc sản phẩm

Nếu bạn quyết định không thiết lập mẫu màu trên toàn cầu, thì bạn có thể thiết lập chúng cho các thuộc tính và/hoặc sản phẩm cụ thể.

Thuộc tính

Để thiết lập một thuộc tính cụ thể hiển thị dưới dạng mẫu màu, hãy vào Sản phẩm > Thuộc tính và chọn thuộc tính cần chỉnh sửa (di chuột qua tên thuộc tính và nhấp vào ‘Chỉnh sửa’).

Đặt mẫu màu cho thuộc tính WooCommerce cụ thể

Đặt ‘Kiểu’ thành ‘Mẫu màu’ và nhấp vào ‘Cập nhật’.

Bây giờ, bất cứ nơi nào thuộc tính này được sử dụng cho các biến thể sản phẩm, nó sẽ hiển thị dưới dạng mẫu màu.

Các sản phẩm

Nếu bạn cần linh hoạt hơn nữa, bạn có thể hiển thị các biến thể dưới dạng mẫu màu cho các sản phẩm cụ thể. Chỉnh sửa sản phẩm mà bạn muốn hiển thị mẫu màu và nhấp vào tab ‘Thuộc tính’ trong phần ‘Dữ liệu sản phẩm’.

Thiết lập mẫu màu thuộc tính WooCommerce

Bây giờ, bất kể bạn sử dụng thiết lập nào trên toàn cục và ở cấp độ thuộc tính, sản phẩm này sẽ hiển thị biến thể màu của nó dưới dạng mẫu màu.

Mẫu màu WooCommerce cho các biến thể

Các plugin WordPress hàng đầu cho các mẫu màu biến thể

Hãy cùng xem xét kỹ hơn một số plugin WordPress hàng đầu để thêm mẫu màu vào các biến thể của bạn.

#1. Mẫu biến thể WooCommerce

Chúng tôi đã đề cập đến plugin này ở trên – nó được thiết kế đặc biệt để cho phép bạn thêm mẫu màu vào các biến thể của mình.

Dễ sử dụng: bạn có thể áp dụng các mẫu màu trên toàn cầu, theo thuộc tính hoặc theo sản phẩm. Và bạn có thể tùy chỉnh kiểu cho các mẫu màu và dễ dàng thiết lập màu bằng công cụ chọn màu.

Nó thay thế các menu thả xuống văn bản chuẩn bằng các mẫu có thể tùy chỉnh – cải thiện UX và tỷ lệ chuyển đổi của trang web bạn.

Plugin này cũng có tùy chọn hiển thị mẫu vải của bạn trên trang cửa hàng hoặc trang lưu trữ .

Giá cả – giấy phép hàng năm cho WooCommerce Variation Swatches bắt đầu từ $59. Thanh toán một lần bắt đầu từ $179.

#2. Mẫu thuộc tính WooCommerce

WooCommerce Attribute Swatches là một plugin mạnh mẽ cho phép bạn hiển thị các tùy chọn sản phẩm trực quan thay vì các tùy chọn mặc định của WooCommerce.

Bằng cách cung cấp trải nghiệm mua sắm trực quan hơn, bạn khuyến khích khách hàng đưa ra quyết định mua hàng sáng suốt hơn một cách nhanh chóng. Plugin cung cấp các tính năng tùy chỉnh sản phẩm nâng cao như hiển thị các mẫu WooCommerce hấp dẫn , tùy chỉnh bộ lọc sản phẩm, hiển thị các mẫu trên các trang danh mục sản phẩm và thiết lập giá thuộc tính sản phẩm để cung cấp các tùy chọn sản phẩm cao cấp trên cửa hàng trực tuyến của bạn.

Giá cả – Bạn có thể tải plugin WooCommerce Attribute Swatches với giá 79 đô la một năm.

#3. Biến thể nhãn và màu sắc của YITH WooCommerce

YITH WooCommerce Color and Label Variations là plugin WooCommerce chuyên nghiệp cung cấp giải pháp hiệu quả để hiển thị các tùy chọn sản phẩm tốt hơn trên cửa hàng trực tuyến của bạn.

Bạn có thể hiển thị các tùy chọn sản phẩm như màu sắc, kích thước, hình dạng hoặc kích thước sản phẩm tốt hơn ở giao diện người dùng bằng cách sử dụng mẫu hình ảnh, mẫu màu, nhãn và nút văn bản. Nó cũng cung cấp cho bạn quyền truy cập vào các tính năng tùy chỉnh sản phẩm nâng cao như thêm thư viện hình ảnh khác nhau cho mỗi biến thể, hiển thị thông tin bổ sung với các biến thể thuộc tính, tạo nhãn tùy chỉnh và hiển thị các biến thể đơn lẻ trên các trang sản phẩm riêng biệt. Nó có tất cả các tính năng cần thiết để cá nhân hóa hoàn toàn sản phẩm của bạn và mang đến trải nghiệm mua sắm độc đáo trên cửa hàng trực tuyến của bạn.

Giá cả – Giá của plugin YITH WooCommerce Color and Label Variations bắt đầu từ 89,99 đô la một năm.

Tùy chọn tốt nhất để hiển thị các mẫu màu biến thể trong WooCommerce

Việc bật mẫu màu và biến thể màu cho WooCommerce sẽ mang lại trải nghiệm mua sắm tốt hơn trên cửa hàng trực tuyến của bạn.

Bạn đã sẵn sàng để bắt đầu bật mẫu màu và biến thể cho các sản phẩm WooCommerce chưa? Nhận mẫu màu WooCommerce Variation Swatches ngay hôm nay!

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *