Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Tăng tốc độ WordPress
    • Tối ưu website WordPress
    • Thiết kế website WordPress
    • Viết plugin WordPress
    • Sửa lỗi nâng cấp website
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Wordpress » Thay đổi hiển thị breadcrumbs của woocommerce wordpress theme

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

Thứ Tư, 10/09/2014 by Hoàng Quách

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

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.

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook

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

Bài viết liên quan:

  1. Cách dùng woocommerce theme options
  2. Tùy biến giá cho sản phẩm trong woocommerce
  3. Thêm custom fields cho variation product trong woocommerce
  4. Hướng dẫn tạo variation product trong woocommerce
  5. WooCommerce – Tự động thêm sản phẩm vào giỏ hàng khi truy cập vào website
  6. Redirect URL sau khi nhấn add to cart [WooCommerce]
  7. Thay đổi layout tùy biến template trong woocommerce
  8. Thêm currency đơn vị tiền tệ cho quốc gia với woocommerce
  9. Thay đổi giao diện template cho woocommerce
  10. Hiển thị (sale flash) % chiết khấu cho sản phẩm – WooCommerce

Chuyên mục: Wordpress Tìm kiếm: breadcrumb, Woocommerce, wordpress plugins

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Comments

  1. Thinh says

    Chủ Nhật, 24/05/2020 at 6:02 chiều

    Bác cho em hỏi làm thế nào để đoạn cuối của breadcrumb (hình như là wrap_after) trỏ url về chính danh mục hoặc sản phẩm mà trang đang hiển thị nhỉ

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • Snapchat

SẢN PHẨM

  • Plugin Auto-Sync Google Shopping cho WooCommerce
  • Phần mềm chặn click ảo
  • WP2Speed.com – Tăng tốc WordPress

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2021 | 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.