Thay đổi layout tùy biến template trong woocommerce

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Thay đổi layout tùy biến template trong woocommerce

WooCommerce phân chia dữ liệu vào hooks, mỗi nhóm chức năng quản lý vào mỗi hook đại diện cho thứ tự các địa thế có trên một web bán sản phẩm đầy đặn và để hiển thị dữ liệu của tính năng nào bạn chỉ việc gọi hook tương ứng vào template. Trong bài này bạn sẽ học cách tùy biến nội dung trong woocommerce.

Tạo thẻ wrapper bởi hooks

Ví dụ thẻ HTML bao ngoài toàn bộ nội dung chính của woocommerce, bắt đầu với tính năng breadcrumb. Theo thiết kế này chúng ta có hook woocommerce_before_main_content chứa thẻ mở wrapper ( woocommerce_output_content_wrapper ) và breadcrumb ( woocommerce_breadcrumb ).
Mở archive-product.php bạn sẽ tìm thấy dòng.

     

Mặc định lấy tag DIV làm thẻ mở wrapper. Để đổi lại thẻ HTML khác, chúng ta sẽ loại bỏ hàm action woocommerce_output_content_wrapper cũ và thêm mới vào hook woocommerce_before_main_content .

 remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10); add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10); function my_theme_wrapper_start() { echo ' 
'; }

Chú giải có ghi rõ thứ tự nội dung đã thêm nữa hook woocommerce_before_main_content. Trong đó ‘breadcrumb’ ở địa thế 20 do đó các bạn thêm wrapper ở vị trí nhỏ hơn 20 tức thẻ mở wrapper sẽ phía trên nội dung breadcrumb. Tuy nhiên nên để chính xác ở địa thế 10 cho wrapper. Giả sử nếu như trong hook bạn có thêm một vài nội dung xen giữa khác vào các nội dung thiết lập của hook thì cũng không ảnh hưởng gì.

Cách khác, bạn là thêm trực diện HTML vào woocommerce template file, ví dụ: archive-product.php. Giữ nguyên dòng xóa woocommerce_output_content_wrapper, thay vị thêm hàm my_theme_wrapper_start bạn viết thẳng thẻ mở wrapper vào file. Như vậy woocommerce_before_main_content chỉ từ breadcrumb.

  
....

Cách này không khuyến khích mình chỉ tỉ dụ cho bạn hiểu những cách làm đều cho ra kết quả tương tự.
Tương tự cho thẻ đóng wrapper.

 remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10); add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10); function my_theme_wrapper_end() { echo ''; }  

Hiển thị thẻ đóng trong woocommerce template, ví dụ archive-product.php, đặt ở cuối nội dung tại vị trí thích hợp trong website của bạn.

     

Tạo thẻ wrapper bởi hàm

Plugin cũng sử dụng phương cách tạo wrapper khác, bằng phương pháp khai báo hàm và gọi hàm trực tiếp. Ví dụ : hàm woocommerce_product_loop_start() woocommerce_product_loop_end trả về thẻ bao mở và đóng mỗi nội dung mặt hàng trong bản kê liệt kê các mặt hàng của danh mục hoặc trang shop.

Những hàm này được tạo sẵn trong woocomerce, tuy vậy bạn có thể thay những hàm này bởi nội dung khác bằng phương thức định nghĩa các hàm đó trước khi load nội dung của plugin woocommerce: phương pháp này xem là override.

Bạn có thể tạo mới hàm ‘woocommerce_product_loop_start’, ‘woocommerce_product_loop_end’ trong functions.php

 function woocommerce_product_loop_start(){ echo ' 
'; } function woocommerce_product_loop_end(){ echo '
'; }

Bạn sẽ thấy có gọi những hàm này trong template woocommerce/archive-product.php giống thế này:

 .....                    .....  

Quay trở lại cách gọi hooks trong woocommerce, những hàm hook PHP tạo bởi woocommerce sử dụng trong việc xây dựng template cấu thành nên nội dung hoàn chỉnh của 1 website bán đồ lúc xem trên trình duyệt.
Bản chất hook là gọi hàm callback, ví dụ: Hook woocommerce_after_main_content sẽ gọi các hàm callback đăng ký vào nó, trong đấy có ‘woocommerce_output_content_wrapper_end’. Do vậy, chúng ta có thể thay đổi nội dung của woocommerce_output_content_wrapper_end bằng phương pháp tạo mới trong functions.php.

 function woocommerce_output_content_wrapper_end(){ echo ' 
'; }

Trong bài sau, mình sẽ đi chi tiết vào các phần tử của woocommerce. Nếu thấy bài viết hữu ích với bạn xin nhấn like cỗ vũ nhé.

Bài viết Thay đổi layout tùy biến template trong woocommerce được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang