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 » Wordpress plugins » Thay đổi layout tùy biến template trong woocommerce

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

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

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

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 vị trí có trên một web bán hàng đầy đủ 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.

<?php
/**
 * woocommerce_before_main_content hook
 *
 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
 * @hooked woocommerce_breadcrumb - 20
 */
do_action( 'woocommerce_before_main_content' );

?>

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 '<section id="main hwwrapper">';
}

Chú giải có ghi rõ thứ tự nội dung đã thêm vào hook woocommerce_before_main_content. Trong đó ‘breadcrumb’ ở vị trí 20 do đó các bạn thêm wrapper ở vị trí nhỏ hơn 20 tức thẻ mở wrapper sẽ ở trên nội dung breadcrumb. Tuy nhiên nên để chính xác ở vị trí 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 tiếp 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ỉ còn breadcrumb.

<div id="wrapper">
<?php
/**
 * woocommerce_before_main_content hook
 *
 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
 * @hooked woocommerce_breadcrumb - 20
 */
do_action( 'woocommerce_before_main_content' );
?>
....

Cách này không khuyến khích mình chỉ ví 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 '</section>';
}

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.

<?php
	/**
	 * woocommerce_after_main_content hook
	 *
	 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
	 */
	do_action( 'woocommerce_after_main_content' );
?>

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 cách khai báo hàm và gọi hàm trực tiếp. Ví dụ : hàm woocommerce_product_loop_start() và woocommerce_product_loop_end trả về thẻ bao mở và đóng mỗi nội dung sản phẩm trong danh sách liệt kê các sản phẩm của danh mục hoặc trang shop.

Những hàm này được tạo sẵn trong woocomerce, tuy nhiên 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: cách này gọi 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 '<div class="fixed-layout multicolumns-list table-width clearfix">';
}
function woocommerce_product_loop_end(){
	echo '</div>';
}

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:

.....
<?php woocommerce_product_loop_start(); ?>

	<?php woocommerce_product_subcategories(); ?>

	<?php while ( have_posts() ) : the_post(); ?>

		<?php wc_get_template_part( 'content', 'product' ); ?>

	<?php endwhile; // end of the loop. ?>
	<div class="clearfix"></div>
<?php woocommerce_product_loop_end(); ?>
.....

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 một website bán hàng khi 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 đó 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 cách tạo mới trong functions.php.

function woocommerce_output_content_wrapper_end(){
	echo '</div><br/>';
}

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

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể nhận được sự trợ giúp 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.