• Bỏ qua primary navigation
  • Skip to main content
  • Bỏ qua primary sidebar

Thủ thuật thiết kế website

Chia sẻ kinh nghiệm thiết kế website

  • Trang chủ
  • Joomla
    • Thủ thuật Joomla
    • Joomla Extensions
    • Joomla Themes
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugins
    • WordPress Themes
  • PHP Framework
    • Codeigniter
    • Laravel
    • Laminas
  • App Developer
    • React Native
    • Flutter
  • SEO
  • Chia sẻ
  • Phần mềm
Bạn đang ở:Trang chủ / Wordpress / Thủ thuật WordPress / Hướng dẫn cách truyền tiêu đề sản phẩm vào Contact Form 7

Hướng dẫn cách truyền tiêu đề sản phẩm vào Contact Form 7

18/11/2021 - Administrator Để lại bình luận

Một số bạn không muốn sử dụng thanh toán của woocommerce, mà sẽ sử dụng contact form 7 để thu thập dữ liệu khách hàng từ đó khai thác qua các kênh như FB, và google ads hoặc telesale. Vậy để biết khách hàng điền form và có nhu cầu mua sản phẩm nào thì chúng ta sẽ làm như thế nào? Hôm nay mình sẽ chia sẻ một đoạn script nho nhỏ để có thể làm được việc này. Các bạn follow bài viết này để biết thêm thông tin nhé.

LƯU Ý CÁCH LÀM DƯỚI ĐÂY CỦA MÌNH LÀ ÁP DỤNG CHO THEME FLATSOME, CÁC BẠN MUỐN SỬ DỤNG Ở THEME KHÁC THÌ VUI LÒNG THAY ĐỔI ID VÀ CLASS TƯƠNG ỨNG

Xem demo tại: https://pttuan410.com/danh-muc-san-pham/sp-thuong-mai/ và https://pttuan410.com/san-pham/plugin-menu-footer/

Tạo 1 form mua hàng tùy chỉnh bằng contact form 7

Ở đây để ví dụ cho nhanh thì mình sẽ tạo 1 form đơn giản gồm tên, số điện thoại và mặt hàng bạn muốn mua nhé.

Form mua hàng mẫu
Form mua hàng mẫu

Để có kết quả chính xác nhất, các bạn vui lòng copy code dưới này nhé, mình viết sẵn để các bạn dán vào CF7 cho dễ, vì cái ID title_product là bắt buộc.

[text* text-70 placeholder "Tên"]
[tel* tel-923 placeholder "Số điện thoại"]
[text text-70 id:title_product placeholder]
[submit "Mua hàng"]

Kế tiếp các bạn hook cái form này vào trang sản phẩm giúp mình nhé. Đoạn hook mình viết dưới này luôn cho các bạn dễ hình dung.

add_action('woocommerce_after_add_to_cart_button','btn_muahang_cf7');
function btn_muahang_cf7(){
    echo '<a href="#muangaycf7" class="btn-pttuan-custom">Mua ngay CF7</a>';
    echo do_shortcode('[lightbox id="muangaycf7" width="600px" padding="20px"][contact-form-7 id="1838" title="Form mua hàng"][/lightbox]');
}

Ở đoạn code này mình sẽ tạo 1 thể a chứ text là mua ngay CF7 để gọi ra cái lightbox là form mà mình đã tạo ra ở trên kia.

Các bạn thêm 1 chút CSS cho nó nhé:

.btn-pttuan-custom{
   display: block;
    padding: 8px 10px;
    background: red;
    color: #fff;
    text-align: center;
}

Kết quả sẽ như thế này:

Tạo 1 button mua ngay trong woocommerce
Tạo 1 button mua ngay trong woocommerce

Khi click vào button đó thì nó sẽ hiển thị lightbox như thế này:

Form mua hàng bằng CF7

Như vậy là xong phần form kế đến để nó có thể nhận được title sản phẩm thì các bạn thêm đoạn code này giúp mình nhé.

add_action('wp_footer','js_add_title_pttuan');
function js_add_title_pttuan(){
if(is_product()){;?>
    <script>
        jQuery(document).ready(function($){
            $('.product-info .btn-pttuan-custom').click(function (){
                var title = $('h1').text();
                $('#title_product').val(title);
            });
        });
    </script>
<?php };
}

Và đây là kết quả khi chúng ta click vào thẻ a chúng ta vừa tạo:

Thêm title vào form thành công

Bây giờ nếu các bạn muốn sử dụng btn này ở trang cửa hàng, hay trang chủ thì như thế nào? Các bạn có thể follow đoạn code dưới đây nhé.

Đầu tiên mình sẽ cho nó hiển thị ra trang chủ, trang cửa hàng, chúng ta vẫn sử dụng đoạn code tạo nút kia nhé, chỉ thay đổi hook của nó thôi. Để xem toàn bộ hook của Flatsome, các bạn follow bài viết này.

Ở đây mình sẽ sử dụng hook của woocommerce nhé.

add_action('woocommerce_after_shop_loop_item','btn_muahang_cf7');

Và kết quả là:

Form mua hàng CF7 tại trang cửa hàng

Và thêm đoạn function dưới đây giúp mình

add_action('wp_footer','js_add_title_pttuan_shop');
function js_add_title_pttuan_shop(){
if(!is_product()){;?>
    <script>
        jQuery(document).ready(function($){
            $('.product-small.col .btn-pttuan-custom').click(function (){
                var title = $(this).parents('.product-small').find('.woocommerce-LoopProduct-link').text();
                $('#title_product').val(title);
            });
        });
    </script>
<?php };
}

Và kết quả là

0 0 đánh giá
Article Rating
Theo dõi
Đăng nhập
Thông báo của
guest
guest
0 Comments
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận

Sidebar chính

LỜI NGỎ

Đây là blog cá nhân, cung cấp các thông tin, kiến thức và kinh nghiệm về lập trình và cuộc sống. Những bài viết được mình sưu tập từ nhiều nguồn, mọi chi tiết liên quan đến bản quyền xin vui lòng liên hệ qua email kairu2607@gmail.com ! Cám ơn rất nhiều.

Tìm kiếm

Thủ thuật Wordpress

T

Tạo trang chuyển hướng download cho WordPress

[flatsome ] Text Ticker (fade) For Top Bar In Flatsome Theme

[Flatsome] Text Ticker (Fade) for Top Bar in Flatsome Theme

Định Dạng ảnh Webp Là Gì ? Làm Thế Nào để Sử Dụng Webp Trên Wordpress 2024 Mới Nhất ?

Định dạng ảnh WebP là gì ? Làm thế nào để sử dụng WebP trên WordPress 2024 mới nhất ?

X

Xử Lý Lỗi Không Xem Được Giỏ Hàng Và Thanh Toán Woocommerce Website WordPress

Vì Sao Rank Math Vượt Trội – SEO WordPress 2023

Hướng Dẫn Ghi đè (override) Folder Inc Trong Child Theme Flatsome

Hướng dẫn ghi đè (override) folder INC trong child-theme Flatsome

Hướng Dẫn Quản Lý Trang Trong Website WordPress

Laravel

Một số câu hỏi câu hỏi phổ biến phỏng vấn tuyển dụng lập trình viên Laravel

Thiết kế cấu trúc folder HMVC cho Laravel

Tại sao lại sử dụng Laravel Service và Repository Pattern?

[Laravel 7] Tổ chức theo dạng Package/Module trong ứng dụng Laravel – P3: khai báo config, translation, helpers và migrations

[Laravel 7] Tổ chức theo dạng Package/Module trong ứng dụng Laravel – P2: Route và mô hình MVC

[Laravel 7] Tổ chức theo dạng Package/Module trong ứng dụng Laravel – P1: Giới thiệu và khởi tạo cấu trúc thư mục cơ bản

Codeigniter Framework

[CodeIgniter 4] Codeigniter 4 Remove Public and Index.php From URL

[CodeIgniter 4] How to upload Codeigniter 4 website on share hosting?

Sửa lỗi website Codeigniter 2.x không chạy được với PHP 7.x

[CodeIgniter 4] Sử dụng cURL trong CodeIgniter 4

[CodeIgniter 4] Sử dụng cache để tăng tốc website trong CodeIgniter 4

[CodeIgniter 4] Xử lý hình ảnh chuyên nghiệp trong CodeIgniter 4

[CodeIgniter 4] Hướng dẫn gửi mail trong CodeIgniter 4

Dịch vụ Thiết Kế Website

Phần mềm hay

Hướng dẫn chuyển đổi php version trong ~/.zshrc ở MacOs

Tim Hieu Ve He Dieu Hanh Macos 1

Sửa file Hosts trong hệ điều hành MacOS

Hướng dẫn sử dụng phần mềm putty trên Windows

Switching between multiple PHP versions on macOS

Byebye Edge Chromium/Microsoft Edge

Copyright © 2025 · Metro Pro on Genesis Framework · WordPress · Đăng nhập

wpDiscuz