Cách xây dựng Thương mại điện tử với trình tạo Avada WooC Commerce

Khi nói đến việc thiết lập một cửa hàng trực tuyến, WooC Commerce là plugin phù hợp. Thật đơn giản để thiết lập một cửa hàng trực tuyến và bắt đầu bán sản phẩm của bạn ngay khi bạn hoàn thành. Avada cung cấp hỗ trợ toàn diện và tích hợp thiết kế cho WooC Commerce, cho phép bạn tạo cửa hàng trong mơ của mình đồng thời đảm bảo nó trông chính xác theo khung hình mà bạn nghĩ đến.  

Avada hoàn toàn tập trung vào việc cung cấp cho bạn khả năng tùy chỉnh giao diện trang web của bạn, điều này không khác gì tích hợp WooC Commerce. Bằng cách sử dụng mạng tùy chọn nâng cao phổ biến của chúng tôi, bạn có thể chọn từ hàng loạt tùy chỉnh cho nhiều khả năng thiết kế khác nhau, bao gồm:

• WooC Commerce có Bảng tùy chọn toàn cầu Avada riêng, tách biệt với Bảng tùy chọn toàn cầu Avada chính.
• Tùy chọn trang Avada có sẵn cho mỗi sản phẩm.
• Avada Builder cho phép bạn tạo thiết kế trang sản phẩm bằng cách kéo và thả các phần tử.

Để xây dựng trang web thương mại điện tử của bạn với Avada. 

Đầu tiên, chúng ta phải cài đặt WooC Commerce trong Avada.

• Cài đặt WooC Commerce – Hướng dẫn từng bước
• Cách chỉ định một trang cửa hàng cho trang web của bạn
• Tạo sản phẩm của bạn
• Tạo hiệu ứng Zoom sản phẩm
• Điều chỉnh cài đặt kích thước hình ảnh sản phẩm trong WooC Commerce.

Cài đặt WooC Commerce – Hướng dẫn từng bước

Đi tới Avada > Plugin / Tiện ích bổ sung và tìm plugin , như trong ảnh chụp màn hình bên dưới.

Bước 1 – Cài đặt plugin .

Bước 2 – Chọn 'Cài đặt' từ menu thả xuống.

plugin sẽ được cài đặt và kích hoạt tự động.

Bước 3 – Sau đó, Trình hướng dẫn thiết lập WooC Commerce sẽ được hiển thị. Nếu bạn đang nhập một trong các bản demo Woo của chúng tôi, chẳng hạn như Cửa hàng hiện đại hoặc Cửa hàng cổ điển, bạn có thể bỏ qua bước này mà không gặp rủi ro mất dữ liệu. Để bỏ qua phần tiếp theo, hãy chọn 'Không phải bây giờ' từ trình đơn thả xuống. Nếu bạn không nhập một trong các bản demo Woo của chúng tôi, hãy chuyển sang bước tiếp theo bằng cách nhấp vào 'Bắt ​​đầu!' để bắt đầu quá trình thiết lập.

Bước 4 – Làm theo lời nhắc và hướng dẫn trên màn hình để hoàn tất quy trình và nhập thông tin cần thiết về cửa hàng của bạn. Bằng cách nhấp vào nút 'Tạo sản phẩm đầu tiên của bạn' khi hoàn tất, bạn sẽ có thể tiến hành tạo sản phẩm đầu tiên của mình. Ngoài ra, bạn có thể quay lại Bảng điều khiển WordPress của mình bằng cách nhấp vào liên kết nằm bên dưới cửa sổ thiết lập.

Cách chỉ định một trang cửa hàng cho trang web của bạn

Là một phần của quy trình cài đặt WooC Commerce thông thường, Trình hướng dẫn thiết lập sẽ được khởi chạy, cho phép bạn định cấu hình cửa hàng của mình và chỉ định các trang cửa hàng của bạn cho khách hàng. Bạn có thể tìm thêm thông tin về các trang mà Trình hướng dẫn thiết lập tạo trong tài liệu WooC Commerce này.

Ngoài ra, nếu Trình hướng dẫn thiết lập không xuất hiện hoặc nếu bạn hủy nó vì bất kỳ lý do gì, bạn luôn có thể quay lại Trình hướng dẫn thiết lập bằng cách chọn Trình hướng dẫn thiết lập từ menu Trợ giúp trên bất kỳ trang WooC Commerce nào, có thể tìm thấy ở phía trên bên trái của cửa sổ.

Bạn có thể đặt trang cửa hàng theo cách thủ công bằng cách đi tới tab Sản phẩm trong Cài đặt WooC Commerce – WooC Commerce > Cài đặt > Sản phẩm – và chọn trang sẽ là trang cửa hàng chính từ menu thả xuống. WooC Commerce sau đó sẽ hiển thị các sản phẩm của bạn trên trang này do hành động của bạn.

Các trang còn lại có thể được định cấu hình trong Tab nâng cao, được tìm thấy tại WooC Commerce > Cài đặt > Nâng cao .

Tạo sản phẩm của bạn

Bước 1 – Trên thanh bên Quản trị viên WordPress của bạn, điều hướng đến tab Sản phẩm > Thêm sản phẩm.

Bước 2 – Ở đầu trang, nhập tên sản phẩm của bạn.

Bước 3 – Điền vào trường nội dung bài đăng bằng văn bản từ mô tả sản phẩm. Mọi thông tin về sản phẩm sẽ được hiển thị ở phần này.

Bước 4 – Điền vào ô “ Dữ liệu sản phẩm ” với tất cả thông tin sản phẩm. Ví dụ amp giá cả, SKU và vận chuyển đều là những lựa chọn có thể thực hiện được.

Bước 5 – Trong hộp ' Mô tả ngắn gọn về sản phẩm ', nhập mô tả ngắn gọn về sản phẩm sẽ xuất hiện cùng với hình ảnh chính của bạn.

Bước 6 –Hình ảnh nổi bật chính phải được đặt trong hộp ' Hình ảnh Sản phẩm ' ở phía bên phải của trang; Điều này phải được hoàn thành cho mỗi sản phẩm.

Bước 7 –Thêm nhiều hình ảnh hơn vào hộp “ Product Gallery ” nếu bạn muốn sử dụng một bộ sưu tập hình ảnh thay vì một hình ảnh duy nhất.

Bước 8 – Trong hộp ' Danh mục sản phẩm ', nhập danh mục áp dụng cho sản phẩm của bạn. Tiếp theo, điền vào chỗ trống các thẻ thích hợp cho sản phẩm của bạn trong hộp “ Thẻ sản phẩm ”.

Bước 9 – Khi bạn đã nhập tất cả thông tin cần thiết, hãy nhấp vào nút ' Xuất bản ' và mặt hàng sẽ xuất hiện trên trang chủ cửa hàng chính của bạn.

Tạo hiệu ứng Zoom sản phẩm

Nếu bạn đang sử dụng Avada Layouts, bạn cần đảm bảo rằng tùy chọn Thu phóng hình ảnh sản phẩm WooC Commerce được bật trong Avada > Tùy chọn > WooC Commerce > Chung WooC Commerce > Tùy chọn thu phóng hình ảnh sản phẩm WooC Commerce hoặc trong tab Chung về phần tử hình ảnh sản phẩm Woo > Thu phóng hình ảnh sản phẩm nếu bạn đang sử dụng Bố cục WooC Commerce.

Chiều rộng hình ảnh sản phẩm WooC Commerce – Chiều rộng hình ảnh chính của bạn (xem cài đặt bên dưới) và kích thước thực tế của hình ảnh được tải lên đều cần phải lớn hơn Avada > Tùy chọn > WooC Commerce > WooC Commerce chung > Chiều rộng hình ảnh sản phẩm WooC Commerce hoặc cài đặt Độ rộng tối đa của hình ảnh sản phẩm trong Phần tử hình ảnh sản phẩm Woo. Chiều rộng của cột vùng chứa cho một thư viện sản phẩm sẽ được xác định bởi cài đặt bạn chọn. Khi bạn đã thực hiện các điều chỉnh cần thiết, bạn sẽ sẵn sàng đặt chiều rộng cho hình ảnh chính WooC Commerce của mình.

Chiều rộng hình ảnh chính của WordPress – Cài đặt Chiều rộng hình ảnh chính của WooC Commerce có thể được tìm thấy trong Trình tùy chỉnh của trang web WordPress của bạn. Từ bảng điều khiển WordPress, điều hướng đến Giao diện > Tùy chỉnh > WooC Commerce > Hình ảnh sản phẩm , nơi bạn sẽ tìm thấy cài đặt Chiều rộng hình ảnh chính; Điều này sẽ xác định kích thước thực tế của hình ảnh được hiển thị trong thư viện.

Hiệu ứng thu phóng của bạn càng chi tiết thì kích thước hình ảnh bạn đặt cho hình ảnh của mình càng lớn. Để làm rõ, nếu kích thước hình ảnh trong cài đặt WooC Commerce khớp với chiều rộng hình ảnh trong tùy chọn chung của Avada, thì sẽ không hiển thị thu phóng khi chuột di chuột qua hình ảnh trên trang. Ngoài ra, kích thước của hình ảnh thực tế bạn tải lên phải bằng hoặc lớn hơn cài đặt Chiều rộng hình ảnh chính trên thiết kế trang web của bạn.

Đảm bảo rằng bạn tạo lại hình thu nhỏ của mình sau khi thay đổi kích thước hình ảnh WooC Commerce; Điều này sẽ áp dụng kích thước hình ảnh mới của bạn cho bất kỳ hình ảnh nào đã được tải lên trang web của bạn. Bạn có thể sử dụng plugin Tạo lại hình thu nhỏ để thực hiện việc này.

Điều chỉnh cài đặt kích thước hình ảnh sản phẩm trong WooC Commerce.

WooC Commerce bao gồm các tùy chọn để điều chỉnh kích thước hình ảnh sản phẩm trong phần Danh mục và Hình ảnh một sản phẩm của cửa hàng. Ngoài ra, còn có các cài đặt Avada cụ thể hoạt động cùng với kích thước hình ảnh được cửa hàng WooC Commerce của bạn sử dụng. Khi định cấu hình các cài đặt kích thước hình ảnh này, điều quan trọng cần nhớ là các cài đặt tùy chọn chung của Avada cũng phải được xem xét. Chúng ta sẽ xem xét từng tùy chọn này một cách chi tiết hơn sau này.

Giả sử hình ảnh bạn tải lên cho sản phẩm của mình tại nguồn nhỏ hơn kích thước hình ảnh được chỉ định trong cài đặt WooC Commerce của bạn. Trong trường hợp đó, bạn có thể nhận thấy một số khác biệt về bố cục hình ảnh ở giao diện người dùng của trang cửa hàng; Đây không phải là một lỗi trong bất kỳ cách nào. Đơn giản là vì hình ảnh của bạn quá nhỏ nên cài đặt WooC Commerce không thể tác động đến chúng. Bạn có thể coi các cài đặt này là chiều rộng và chiều cao tối đa cho hình ảnh của mình về kích thước hình ảnh. Mọi thứ nằm dưới giới hạn đã chỉ định sẽ không được thay đổi kích thước.

Khi định cấu hình cửa hàng của bạn, hãy đảm bảo rằng cả cài đặt kích thước hình ảnh WooC Commerce và kích thước thực tế của hình ảnh đều được xem xét. Tóm lại, hình ảnh của bạn phải có cùng kích thước hoặc lớn hơn cài đặt kích thước hình ảnh trong cửa hàng WooC Commerce của bạn.

Mọi thay đổi đối với cài đặt kích thước hình ảnh sẽ yêu cầu bạn tạo lại hình thu nhỏ để chúng có hiệu lực đối với những hình ảnh đã được tải lên trang web của bạn. Do đó, việc sử dụng plugin Regenerate Thumbnails rất được khuyến khích. Ngoài ra, kích thước hình ảnh có thể được điều chỉnh bằng các bước dưới đây:

Bước 1 – Trong thanh bên quản trị của bạn, hãy điều hướng tab ' Giao diện ' và sau đó là tab ' Tùy chỉnh ' để bắt đầu tùy chỉnh trang web của bạn.

Bước 2 – Điều hướng đến tab ' WooC Commerce ' ở đầu trang.

Bước 3 – Bạn có thể tìm thấy cài đặt Hình ảnh cho Hình ảnh Sản phẩm Đơn lẻ trong tab ' Hình ảnh Sản phẩm ' của cửa sổ cấu hình.

Bước 4 – Khi bạn tải hình ảnh lên các trang sản phẩm riêng lẻ của mình, hãy chọn tùy chọn chiều rộng hình ảnh chính. Chiều rộng hình thu nhỏ là chiều rộng của hình thu nhỏ cho các sản phẩm của bạn trong danh mục. Điền vào chỗ trống với giá trị chiều rộng mong muốn của bạn.

Bước 5 –Để tạo lại hình thu nhỏ sau khi bạn đã thay đổi kích thước hình ảnh và lưu chúng, bạn sẽ cần sử dụng plugin , có thể tìm thấy trong Plugin . plugin Tạo lại hình thu nhỏ , sau đó điều hướng đến Quản trị viên WP > Công cụ , nơi bạn có thể chọn tạo lại hình thu nhỏ của hình ảnh, tạo kích thước hình ảnh mới.