Thay đổi hiển thị breadcrumbs của woocommerce wordpress theme

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'] = ' > ';
	return $defaults;
}

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

add_filter( 'woocommerce_breadcrumb_defaults', 'jk_woocommerce_breadcrumbs' );
function jk_woocommerce_breadcrumbs() {
    return array(
            'delimiter'   => ' / ',
            '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.

Lập trang web kinh doanh

Chuyên cung cấp dịch vụ thiết kế WebSite đẹp, Thân Thiện, Chuẩn SEO, Giá Cực Rẻ. Liên hệ ngay với chúng tôi để được tư vấn và hỗ trợ miễn phí. Phục vụ 24/7.

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.