Nếu bạn muốn tùy chỉnh giao diện Woocommerce trên trang web của mình mà không mất đi khi cập nhật phiên bản, hãy tham khảo cách tùy chỉnh hiển thị của Woocommerce thông qua cấu trúc template.
Tìm hiểu về template của Woocommerce
Các template của Woocommerce là những tập tin mẫu để thiết lập cấu trúc hiển thị của Woocommerce trên trang web của bạn. Khi bạn xem một sản phẩm, những phần bạn nhìn thấy đều được hiển thị bởi template mà Woocommerce đã cấu hình sẵn. Đôi khi, bạn muốn thay đổi cách hiển thị của những phần đó và bạn cần chỉnh sửa template.
Bạn đang xem: [Woocommerce] Cấu trúc template của Woocommerce
Xem thêm : UI UX Là Gì? Điểm Khác Biệt Giữa Thiết Kế UI Và UX
Thư mục chứa các template mặc định của Woocommerce là /wp-content/plugins/woocommerce/templates/
. Tất cả các tập tin trong thư mục này đều là template hiển thị, bao gồm tất cả những gì bạn cần.
Nếu bạn chưa hiểu ý nghĩa của các tập tin và thư mục bên trong, hãy xem giải nghĩa dưới đây:
auth/
– Chưa biết 😀cart/
– Các tập tin template liên quan đến hiển thị giỏ hàngcart-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.
checkout/
– 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.
emails/
– Các template hiển thị email thông báo của Woocommerce.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.
global/
– 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.
loop/
– 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.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ị đánh giá sản phẩm.result-count.php
– Hiển thị số lượng kết quả.sale-flash.php
– Hiển thị nhãn hiển thị chữ SALE trên sản phẩm khi giảm giá.title.php
– Hiển thị tiêu đề sản phẩm.
myaccount/
– Các template hiển thị phần tài khoản trong Woocommerce.form-add-payment-method.php
– Form 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 địa chỉ email.form-login.php
– Form đăng nhập.form-lost-password.php
– Form quên mật khẩu.my-account.php
– Template trang My Account.my-address.php
– Template trang My Address.my-downloads.php
– Template phần các sản phẩm đã mua có thể tải về.my-orders.php
– Template phần My Orders.view-order.php
– Template trang xem đơn hàng trong tài khoản.
notices/
– Các template hiển thị thông báo.error.php
– Thông báo lỗi.notice.php
– Thông báo.success.php
– Thành công.
order/
– Các template hiển thị đơn hàng.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.
single-product/
– Các template hiển thị phần tử trong trang chi tiết các sản phẩm.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.external.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ể.
tabs/
– Các template hiển thị nội dung của tab thông tin trong sản phẩm.additional-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.
meta.php
– Hiển thị 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ị đánh giá điểm sao.related.php
– Hiển thị 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ị 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 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 danh mục.content-single-product.php
– Template hiển thị cấu trúc nội dung hiển thị 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.
Xem thêm : Thiết kế website Đà Nẵng chuyên nghiệp – chuẩn SEO
Vậy là bạn đã hiểu cấu trúc template của Woocommerce và việc tùy biến trở nên dễ dàng hơn. Hy vọng bài viết này có thể giúp bạn tùy chỉnh giao diện Woocommerce theo ý của mình mà không gặp sự cố.
Bài viết này chỉ dành cho người đã có hiểu biết cơ bản về PHP và sử dụng HTML/CSS. Cuối cùng, việc tùy biến phụ thuộc vào khả năng và ý tưởng của bạn.
Nguồn: https://laptrinhc.edu.vn
Danh mục: Web