Chào các bạn, trong quá trình làm website thì thỉnh thoảng mình có làm được một số tiện ích nho nhỏ để trang trí thêm cho website cũng như giúp cho website trở nên hữu ích hơn với người dùng. Trong số đó, hôm nay mình sẽ gợi ý và hướng dẫn các bạn tạo form lấy số điện thoại đẹp bên dưới ảnh thumnail trong trang chi tiết sản phẩm Woocommerce nha.
Bài viết trên cơ sở hướng dẫn các bạn mới làm web nên mình sẽ cố gắng viết thật chi tiết bao gồm cả hình ảnh để các bạn làm theo. Bài viết hoàn toàn sử dụng các kỹ năng HTML và CSS chứ không có gì phức tạp nên hy vọng những bạn không biết code cũng có thể tự làm được.
Bài viết hướng dẫn cụ thể trên theme Flatsome, nếu bạn dùng theme Flatsome thì làm theo 100% là OK nha, các bạn sử dụng theme khác thì thực tế có thể không giống các bước mình chỉ dưới đây:
Bước 1: Cài đặt plugin Contact Form 7
Plugin Contact Form 7 thì quá quen thuộc rồi mình cũng không cần giới thiệu nhiều. Các bạn vào Quản trị – Plugin – Cài mới – Contact Form 7 – Cài đặt và Active.
Bước 2: Cấu hình Form
Sau khi cài đặt thành công plugin, các bạn vào mục Contact Form – Tạo form mới.
Tab nội dung form: các bạn copy và paste toàn bộ nội dung dưới đây:
Bước 3: Chèn code vào function.php
Các bạn vào mục Giao diện – sửa theme – Function.php và paste đoạn code này vào nha:
Bước 4: Thay ID Contact form vào đoạn shortcode
Đoạn code các bạn vừa copy vào function.php bên trên nó chứa shortcode gọi contact form có ID=643. Đây là form trong trường hợp của mình. Còn đối với các bạn khi tạo Contact Form sẽ có ID và tiêu đề khác nên buộc phải thay vào mới được nha.
Ngoài ra, các bạn cũng có thể tải hình ảnh icon tai nghe về, sau đó upload lên host và thay url icon của các bạn vào nha!
Như vậy là chúng ta đã tiến hành làm xong form lấy SĐT bên dưới gallerry sản phẩm rồi, chúc các bạn thực hiện thành công. Nếu có khó khăn gì vui lòng nhắn tin mình sẽ hướng dẫn nhé!
-
Hướng dẫn sửa giao diện menu mobile trong theme Flatsome bằng CSS
-
Hướng dẫn tạo các nút liên hệ nhanh tuyệt đẹp cho website
-
Tạo menu riêng cho từng trang trong theme Flatsome
-
Tạo Contact Button đẹp cho website sử dụng HTML và CSS
-
Cảnh giác web dính virut khi khôi phục xong không gỡ plugin Duplicator
- Hướng dẫn tạo các nút liên hệ nhanh tuyệt đẹp cho website
- Thêm hiệu ứng ánh sáng khi hover ảnh sản phẩm Woocommerce bằng CSS
- Hướng dẫn sửa giao diện menu mobile trong theme Flatsome bằng CSS
- Thêm hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome
- Top các trang web kiểm tra tốc độ website
- Code chèn Hotline và chat Facebook vào chân trang trên giao diện mobile cho website