[Woocommerce] Cấu trúc template của Woocommerce [NEW]



Nếu bạn là người không hiểu ngôn ngữ PHP hoặc HTML / CSS, bạn có thể bỏ qua phần này vì tôi nói thật, bạn sẽ không thể làm bất cứ điều gì trong mẫu nếu bạn không biết những điều trên. Nhưng nếu bạn đã có những kiến ​​thức đó và có nhu cầu tùy chỉnh hiển thị của Woocommerce trên website thì có thể tham khảo thêm để có thể tùy chỉnh giao diện Woocommerce hợp lý, không bị mất công khi cập nhật phiên bản.

Tìm hiểu về các mẫu Woocommerce

Các mẫu của Woocommerce là các tệp mẫu để thiết lập cấu trúc hiển thị của nó bên ngoài trang web. Ví dụ: khi bạn truy cập một sản phẩm, những gì bạn thấy trong đó được hiển thị theo mẫu mà Woocommerce đã cấu hình sẵn. Và một điều hiển nhiên, chúng ta muốn thay đổi cách hiển thị các phần đó, thì chúng ta sẽ chỉnh sửa mẫu.

Các mẫu Woocommerce mặc định sẽ được lưu trong thư mục / wp-content / plugins / woocommerce / templates / và tất cả các tệp trong đó đều có các mẫu hiển thị, mọi thứ đều ở trong đó.

[Woocommerce] Cấu trúc template của Woocommerce [NEW]

Danh sách các mẫu Woocommerce

Nếu bạn không hiểu ý nghĩa của các tệp và thư mục bên trong, tôi giải thích như sau:

  • Auth / – Không biết: D
  • xe đẩy/ – Các tệp mẫu liên quan đến hiển thị giỏ hàng
    • cart-rỗng.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 hình thức giao hàng trong giỏ hàng.
    • cart-total.php – Hiển thị hộp tổng giỏ hàng.
    • cart.php – Trưng bày toàn bộ giỏ hàng.
    • bán chéo.php – Trưng bày các sản phẩm bán chéo.
    • mini-cart.php – Hiển thị giỏ hàng mini trong widget.
    • process-to-checkout-button.php – Nút chuyển sang trang thanh toán. Nhưng nó cũng lại bị nhồi nhét vào một khuôn mẫu.
    • shipping-Calculator.php – Hiển thị ô tính phí giao hàng trong giỏ hàng.
  • Thủ tục thanh toán/ – Các tệp mẫu hiển thị phần thanh toán.
    • cart-error.php – Hiển thị lỗi trang giỏ hàng.
    • form-billing.php – Hiển thị các biểu mẫu nhập thông tin hóa đơn của khách hàng.
    • form-checkout.php – Cấu trúc của toàn bộ hình thức trang thanh toán.
    • form-coupon.php – Hiển thị biểu mẫu nhập mã phiếu mua hàng.
    • form-login.php – Hiển thị biểu mẫu đăng nhập.
    • form-pay.php – Hiển thị phần thanh toán, bao gồm tóm tắt giỏ hàng và lựa chọn phương thức thanh toán.
    • form-shipping.php – Hiển thị ô nhập địa chỉ nhận hàng.
    • pay-method.php – Hiển thị nút chọn phương thức thanh toán.
    • Payment.php – Hiển thị thông tin về phương thức thanh toán và nút đặt hàng.
    • review-order.php – Hiển thị xem xét hóa đơn.
    • thankyou.php – Hiển thị trang cảm ơn sau khi thanh toán xong.
  • email / – Các mẫu hiển thị thông báo qua email của Woocommerce.
    • đơn giản/ – Mẫu hiển thị email dưới dạng văn bản thuần túy.
    • admin -cel-order.php – Nội dung email thông 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-complete-order.php – Nội dung email thông báo cho khách hàng đã hoàn thành đơn hàng.
    • khách hàng-hóa đơn.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 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 được xử lý của khách hàng.
    • khách hàng-hoàn-trả-đặt-hàng.php – Nội dung email thông báo đơn hàng đã được hoàn tiền.
    • 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-address.php – Phần hiển thị địa chỉ trong email.
    • email-footer.php – Hiển thị chân trang 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.
  • toàn cầu/ Mẫu hiển thị các phần tử trên tất cả các trang Woocommerce.
    • breadcrumbs.php – Hiển thị thanh điều hướng.
    • form-login.php – Hiển thị biểu mẫu đăng nhập.
    • number-input.php – Hiển thị trường để chọn số lượng.
    • sidebar.php – Hiển thị thanh bên của Woocommerce.
    • wrapper-end.php – Hiển thị phần cuối của phần tử bao quanh cấu trúc trang.
    • wrapper-start.php – Hiển thị phần đầu của phần tử bao quanh cấu trúc trang.
  • vòng/ – Tất cả các phần tử trong vòng hiển thị sản phẩm Woocommerce.
    • add-to-cart.php – Thêm vào nút giỏ hàng.
    • loop-end.php – Phần tử kết thúc vòng lặp, chỉ với
        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 trưng bày kiểu sắp xếp trưng bày sản phẩm.
      • pagination.php – Hiển thị phân trang.
      • price.php – Giá hiển thị.
      • 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 sản phẩm đó đang được giảm giá.
      • title.php – Hiển thị tiêu đề sản phẩm.
    • tài khoản của tôi/ – Các mẫu hiển thị phần tài khoản trong Woocommerce.
      • form-add-Payment-method.php – Biểu mẫu hiển thị trang để thêm phương thức thanh toán.
      • form-edit-account.php – Hiển thị biểu mẫu để chỉnh sửa tài khoản.
      • form-edit-address.php – Hiển thị biểu mẫu chỉnh sửa email.
      • form-login.php – Mẫu đăng nhập.
      • form-lost-password.php – Quên mật khẩu hình thức.
      • my-account.php – Mẫu hiển thị trang Tài khoản của tôi.
      • my-address.php – Mẫu hiển thị trang Địa chỉ của tôi.
      • my-download.php – Mẫu hiển thị phần sản phẩm đã mua có thể tải xuống.
      • my-order.php – Mẫu hiển thị phần Đơn hàng của tôi.
      • view-order.php – Mẫu hiển thị trang xem đơn hàng trong trang tài khoản.
    • thông báo / – Các mẫu hiển thị thông báo.
      • error.php – Thông báo lỗi.
      • thông báo.php – Thông báo.
      • thành công.php – Tin nhắn thành công.
    • gọi món/ – Đặt hàng các mẫu hiển thị.
      • form-tracking.php – Phiếu 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ị 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.
    • một sản phẩm / – Mẫu hiển thị các yếu tố trong trang chi tiết sản phẩm.
      • thêm vào giỏ hàng/ – Các mẫu 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 cho các sản phẩm liên kết bên ngoài.
        • grouped.php – Nút Thêm vào giỏ hàng cho các sản phẩm đã được nhóm.
        • simple.php – Nút thêm vào giỏ hàng đơn giản với sản phẩm.
        • biến.php – Thêm vào nút giỏ hàng với sản phẩm có chứa biến thể.
      • tab / – Các mẫu 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êm thông tin 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ủa các tab.
      • meta.php Hiển thị thông tin meta sản phẩm như danh mục, từ khóa, v.v.
      • price.php – Giá hiển thị.
      • product-properties.php – Hiển thị các thuộc tính của sản phẩm.
      • product-image.php – Hiển thị hình ảnh sản phẩm.
      • product-thumbnails.php – Trưng bày hình ảnh thư viện của sản phẩm.
      • rating.php – Hiển thị phần xếp hạng sao.
      • liên quan.php – Hiển thị phần sản phẩm liên quan.
      • review.php – Hiển thị danh sách các đánh giá của khách hàng.
      • sale-flash.php – Hiển thị nhãn hàng trưng bày, nhưng Bán hàng.
      • share.php – Hiển thị chia sẻ sản phẩm trên mạng xã hội.
      • short-description.php – Hiển thị một đoạn mô tả ngắn.
      • title.php – Hiển thị tiêu đề.
      • up-sell.php – Trưng bày nhiều sản phẩm bán chạy hơn.
    • archive-product.php – Mẫu hiển thị cấu trúc trang lưu trữ 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 – Mẫu hiển thị cấu trúc nội dung sản phẩm trong danh mục.
    • content-single-product.php – Mẫu hiển thị cấu trúc nội dung hiển thị trong một trang chi tiế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ị biểu mẫu tìm kiế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 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.

    Và nếu bạn xem qua mã của những mẫu đó, chắc chắn bạn sẽ thấy rằng việc tùy chỉnh Woocommerce dễ dàng hơn bạn nghĩ rất nhiều.

    Cách tùy chỉnh một mẫu Woocommerce an toàn

    Như bạn thấy, các mẫu mặc định sẽ nằm trong thư mục plugin và bạn cũng có thể chỉnh sửa trực tiếp ở đó, nhưng nó sẽ biến mất và trở về mặc định khi bạn cập nhật lên phiên bản Woocommerce mới.

    Vì vậy, để tùy chỉnh lại mẫu mà không làm mất nó, bạn sẽ cần sao chép thư mục / wp-content / plugins / woocommerce / template vào thư mục chủ đề hiện đang được sử dụng trên blog, sau đó đổi tên thư mục mẫu trong thư mục chủ đề thành woocommerce. Nếu bạn chưa nghe được, hãy xem video.

    Sao chép thư mục mẫu từ plugin sang chủ đề và đổi tên nó thành woocommerce

    Sao chép thư mục mẫu từ plugin sang chủ đề và đổi tên nó thành woocommerce

    Và bây giờ, các mẫu sẽ sử dụng các tệp bên trong chủ đề thay vì tải từ plugin, vì vậy nếu bạn cần tùy chỉnh bất cứ điều gì, chỉ cần chỉnh sửa mẫu bên trong thư mục chủ đề.

    Cách đọc mẫu của Woocommerce

    Khi tùy chỉnh mẫu của Woocommerce, ngoài đoạn mã PHP thuần khá dễ hiểu trong các thư mục con bên trong các mẫu, nó còn có một số khai báo hook mà nhiều bạn có thể không hiểu.

    Ví dụ khi tôi mở mẫu archive-product.php Sau đó, bạn sẽ thấy đoạn sau:


    <?php
    /**
    * woocommerce_before_shop_loop hook
    *
    * @hooked woocommerce_result_count – 20
    * @hooked woocommerce_catalog_ordering – 30
    */
    do_action( ‘woocommerce_before_shop_loop’ );
    ?>

    Nó chỉ có một đoạn đó và không có thêm mã để chúng tôi tùy chỉnh. Nhưng nếu bạn dành thời gian để đọc, họ đã nhận xét rất rõ ràng trong các dòng @hookednghĩa là, nó khai báo hàm nào đang nối hook này.

    Action hook mà chúng tôi biết nó sẽ được tạo bởi các hàm do_action() mà chúng ta có thể dễ dàng thấy trong đoạn mã trên rằng nó tạo ra hook woocommerce_before_shop_loop ngay tại vị trí đó. Và những nhận xét ở trên là những chức năng mà nó đang gắn vào hook này. Ví dụ:


    * @hooked woocommerce_result_count – 20
    * @hooked woocommerce_catalog_ordering – 30

    Hàm ý nghĩa woocommerce_result_count() đang được nối vào hook này với số ưu tiên là 20. Và để biết hàm đó được khai báo ở đâu, cách nhanh nhất là xem https://docs.woothemes.com/wc-apidocs/, chẳng hạn như tôi sẽ tìm thấy hàm số woocommerce_result_count.

    woocommerce-template-03

    Sau khi tìm hiểu, chúng ta sẽ xem gói đó thuộc về gói nào trong tài liệu và quan trọng là tệp nào khai báo nó (Đặt vị trí tại).

    woocommerce-template-04

    Nhấp vào liên kết Tọa lạc tại, chúng ta sẽ thấy mã khai báo nó.

    woocommerce-template-05

    Nhìn vào đoạn mã, chúng ta có thể dễ dàng hiểu được hàm này sẽ có chức năng hiển thị mẫu loop / result-count.php trong thư mục mẫu vì hàm wc_get_template() được sử dụng để tải các mẫu Woocommerce và nó sẽ ưu tiên các tệp mẫu bên trong thư mục chủ đề.

    Chà, bây giờ suy ra rằng chúng ta muốn chỉnh sửa nội dung của hàm này để chuyển đến các mẫu. danh mục/loop/result-count.php, xong rôi. Các tệp khác cũng làm như vậy, khi bạn gặp hàm wc_get_template() sau đó hiểu rằng nó gọi tệp trong thư mục mẫu đó.

    Thực ra bài hướng dẫn này mình viết cho những bạn đã có kiến ​​thức về lập trình PHP và sử dụng HTML / CSS nên mình sẽ không viết chi tiết hơn. Phần còn lại là do bạn tùy chỉnh.

    Trong bài tiếp theo, tôi sẽ nói về một số action hook và filter của Woocommerce để giúp chúng ta dễ dàng làm việc.

    4/5 – (4 bình chọn)

    Tiếp tục đọc trong bộ truyện