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é!

Lời kết

Cám ơn các bạn đã quan tâm theo dõi và ủng hộ GiuseArt.com trong suốt thời gian qua. Chúc các bạn có những trải nghiệm thú vị khi ghé thăm website. Mọi nhu cầu thiết kế, in ấn và làm website, vui lòng liên hệ admin để được tư vấn nhiệt tình:

Thông tin liên hệ

+ Liên hệ: Lê Văn Thiện
+ Phone: 0972939830
+ Email: [email protected]
+ Website: www.giuseart.com
+ Flickr: www.flickr.com/photos/77493237@N07/albums
+ Behance: https://www.behance.net/giuselethien
+ Pintesest: https://www.pinterest.com/giuselethien/pins