Lập trình web Tự học WooCommerce toàn tập WordPress

Thêm mới sản phẩm đơn giản với WooCommerce

Đây là một phần khá là quan trọng trong Series Tự học WooCommerce toàn tập mà tôi đang biên tập, để có thể áp dụng kiến thức trong bài Thêm mới sản phẩm đơn giản với WooCommerce thì bạn cần phải biết cách Tạo mới danh mục , bởi vì một sản phẩm đơn giản được đăng lên website sẽ phải thỏa các điều kiện như là phải bắt buộc có hình ảnh, danh mục, giá tiền, mã sản phẩm, và các sản phẩm này sẽ không có các thuộc tính đi kèm.

Cài đặt giao diện mới có hỗ trợ WooCommerce

Trước khi đăng sản phẩm lên website thì bạn cần phải lựa chọn giao diện phù hợp và cài đặt nó, themes Travelity tôi sẽ sử dụng nó, bạn có thể click vào đường dẫn trên tìm đến themes mà tôi vừa đề cập và tiến hành dowload nhé.

Cách cài đặt giao diện thì quá đơn giản,nhưng ở đây tôi sẽ hướng dẫn sơ để cho bạn nào mới tìm hiểu WordPress thì vẫn có thể cài đặt được giao diện.

Sau khi bạn dowload về bạn sẽ có một file .zip, và lúc này việc của bạn cần là phải đăng nhập vào trang quản trị và sau đó di chuyển chuột theo chỉ mục Giao diện hoặc đường dẫn http://localhost/wordpress/wp-admin/themes.php. lúc này trình duyệt sẽ hiển thị danh sách toàn bộ các themes.

Thêm mới sản phẩm đơn giản với WooCommerce

 

Để cài đặt mới themes thủ công thì bạn click vào button Thêm mới, và trình duyệt sẽ chuyển bạn tới một trang và giao diện của trang sẽ là.

Thêm mới sản phẩm đơn giản với WooCommerce

Lúc này bạn click vào button Tải giao diện lên thì bạn sẽ nhận được giao diện như sau.

Thêm mới sản phẩm đơn giản với WooCommerce

Việc lúc này bạn chỉ cần click vào button Browse và lựa chọn file .zip mà lúc nãy bạn dowload về, sau đó click vào button Cài đặt và chờ đợi trong giây lát để hệ thống tự xả nén file ra và tự động cài đặt themes cho bạn.

Việc còn lại khá là đơn giản, bạn chỉ cần kích hoạt giao diện thôi là hoàn tất quá trình cài đặt themes Travelity. Và đây là giao diện trang chủ của themes Travelity.

Thêm mới sản phẩm đơn giản với WooCommerce

Phần giao diện xem như xong, kế tiếp thì chúng ta sẽ bắt tay vào công việc chính là đăng mới vài sản phẩm và cho hiển thị ra ngoài trang chủ.

Thêm mới sản phẩm đơn giản

Để thêm mới sản phẩm thì bạn sẽ đi theo chỉ mục Sản phẩm -> Thêm sản phẩm , và giao diện hiển thị trang thêm sản phẩm cũng không khác gì trang thêm bài viết mới mặc định của WordPress, chỉ khác ở chỗ là có thêm vài metboxes hỗ trợ trang trí phần bài viết.

Thêm mới sản phẩm đơn giản với WooCommerce

Phía dưới khung nội dung này sẽ là phần tab metaboxes dùng để nhập dữ liệu sản phẩm vào.

Thêm mới sản phẩm đơn giản với WooCommerce

Bạn thấy đấy, phần sản phẩm thì WooCommerce đã thiết lập mặc định là kiểu Sản phẩm đơn giản cho bạn rồi đấy, sau đây tôi sẽ liệt kê một số metaboxes nằm ở phía bên tay như là.

  • Danh mục sản phẩm
  • Từ khóa sản phẩm
  • Ảnh tiêu biểu
  • Thư viện hình ảnh sản phẩm

Thêm mới sản phẩm đơn giản với WooCommerce

Với các metabox này thì tôi chỉ giải thích mỗi metaboxes cuối cùng, có nghĩa là một sản phẩm sẽ được upload nhiều hình ảnh, để upload nhiều hình ảnh cho sản phầm thì bạn cần sử dụng metaboxes này.

Ok, để thêm sản phẩm thì tôi sẽ phải tạo danh mục, chẳng hạn như là Áo thun nam, còn bạn muốn tạo danh mục với tên gì thì tùy bạn nha.

Tôi sẽ tạo mới sản phẩm có tên là Áo thun trắng và dữ liệu sản phẩm của tôi như sau, ở đây bạn chỉ cần quan tâm tới phần thiết lập ở trong cái tab metabox là đủ rồi, vì các phần còn lại khá đơn giản và quen thuộc với bạn.

Thêm mới sản phẩm đơn giản với WooCommerce

Sau đó tôi click vào button Đăng bài viết, và ra ngoài trang chủ F5 lại xem kết quả có đúng như sự kỳ vọng của tôi hay không. Và chắc chắn rằng bạn F5 cả chục lần cũng không thấy sản phẩm hiển thị ra đâu, lý do WooCommerce là một Page , và mặc định của nó là Page Shop, nếu bạn muốn biết sản phẩm đã được đăng hay chưa thì phải click vào menu Shop nằm trên thanh ngang menu, hoặc theo đường đẫn http://localhost/wordpress/shop. Và đây là kết quả tôi nhận được khi đang ở trong page Shop.

Thêm mới sản phẩm đơn giản với WooCommerce

Và đây chỉ mới là Page hiển thị toàn bộ danh sách sản phẩm, còn click vào Page chi tiết sản phẩm thì hình thù nó ra sao ? tò mò quá phải không nào. Để xem được trang chi tiết thì bạn click chuột vào hình thì trình duyệt sẽ tự động chuyển bạn tới trang chi tiết, và giao diện của em nó sẽ là…

Thêm mới sản phẩm đơn giản với WooCommerce

Wow, quá chuyên nghiệp đúng không bạn tuy đây chỉ mới là dạng sản phẩm đơn giản thôi đấy, lúc này bạn click vào các hình thì sẽ hiển thị các lightbox rất là bắt mắt, phần thiết lập lightbox thì tôi đã hướng dẫn bạn cách bật rồi nha.

Lời kết

Cách Thêm mới sản phẩm đơn giản với WooCommerce thì bạn thấy có khó không nào,  chỉ cần vài thao tác là bạn dễ dàng đưa một sản phẩm lên website rồi, tuy nhiên đây chỉ là một dạng sản phẩm bình thường và nó vẫn chưa thiết lập một số thông tin quan trọng khác, cũng như chưa có thiết lập các thuộc tính sản phẩm, ở bài tiếp theo thì tôi sẽ hướng dẫn bạn một số thủ thuật khi sử dụng WooCommerce.

Series Navigation<< Thêm mới các thuộc tính sản phẩm trong WooCommerceThêm mới sản phẩm nâng cao với WooCommerce >>
Nguồn: laptrinhweb.org