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 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é.

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