Hướng dẫn tạo form lấy số điện thoại đẹp bên dưới Gallery trong trang sản phẩm

348 lượt xem
Giuseart.com---Tạo-form-lấy-số-điện-thoại-trong-trang-sản-phẩm-woo
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

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.

Link xem demo: http://cayxanh3.ninhbinhweb.info/cay-canh/cay-canh-van-phong/cay-canh-phong-thuy/cay-duoi-cong-tim/

Giuseart.com---Tạo-form-lấy-số-điện-thoại-trong-trang-sản-phẩm-woo
Giuseart.com – Tạo form lấy số điện thoại trong trang sản phẩm woocommerce

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.

Giuseart.com---Cài-mới-plugin
Giuseart.com – Cài đặt plugin Contact Form 7

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.

Giuseart.com---Tạo-form-lấy-sđt
Giuseart.com – Tạo form mới, mở tab Nội dung form và paste đoạn code dưới đây:

Tab nội dung form: các bạn copy và paste toàn bộ nội dung dưới đây:

Tab cấu hình mail: các bạn copy và paste toàn bộ nội dung dưới đây:

Đây là phần nội dung nhập vào, còn cấu hình email gửi và nhận của Contact Form thì các bạn tự cấu hình nhé, cái này kiến thức cơ bản rồi nên mình sẽ không hướng dẫn trong bài viết này nữa. (Có thể search google “Cách cấu hình gửi và nhận email trong contact form”)

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.

Giuseart.com---Tạo-form-lấy-sđt-trong-trang-sản-phẩm
Giuseart.com – Trong mục Contact Form, các bạn lấy shortcode chứa ID của form và paste thay thế vào vị trí được đánh dấu ở trên

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!

Giuseart.com---Tạo-form-lấy-số-điện-thoại-trong-trang-sản-phẩm-woo
Giuseart.com—Tạo-form-lấy-số-điện-thoại-trong-trang-sản-phẩm-woo

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/[email protected]/albums
+ Behance: https://www.behance.net/giuselethien
+ Pintesest: https://www.pinterest.com/giuselethien/pins

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Bài viết mới cập nhật:

2 thoughts on “Hướng dẫn tạo form lấy số điện thoại đẹp bên dưới Gallery trong trang sản phẩm

  1. Hồng Khôi says:

    Anh hướng dẫn hiển thị thông tin bài đăng dưới tiêu đề bài viết giống của anh đi ạ.
    Cám ơn anh rất nhiều hihi

Trả lời

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 *

Trang chủ
Tìm kiếm
Lên trên
Chia sẻ
Tải lại
Bình luận