Thay đổi giao diện template cho woocommerce

Giao diện hiển thị shop của Woocommerce nằm tại thư mục plugin /plugins/woocommerce/templates , vì shop framework này là plugin nên không thể sử dụng tính năng child theme trong wordpress để tạo và kế thừa theme từ woocommerce được.
Tuy nhiên Có hai cách tùy biến giao diện trang web bán hàng với woocommerce đó là sử dụng hooks và chèn đè (override) Woocommerce Template Files.

Có thể kết hợp cả 2 cách này bạn sẽ linh hoạt khi xây dựng giao diện trang web bán hàng một cách chuyên nghiệp.
Trong các bài trước các bạn đã biết cách làm việc với woocommerce hooks như thế nào, điển hình có bài “tùy biến hiển thị breadcrumbs trong woocommerce” là một ví dụ về sử dụng hooks trong việc sửa đổi nội dung tạo bởi plugin này.

Cách thứ 2 thì đơn giản hơn, bạn chỉ việc copy file template của plugin woocommerce bạn muốn sửa đổi vào trong thư mục themes của bạn tại folder mới có tên “woocommerce” và giữ nguyên cấu trúc thư mục của template đó.
Ví dụ: bạn muốn sửa đổi trang giỏ hàng, rất đơn giản bạn copy file /plugins/woocommerce/cart/cart.php đến thư mục themes/your-theme/woocommerce/cart/cart.php
Lưu ý: Tạo thêm thư mục theo đúng cấu trúc của file bạn cần chỉnh sửa.

Nhưng để xây dựng woocommerce theme một cách nhẹ nhàng và thuận tiện tôi đề nghị bạn dùng cả 2 cách trên, đọc bài override template trong woocommerce để hiểu hơn.

Woocommerce có giao diện style CSS mặc định khá chuyên nghiệp, tuy nhiên bạn có thể viết CSS mới cho thành phần woocommerce và bỏ qua CSS mặc của plugin. Để làm điều này, bạn thêm dòng sau vào theme functions.php

define('WOOCOMMERCE_USE_CSS', false);

Ở các bài học sau, chúng ta sẽ học cách tùy chỉnh nhiều hơn với woocommerce.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook