• Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
Thursday, 26 January, 2023
Chia sẻ thủ thuật IT, tải phần mềm miễn phí
No Result
View All Result
  • Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
  • Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
No Result
View All Result
Chia sẻ thủ thuật IT, tải phần mềm miễn phí
No Result
View All Result
Home Website

Cách dùng hook Woocommerce để hiển thị thông tin bên dưới sản phẩm

Harris by Harris
28/12/2022
in Hướng dẫn, Tài liệu, Thủ thuật, Website
Reading Time: 2 mins read
0
huanvmdotcom hook woocommerce
12
SHARES
36
VIEWS
Share to FacebookShare to TwitterPin on Pinterest

Mục lục bài viết

  1. Hook WooCommerce trong WordPress là gì?
  2. Cách dùng hook Woocommerce để hiển thị thông tin bên dưới sản phẩm

Hook WooCommerce trong WordPress là gì?

Hook woocommerce cho phép bạn ghi đè các đoạn code hoặc thêm các đoạn code mà không cần can thiệp vào các file core của giao diện, plugins hoặc của wordpress. Tất cả các việc làm này bạn không cần phải sửa file trong core WordPress hay sửa file trong core của Plugin WooCommerce, mà bạn chỉ cần sửa trong file functions. php của giao diện mà bạn đang sử dụng.

Cách dùng hook Woocommerce để hiển thị thông tin bên dưới sản phẩm

Hook cho phép bạn ghi đè các đoạn code hoặc thêm các đoạn code mà không cần can thiệp vào các file hệ thống. Vậy làm sao để sử dụng hook đặc biệt là Action Hook và Filters Hook trong WooCommerce để hiển thị thông tin sản phẩm như ảnh dưới đây:

huanvmdotcom hook woocommerce

Rất đơn giản, các bạn chỉ cần copy đoạn code sau và dán vào file function.php của theme mà bạn đang sử dụng:

Hook Woocommerce
1
2
3
4
5
6
7
8
9
add_action( 'woocommerce_after_shop_loop_item_title', 'show_thong_tin' );
function show_thong_tin() { ?>
<div class="thongtin" >
 
<div class="nut1"> Đăng ký lái xe </div>  <div class="nut2">Xem Đánh giá xe </div>
</div>
<?php
}

Xong phần code, giờ chúng ta sẽ CSS lại cho nó đẹp hơn nhé. Copy đoạn CSS sau và dán vào file giao diện của theme:

Css hiển thị thông tin sản phẩm
1
2
3
4
5
6
7
8
9
10
11
12
.thongtin {
    display: flex;
}
.thongtin .nut {
    border: 1px solid;
    border-radius: 10px;
    padding: 5px;
    text-align: center;
    margin: 5px;
    background-color: #4fba69;
    color: black;
}

Nếu trong đoạn code hook bên trên bạn có thêm thẻ < a href= “…” > thì bạn cần copy thêm đoạn CSS và dán vào file style.css của theme:

1
2
3
4
5
6
7
8
9
10
11
12
.thongtin {
    display: flex;
}
.thongtin .nut a {
    border: 1px solid;
    border-radius: 10px;
    padding: 5px;
    text-align: center;
    margin: 5px;
    background-color: #4fba69;
    color: black;
}

Vậy là xong, F5 lại trang web và tận hưởng thành quả. Chúc các bạn thành công

Digiprove sealCopyright protected by Digiprove © 2022
5/5 - (1 vote)
Chào ! Bạn thấy nội dung này thế nào?
Hữu ích 14Tạm được 14
Tags: woocommercewoocommerce hook
Previous Post

[Hướng dẫn] Sử dụng NGINX, RTMP và HLS làm server streaming videos

Next Post

Code tự động tải ảnh về host khi copy bài viết từ website khác

Harris

Harris

Thích du lịch, khám phá và thích vọc vạch

Next Post
Code tự động tải ảnh về host khi copy bài viết từ website khác

Code tự động tải ảnh về host khi copy bài viết từ website khác

Đăng nhập bằng
Tôi đồng ý tạo tài khoản
Khi bạn đăng nhập lần đầu tiên thông qua nút Đăng nhập xã hội, chúng tôi thu thập thông tin hồ sơ công khai tài khoản của bạn do nhà cung cấp tài khoản mạng xã hội chia sẻ, dựa trên cài đặt quyền riêng tư của bạn. Chúng tôi cũng lưu địa chỉ email của bạn để tự động tạo tài khoản cho bạn trên trang web của chúng tôi. Khi tài khoản của bạn được tạo, bạn sẽ đăng nhập vào tài khoản này.
Không đồng ýĐồng ý
guest
Đăng nhập bằng
Tôi đồng ý tạo tài khoản
Khi bạn đăng nhập lần đầu tiên thông qua nút Đăng nhập xã hội, chúng tôi thu thập thông tin hồ sơ công khai tài khoản của bạn do nhà cung cấp tài khoản mạng xã hội chia sẻ, dựa trên cài đặt quyền riêng tư của bạn. Chúng tôi cũng lưu địa chỉ email của bạn để tự động tạo tài khoản cho bạn trên trang web của chúng tôi. Khi tài khoản của bạn được tạo, bạn sẽ đăng nhập vào tài khoản này.
Không đồng ýĐồng ý
guest
0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận

KHUYÊN DÙNG

WooCommerce Store Info – Dynamic store info for all page, widgets

WooCommerce Store Info – Dynamic store info for all page, widgets

24/03/2022
72
Download Cubase 10 Pro All in One – Hướng dẫn cài đặt chi tiết

Download Cubase 10 Pro All in One – Hướng dẫn cài đặt chi tiết

30/12/2022
1.6k

ĐANG THỊNH HÀNH

Download Wondershare Filmora X 10.7.8.12 (Full + Repack)

Download Wondershare Filmora X 10.7.8.12 (Full + Repack)

28/12/2022
5.7k
Steinberg – Cubase Pro 12.0.0.205 x64

Steinberg – Cubase Pro 12.0.0.205 x64

24/03/2022
1.7k
Download Cubase 10 Pro All in One – Hướng dẫn cài đặt chi tiết

Download Cubase 10 Pro All in One – Hướng dẫn cài đặt chi tiết

30/12/2022
1.6k
Cách dùng hook Woocommerce để hiển thị thông tin bên dưới sản phẩm

Cách dùng hook Woocommerce để hiển thị thông tin bên dưới sản phẩm

28/12/2022
36
Tạo file Feed sản phẩm Woocommerce theo chuẩn Google Shopping

Tạo file Feed sản phẩm Woocommerce theo chuẩn Google Shopping

05/03/2022
204

GIỚI THIỆU

Chia sẻ thủ thuật IT, tải phần mềm miễn phí

Xin chào! Mình là Mạnh Huấn, website này mình xây dựng nhằm mục đích chia sẻ miễn phí các kiến thức, thủ thuật máy tính, làm web WordPress, SEO, MMO, các phần mềm hay... mà mình biết cho tất cả mọi người. Cảm ơn các bạn đã ghé qua, nếu thấy bài viết hay, hãy chia sẻ để ủng hộ tinh thần cho mình nhé!

Theo dõi mình tại đây:

BÀI VIẾT GẦN ĐÂY

Code hiển thị đếm ngược khuyến mại và sản phẩm đã bán trên Woocommerce

Code hiển thị đếm ngược khuyến mại và sản phẩm đã bán trên Woocommerce

28/12/2022
Woocommerce hooks là gì, cách dùng Actions Hook và Filters Hook trong WordPress

Woocommerce hooks là gì, cách dùng Actions Hook và Filters Hook trong WordPress

28/12/2022
Cách hiển thị số lượng sản phẩm đã bán khi dùng Woocommerce

Cách hiển thị số lượng sản phẩm đã bán khi dùng Woocommerce

28/12/2022

HV MEDIA ON FACEBOOK

  • Giới thiệu
  • Chính sách bảo mật
  • Bản quyền
  • Liên hệ
  • Quảng cáo
  • Gửi yêu cầu
  • Báo link hỏng

© 2020 HV Media - Chia sẻ thủ thuật IT, phần mềm by HV Media Center.

No Result
View All Result
  • Home
  • Mac OS
    • Adobe
    • Developer Tools
    • Graphics & Design
    • Internet – Security
    • Productivity
    • Utilities
    • Video – Audio
  • Windows
    • Anti Virus
    • Development
    • Graphics & Design
    • Office – Study
    • Tools
    • Utilities
    • Video – Audio
  • Điện thoại
    • Apps, Game Cho iOS
    • Phần mềm Android
  • Thủ thuật
    • Thủ thuật máy tính
    • Thủ thuật Mobile
    • Thủ thuật Facebook
  • Game hay
    • Game MacOS
    • Game Windows
  • Website
  • Hướng dẫn
  • Tài liệu

© 2020 HV Media - Chia sẻ thủ thuật IT, phần mềm by HV Media Center.

wpDiscuz
0
0
Bạn đang nghĩ gì, hãy để lại bình luận nhé !x
()
x
| Phản hồi