Woocommerce là một framework làm web bán hàng trong wordpress rất tuyệt vời, nó có đầy đủ mọi tính năng đáp ứng của một web bán hàng chuyên nghiệp quy mô vừa và nhỏ. Trong bài hôm nay mình sẽ hướng dẫn các bạn cách tùy biến breadcrumb của woocommerce.

Mọi thành phần dữ liệu cài đặt trong woocommerce đều sử dụng hooks, với breadcrumbs chúng ta có hook “woocommerce_breadcrumb_defaults“. Thêm filter sau đây vào theme functions.php để thay đổi thuộc tính hiển thị breadcrumb.
Ví dụ sau thay đổi chuỗi mặc định “Home” ở đầu.

add_filter( 'woocommerce_breadcrumb_defaults', 'jk_change_breadcrumb_home_text' );
function jk_change_breadcrumb_home_text( $defaults ) {
    // Change the breadcrumb home text from 'Home' to 'Appartment'
	$defaults['home'] = 'Appartment';
	return $defaults;
}

Ngoài ra bạn có thể sửa mọi thành phần có trên breadcrumb như trail/delimiter, thẻ bao mỗi breadcrumb, bao ngoài ở filter trên. Bạn có thể print giá trị tham số mảng $defaults để biết chi tiết.

Array
(
    [delimiter] =>  / 
    [wrap_before] => <nav class="woocommerce-breadcrumb" itemprop="breadcrumb">
    [wrap_after] => </nav>
    [before] => 
    [after] => 
    [home] => Appartment
)

Ví dụ khác thay đổi breadcrumb separator/delimiter/trail.

add_filter( 'woocommerce_breadcrumb_defaults', 'jk_change_breadcrumb_delimiter' );
function jk_change_breadcrumb_delimiter( $defaults ) {
	// Change the breadcrumb delimeter from '/' to '>'
	$defaults['delimiter'] = ' &gt; ';
	return $defaults;
}

Hoặc thay đổi tất cả.

add_filter( 'woocommerce_breadcrumb_defaults', 'jk_woocommerce_breadcrumbs' );
function jk_woocommerce_breadcrumbs() {
    return array(
            'delimiter'   => ' &#47; ',
            'wrap_before' => '<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">',
            'wrap_after'  => '</nav>',
            'before'      => '',
            'after'       => '',
            'home'        => _x( 'Home', 'breadcrumb', 'woocommerce' ),
        );
}

Để thay đổi URL của home trên woocommerce breadcrumb đến địa chỉ URL khác, chúng ta sử dụng hook “woocommerce_breadcrumb_home_url” như sau.

add_filter( 'woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url' );
function woo_custom_breadrumb_home_url() {
    return 'http://woothemes.com';
}

Nếu không muốn dùng breadcrumb trên trang web nữa thì remove action “woocommerce_breadcrumb” trong chuỗi actions của “woocommerce_before_main_content“.

add_action( 'init', 'jk_remove_wc_breadcrumbs' );
function jk_remove_wc_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}

Lưu ý: những kiến thức trong loạt bài hướng dẫn sử dụng woocommerce mình viết trên bản free, không phải wootheme premium.

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