Cấu trúc thư mục Templates của Woocommerce
Đây là nội dung quan trọng khi thiết kế website bán hàng để bạn có thể hiểu được cách có thể tùy biến sâu một giao diện có sử dụng chức năng Thương mại điện tử với Woocommerce.
Trước tiên, thư mục /Woocommerce/Templates là một thư mục thuộc Plugin Woocommerce. Khi bạn muốn custom nó, bạn phải copy toàn bộ thư mục /templates này về giao diện của bạn và đổi tên từ /tamplates thành /woocommerce.
Nhớ là: Chỉ copy thư mục /templates chứ không copy y chang /Woocommerce/Templates nhé.
Bây giờ, MDIGI sẽ giải thích cho bạn chi tiết nội dung từng template bên trong các thư mục.
Chứa các tệp mẫu liên quan đến việc xác thực và đăng nhập của người dùng. Những tệp này quản lý các giao diện và chức năng liên quan đến quá trình đăng nhập, đăng ký và khôi phục mật khẩu cho khách hàng trên trang web của bạn. Dưới đây là các tệp thường thấy trong thư mục /auth
và chức năng của chúng:form-login.php
Tệp này chứa mẫu cho trang đăng nhập của WooCommerce. Nó hiển thị các trường cần thiết để người dùng nhập tên đăng nhập hoặc email và mật khẩu, cùng với nút để đăng nhập.
Chức năng: Quản lý giao diện đăng nhập cho người dùng, bao gồm các liên kết để khách hàng có thể khôi phục mật khẩu hoặc tạo tài khoản mới nếu họ chưa có.form-lost-password.php
Tệp này chứa mẫu cho trang khôi phục mật khẩu. Nó cung cấp các trường để người dùng nhập email của họ và nhận hướng dẫn khôi phục mật khẩu qua email.
Chức năng: Giúp khách hàng lấy lại mật khẩu nếu họ quên, bằng cách gửi email hướng dẫn khôi phục mật khẩu.form-reset-password.php
Tệp này chứa mẫu cho trang đặt lại mật khẩu. Khi người dùng nhấp vào liên kết đặt lại mật khẩu trong email, họ sẽ được chuyển hướng đến trang này để đặt mật khẩu mới.
Chức năng: Cho phép khách hàng đặt lại mật khẩu của họ bằng cách nhập mật khẩu mới và xác nhận mật khẩu đó.form-register.php
Tệp này chứa mẫu cho trang đăng ký tài khoản mới. Nó hiển thị các trường cần thiết để người dùng nhập thông tin đăng ký như tên người dùng, email, và mật khẩu.
Chức năng: Quản lý giao diện đăng ký cho người dùng mới, giúp họ tạo tài khoản mới trên trang web.
Hướng dẫn tùy chỉnh
Để tùy chỉnh các tệp này mà không ảnh hưởng đến khả năng cập nhật plugin, bạn nên sao chép chúng vào thư mục theme của bạn. Ví dụ, để tùy chỉnh form-login.php
, bạn sẽ sao chép tệp này vào thư mục sau trong theme của bạn:your-theme/woocommerce/auth/form-login.php
Thư mục block-notices trong thư mục templates của WooCommerce chứa các tệp mẫu liên quan đến việc hiển thị các thông báo (notices) và thông điệp (messages) cho người dùng trong quá trình tương tác với các khối (blocks) trên trang web. Những thông báo này có thể bao gồm các cảnh báo, thông tin, hoặc lỗi xảy ra trong quá trình người dùng thực hiện các hành động như thêm sản phẩm vào giỏ hàng, cập nhật giỏ hàng, hoặc thanh toán.
Các tệp thường có trong thư mục block-notices
error.php
Tệp này chứa mẫu để hiển thị các thông báo lỗi.
Chức năng: Khi có lỗi xảy ra (ví dụ: khi người dùng cố gắng thêm sản phẩm vào giỏ hàng nhưng không thành công), tệp này sẽ hiển thị thông báo lỗi tương ứng.notice.php
Tệp này chứa mẫu để hiển thị các thông báo thông tin.
Chức năng: Dùng để hiển thị các thông báo thông tin cho người dùng. Ví dụ, thông báo rằng sản phẩm đã được thêm vào giỏ hàng thành công.success.php
Tệp này chứa mẫu để hiển thị các thông báo thành công.
Chức năng: Khi một hành động của người dùng thành công (ví dụ: hoàn tất thanh toán), tệp này sẽ hiển thị thông báo thành công tương ứng.
Hướng dẫn Tùy chỉnh
Giống như các tệp mẫu khác trong WooCommerce, bạn có thể tùy chỉnh các tệp trong thư mục block-notices
bằng cách sao chép chúng vào thư mục theme của bạn và chỉnh sửa. Ví dụ, để tùy chỉnh error.php
, bạn sẽ sao chép tệp này vào thư mục sau trong theme của bạn:
Các tập tin template liên quan đến hiển thị giỏ hàng.cart-empty.php
– Hiển thị giỏ hàng trống.cart-item-data.php
– Hiển thị biến thể bên trong giỏ hàng.cart-shipping.php
– Hiển thị khu vực chọn kiểu giao nhận trong giỏ hàng.cart-total.php
– Hiển thị hộp tính tổng giỏ hàng.cart.php
– Hiển thị cả giỏ hàng.cross-sell.php
– Hiển thị sản phẩm bán chéo.mini-cart.php
– Hiển thị giỏ hàng mini ở widget.process-to-checkout-button.php
– Nút chuyển qua trang thanh toán.shipping-calculator.php
– Hiển thị hộp tính phí giao nhận trong giỏ hàng.
Thư mục này chứa các tập tin template hiển thị phần thanh toán.cart-errors.php
– Hiển thị trang giỏ hàng bị lỗi.form-billing.php
– Hiển thị các form nhập thông tin hóa đơn của khách hàng.form-checkout.php
– Cấu trúc toàn bộ form trang thanh toán.form-coupon.php
– Hiển thị form nhập mã ưu đãi.form-login.php
– Hiển thị form đăng nhập.form-pay.php
– Hiển thị phần trả tiền, bao gồm phần tổng kết giỏ hàng và phần chọn phương thức thanh toán.form-shipping.php
– Hiển thị khung nhập địa chỉ nhận hàng.payment-method.php
– Hiển thị nút chọn phương thức thanh toán.payment.php
– Hiển thị thông tin các phương thức thanh toán và nút đặt hàng.review-order.php
– Hiển thị phần xem lại hóa đơn.thankyou.php
– Hiển thị trang cám ơn sau khi thanh toán xong.
Chứa các template và thư mục hiển thị email thông báo của Woocommerce.
Thư mục Emails/plain/ – Template hiển thị email dạng chữ thông thường.admin-cancelled-order.php
– Nội dung email báo đơn hàng bị hủy cho admin.admin-new-order.php
– Nội dung email thông báo đơn hàng mới cho admin.customer-completed-order.php
– Nội dung email thông báo đơn hàng đã hoàn thành cho khách hàng.customer-invoice.php
– Nội dung email thông báo hóa đơn cho khách hàng.customer-new-account.php
– Nội dung email thông báo thông tin tài khoản mới cho khách hàng.customer-note.php
– Nội dung email thông báo có ghi chú mới vừa thêm vào hóa đơn cho khách hàng.customer-processing-order.php
– Nội dung email thông báo đơn hàng đang xử lý cho khách hàng.customer-refunded-order.php
– Nội dung email thông báo đơn hàng đã được hoàn trả.customer-reset-password.php
– Nội dung email thông báo khôi phục mật khẩu cho khách hàng.email-addresses.php
– Phần hiển thị địa chỉ trong email.email-footer.php
– Phần hiển thị footer trong email.email-order-items.php
– Phần hiển thị các sản phẩm của đơn hàng trong email.email-styles.php
– CSS của email.
Các template hiển thị các thành phần trên toàn bộ các trang của Woocommerce.breadcrumb.php
– Hiển thị thanh điều hướng.form-login.php
– Hiển thị form đăng nhập.quantity-input.php
– Hiển thị trường chọn số lượng.sidebar.php
– Hiển thị sidebar của Woocommerce.wrapper-end.php
– Hiển thị phần kết thúc của phần tử bao quanh cấu trúc trang.wrapper-start.php
– Hiển thị phần bắt đầu của phần tử bao quanh cấu trúc trang.
Toàn bộ các phần tử trong vòng lặp hiển thị sản phẩm của Woocommerce.add-to-cart.php
– Nút thêm vào giỏ hàng.loop-end.php
– Phần tử kết thúc vòng lặp, chỉ có mỗi thẻ <ul> trong đó hehe.loop-start.php
– Phần tử bắt đầu vòng lặp.no-product-found.php
– Dòng hiển thị không tìm thấy sản phẩm.order.php
– Khung hiển thị kiểu sắp xếp hiển thị sản phẩm.pagination.php
– Hiển thị phần phân trang.price.php
– Hiển thị giá.rating.php
– Hiển thị cái đánh giá sản phẩm.result-count.php
– Hiển thị số đếm két quả.sale-flash.php
– Hiển thị cái nhãn hiển thị chữ SALE trên sản phẩm khi sản phẩm đó được giảm giá.title.php
– Hiển thị tiêu đề sản phẩm.
Các template hiển thị phần tài khoản trong Woocommerce.form-add-payment-method.php
– Form hiển thị trang thêm phương thức thanh toán.form-edit-account.php
– Hiển thị form sửa tài khoản.form-edit-address.php
– Hiển thị form sửa email.form-login.php
– Form đăng nhập.form-lost-password.php
– Form quên mật khẩu.my-account.php
– Template hiển thị trang My Account.my-address.php
– Template hiển thị trang My Address.my-downloads.php
– Template hiển thị phần các sản phẩm đã mua có thể download.my-orders.php
– Template hiển thị phần My orders.view-order.php
– Template hiển thị trang xem đơn hàng trong trang tài khoản.
form-tracking.php
– Form theo dõi đơn hàng.order-again.php
– Hiển thị phần đặt lại đơn hàng.order-details-customer.php
– Hiển thị thông tin chi tiết khách hàng trong đơn hàng.order-details-item.php
– Hiển thị thông tin chi tiết sản phẩm trong đơn hàng.order-details.php
– Hiển thị thông tin chi tiết của đơn hàng.tracking.php
– Hiển thị trang theo dõi đơn hàng.
Đây là thư mục chứa các template html mẫu, không quá quan trọng.
Các template hiển thị các phần tử trong trang hiển thị chi tiết các sản phẩm. Đây là một template hay được sử dụng và tùy biến nhiều nhất. Trong thư mục này bao gồm 2 thư mục con là /add-to-cart/ và /tabs/ cùng nhiều template con:
11. 1 Thư mục add-to-cart/ – Các template hiển thị nút thêm vào giỏ hàng trong trang chi tiết sản phẩm.
– exernal.php
– Nút thêm vào giỏ hàng đối với sản phẩm liên kết ngoài.
– grouped.php
– Nút thêm vào giỏ hàng đối với sản phẩm được nhóm.
– simple.php
– Nút thêm vào giỏ hàng với sản phẩm đơn giản.
– variable.php
– Nút thêm vào giỏ hàng với sản phẩm chứa biến thể.
11.2. Thư mục /tabs/: Các template hiển thị nội dung của tab thông tin trong sản phẩm.
– additonal-information.php
– Tab hiển thị thông tin thêm của sản phẩm.
– description.php
– Tab hiển thị mô tả sản phẩm.
– tabs.php
– Cấu trúc các tab.
11.3. Các template quan trọng khác:meta.php
– Hiển thị phần thông tin meta của sản phẩm như danh mục, từ khóa,…price.php
– Hiển thị giá.product-attributes.php
– Hiển thị thuộc tính sản phẩm.product-image.php
– Hiển thị hình ảnh sản phẩm.product-thumbnails.php
– Hiển thị các hình ảnh gallery của sản phẩm.rating.php
– Hiển thị phần đánh giá điểm sao.related.php
– Hiển thị phần sản phẩm liên quan.review.php
– Hiển thị danh sách đánh giá khách hàng.sale-flash.php
– Hiển thị nhãn hiển thị chứ Sale.share.php
– Hiển thị phần chia sẻ sản phẩm lên mạng xã hội.short-description.php
– Hiển thị phần mô tả ngắn.title.php
– Hiển thị tiêu đề.up-sells.php
– Hiển thị sản phẩm bán thêm.
archive-product.php
– Template hiển thị cấu trúc trang lưu trữ của sản phẩm.content-product.php
– Template hiển thị cấu trúc nội dung hiển thị sản phẩm được gọi từ archive-product.php.content-product_cat.php
– Template hiển thị cấu trúc nội dung sản phẩm trong category.content-single-product.php
– Template hiển thị cấu trúc nội dung hiển thị trong trang chi tiết một sản phẩm.content-widget-product.php
– Cấu trúc hiển thị nội dung sản phẩm trong widget.product-searchform.php
– Cấu trúc hiển thị form tìm sản phẩm.single-product-reviews.php
– Cấu trúc hiển thị danh sách đánh giá của khách hàng trong trang chi tiết sản phẩm.single-product.php
– Cấu trúc hiển thị trang chi tiết một sản phẩm.taxonomy-product_cat.php
– Cấu trúc hiển thị trang danh mục sản phẩm.taxonomy-product_tag.php
– Cấu trúc hiển thị trang từ khóa sản phẩm.
Trong các template này sẽ có những hook action, bạn hiểu đơn giản nó là những điểm móc giống như móc treo tường có sẵn. Khi cần thiết bạn sẽ có thể móc bất cứ gì vào để trang trí hoặc thêm tính năng cho template – Giống như móc 1 chậu cây, quần áo, nón…lên móc vậy.
Thực tế trong quá trình Woocommerce cập nhật thì nhà phát triển sẽ thêm hoặc bỏ đi folder hoặc template nào đó. Ở phương diện giới thiệu thì chúng tôi nghĩ rằng nó là đủ để bạn có thể hiểu được cách mà Woocommerce cấu trúc template của họ.
Bùi Mạnh Đức
Phần khó hơn nữa là có thể hiểu được mã nguồn, thư viện các hàm của Woocommerce thì chúng tôi xin hẹn quý độc giả vào một bài viết tiếp theo.
Xin cám ơn và chúc quý vị nhiều sức khỏe.
Lưu ý:
*Thông tin trong bài viết đều là những kiến thức chuyên môn và kinh nghiệm thực tế của đội ngũ sáng tạo tại MDIGI . Mọi hành vi sao chép vui lòng ghi trích dẫn nguồn MDIGI.vn! Xem Điều khoản & điều kiện của Chúng tôi.
*Cập nhật mới nhất ngày: 09/08/2024