Phân Trang Ajax & Cuộn Vô Hạn

Phần mở rộng Ajax Pagination & Infinite Scroll cho phép tùy chỉnh điều hướng trang web thông qua phân trang, cuộn vô hạn hoặc nút tải thêm.

1. Tải về tệp Ajax Pagination & Infinite Scroll for WooCommerce .zip từ tài khoản WooCommerce của bạn.
2. Chuyển đến WordPress Admin > Plugins > Add New and Upload Plugin > Choose File (cho tệp đã được tải xuống).
3. Install Now và Activate các phần mở rộng.

Cấu hình

Trong bảng quản trị WP, đi đến WooCommerce > Settings và nhấp vào tab Woo Pagination . Bạn sẽ tìm thấy các cài đặt phần mở rộng, bao gồm cài đặt chung, quay lại trên cùng và cài đặt nút hiển thị ít hơn.

Cài đặt chung

Trong phần cài đặt chung, bạn sẽ tìm thấy các cài đặt sau.

• Enable Woo pagination plugin from general settings: Nhấp vào hộp kiểm để kích hoạt phần mở rộng Pagination Ajax & Infinite Scroll cho plugin WooCommerce.
• Select the product loading type : Chọn loại tải sản phẩm từ menu thả xuống. Trong menu thả xuống, bạn sẽ tìm thấy các mục sau:
  • Phân trang
  • Cuộn vô hạn
  • Nút tải thêm

Khi bạn chọn loại tải sản phẩm là “ pagination ,” các cài đặt sau sẽ xuất hiện:

• Choose the number of products to load or display initially : Nhập số sản phẩm bạn muốn hiển thị khi trang tải.
• Choose pagination type : Chọn loại phân trang bạn muốn hiển thị. Từ menu thả xuống, bạn có thể chọn các loại sau:
  • Mũi tên
  • Kế tiếp/Trước
• Choose pagination style : Chọn kiểu phân trang để tải thêm sản phẩm. Bạn có thể chọn các mục sau từ menu thả xuống:
  • Liên kết được chọn nổi bật
  • Số lượng lớn liên kết
  • Nhập do người dùng
  • Phân trang góc tròn
  • Ứng dụng liên kết phân trang
  • Ứng dụng đơn giản
  • Liên kết Kế tiếp & Trước
• Choose pagination location: Chọn nơi bạn muốn hiển thị kiểu phân trang. Bạn có thể chọn:
  • Bên trái
  • Bên phải
  • Ở giữa
• Base color : Chọn màu cơ bản của kiểu phân trang.
• Hover color : Chọn màu khi di chuột lên phân trang.
• Active color : Chọn màu cho trang đang hoạt động trong phân trang.
• Text color : Chọn màu cho văn bản trong phân trang.

Infinite scroll settings

Bạn sẽ thấy các cài đặt sau nếu bạn chọn Cuộn vô hạn là loại tải sản phẩm.

• Choose the number of products to load or display initially : Nhập số sản phẩm bạn muốn hiển thị khi trang tải.
• Upload loading icon : Kích hoạt hộp kiểm để tải lên biểu tượng tải sản phẩm.
• Product loading icon : Chọn biểu tượng tải sản phẩm từ các biểu tượng mặc định.
• Choose the number of products after which the footer will show, and you can load more if you want : Nhập số sản phẩm sau đó chân trang trang web sẽ được hiển thị, và bạn có thể tải thêm.

Load more button settings

Khi bạn chọn loại tải sản phẩm là nút tải thêm, bạn sẽ phải cấu hình các cài đặt sau:

• Choose the number of products to load or display initially : Nhập số sản phẩm bạn muốn hiển thị khi trang tải.
• Upload loading icon : Kích hoạt hộp kiểm để tải lên biểu tượng tải sản phẩm.
• Product loading icon : Chọn biểu tượng tải sản phẩm từ các biểu tượng mặc định.
• Choose product loading animation : Bạn có thể chọn từ nhiều hoạt ảnh về cách tải sản phẩm mới. Chọn kiểu hoạt hình từ menu thả xuống, bao gồm:
  • Mặc định
  • Từ trái sang phải
  • Từ phải sang trái
  • Từ trên xuống dưới
  • Từ dưới lên trên
• Background color (for button) : Chọn màu nền cho nút tải thêm.
• Background hover color (for button) : Chọn màu bạn muốn đặt khi di chuột lên nút tải thêm.
• Text color : Chọn màu của văn bản trên nút tải thêm.
• Text color on mouse-hover : Chọn màu khi di chuột lên nút tải thêm.
• Custom text for button (by default, load more) : Nhập văn bản bạn muốn hiển thị trên nút. Theo mặc định, văn bản trên nút được đặt là “ Load More. ”

Cài đặt trở lại nút top

Trong phần này, bạn có thể cấu hình các cài đặt sau cho plugin phân trang WooCommerce.

• Enable the back-to-top option : Kiểm tra để kích hoạt tùy chọn quay lại đầu trang trên trang web của bạn.
• Choose icon : Chọn biểu tượng cho nút quay lại đầu trang. Bạn có thể chọn từ nhiều biểu tượng mặc định.
• Choose color : Chọn màu cho nút quay lại đầu trang bằng bảng chọn màu.
• Icon position : Chọn nơi bạn muốn hiển thị nút quay lại đầu trang. Bạn có thể chọn các mục sau từ menu thả xuống:
  • Ở dưới bên phải
  • Dưới trái
• Background color : Chọn màu nền cho nút quay lại đầu trang.
• Border color : Chọn màu viền cho nút.

Chỉ số bên dưới thiết lập nút hiển thị

Phần “Thiết lập nút hiển thị ít hơn” cho phép bạn cấu hình các cài đặt sau. Lưu ý rằng nút này sẽ được hiển thị nếu loại tải sản phẩm là “nút tải thêm” trong tab cài đặt chung.

• Enable the “Show Less” button : Nhấp vào hộp kiểm để kích hoạt nút “Hiển thị ít hơn”.
• Text on button (show less by default) : Nhập văn bản bạn muốn hiển thị trên nút “hiển thị ít hơn”. Theo mặc định, văn bản là “Hiển thị ít hơn”.
• Background color : Chọn màu nền cho nút.
• Background color on mouse-hover : Chọn màu nền trong trường hợp di chuột lên nút “hiển thị ít hơn”.
• Text color : Chọn màu của văn bản cho nút.
• Text color on mouse-hover : Chọn màu khi di chuột lên nút “Hiển thị ít hơn”.
• Border color : Chọn màu viền cho nút hiển thị ít hơn bằng cách sử dụng bảng chọn màu.