Hướng dẫn tạo thanh chức năng bottom cho website wordpress

Có bạn nào muốn làm thanh bottom bar như hình và video mô tả bên dưới không, chúng ta cùng thử làm nhé! Xem demo view mobile: https://ngocbaolong.vn

tao-thanh-chuc-nang-bottom-cho-website-1

Điểm đặc biệt

Đây là tính năng nhỏ nhưng khá thú vị và nếu đưa vào website của bạn trông sẽ chuyên nghiệp hơn đó! Điểm đặc biệt ở đây là các icon sẽ không phải link bình thường, nhưng được tích hợp thêm tính năng sẵn có của theme Flatsome đối với nút “Danh mục” và “Giỏ hàng.

  • Khi bấm nút “Danh mục” sẽ xổ ra menu mobile
  • Khi bấm nút “Giỏ hàng” sẽ xổ ra sidebar chứa giỏ hàng.

Bài viết thực hiện trên theme Flatsome, theme khác có thể không hoạt động đúng như ý. Lưu ý đặc biệt, để ấn vào nút “Giỏ hàng” hoạt động được, bạn phải cài plugin Woocommerce và phải đưa element Cart lên Header main trong giao diện mobile nha!

Bước 1: Copy code thanh chức năng

Các bạn copy toàn bộ phần code này vào footer script của website nhé. Cài đặt Advanced Flatsome – Global setting – Footer Script.

Giuseart.com---Chèn-code-tùy-biến-vào-footer-script

Bước 2: Thay đường dẫn icon ảnh

Các bạn lần lượt tải các icon dưới đây về, upload lên website, copy URL của anh và thay thế vào vị trí tương ứng mình đánh dấu dưới đây:

  1. Icon trang chủ: https://ngocbaolong.vn/wp-content/uploads/2023/07/home-svgrepo-com-1.svg
  2. Icon danh mục: https://ngocbaolong.vn/wp-content/uploads/2023/07/document-text-svgrepo-com.svg
  3. Icon cửa hàng: https://ngocbaolong.vn/wp-content/uploads/2023/07/shop-2-svgrepo-com.svg
  4. Icon giỏ hàng: https://ngocbaolong.vn/wp-content/uploads/2023/07/cart-large-minimalistic-svgrepo-com.svg
  5. Icon nút lên trên: https://ngocbaolong.vn/wp-content/uploads/2023/07/top-circle-svgrepo-com.svg
Hướng dẫn tạo thanh chức năng bottom cho website wordpress
Thay thế url ảnh vào các vị trí tương ứng được đánh số

Bước 3: Trang trí với CSS

Copy và Paste đoạn code sau vào phần Giao diện – Tùy biến – Style – Custom CSS – Custom CSS (để set CSS cho PC)

Copy và Paste đoạn code sau vào phần Giao diện – Tùy biến – Style – Custom CSS – Custom CSS Mobile (để set CSS cho mobile)

Bước 4: Lưu lại và hưởng thành quả

Các bạn lưu lại và ra xem đã OK chưa nhé, nếu có vấn đề gì xin cứ bình luận để mình trợ giúp nhé!

Lượt xem: 13

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *