Mình xin hướng dẫn các bạn tạo nút Hướng dẫn mua hàng đơn giản cạnh nút Mua sản phẩm của Woo

Mục đích:

  • Giúp khách mới mua hàng Online lần đầu không bị bỡ ngỡ
  • Site bán hàng chuyên nghiệp hơn
  • Khách mua hàng thấy tự tin hơn
  • Khẳng định đẳng cấp của chủ gian hàng Online

Hiển thị sau khi thêm sẽ như thế này:

Chèn nút “hướng dẫn mua hàng” cạnh nút “mua hàng”

Cách thự hiện:

1. Vào quản lý file của hosting tìm đến: plugins/woocommerce/templates/single-product/add-to-cart/

2. Edit file: simple.php và chèn vào cuối đoạn code:

<span class=”myButton” id=”myButton” style=”box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px inset; background-color: transparent; border-radius: 3px; border: 1px solid rgb(220, 220, 220); display: inline-block; cursor: pointer; color: rgb(102, 102, 102); font-family: Arial; font-size: 12px; font-weight: bold; padding: 5px; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px;”><a href=”https://nguyetkim.com/huong-dan-mua-hang-online-tai-nguyet-kim-shopping/“>Hướng dẫn mua hàng</a></span>

3. Lưu lại và thoát ra thưởng thức

Chú ý:

  • Chỗ màu đỏ các bạn tự sửa cho phù hợp nhé!
  • Nếu bạn đang sử dụng Flatsome, bạn có thể dễ dàng tùy thực hiện trong tùy chỉnh cấu hình trang sản phảm nhé!

Chúc các bạn thành công!

 

Chia sẻ cảm nghĩ của bạn nhé: