Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Thiết kế web giá rẻ
    • Thiết kế website WordPress
    • Hosting Miễn Phí 100GB
    • Tích hợp thanh toán MoMo, ViettelPay, Vietcombank, MB..
    • Tối ưu Google PageSpeed
    • Sửa lỗi nâng cấp website
    • Viết plugin WordPress
    • Code Tool theo yêu cầu
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Wordpress » Thay đổi giao diện template cho woocommerce

Thay đổi giao diện template cho woocommerce

Thứ Năm, 11/09/2014 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

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.

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Chuyên mục: Wordpress, Wordpress plugins Tìm kiếm: web bán hàng, Woocommerce, wordpress plugins

Tôi giúp gì cho bạn?

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 – 0868 292 303 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • GitHub
  • YouTube

SẢN PHẨM

  • Plugin Thanh Toán Quét Mã QR Code Tự Động
  • WP2Speed – Tối ưu Google Speed
  • 23WebHost – Hosting Miễn Phí 100GB

LIÊN KẾT

  • Có nên thuê thiết kế website giá rẻ?
  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2023 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.