WooCommerce là một trong những plugin phổ biến nhất để tạo và quản lý cửa hàng trực tuyến trên nền tảng WordPress. Đôi khi, bạn có thể muốn thay đổi văn bản hiển thị cho các sản phẩm không có giá hoặc giá là 0, ví dụ như đổi thành “Liên hệ” Trong bài viết này, chúng ta sẽ học cách thay đổi giá thành “Liên hệ” và áp dụng CSS tùy chỉnh cho nó.
Bước 1: Thêm đoạn mã PHP vào functions.php
Đầu tiên, bạn cần mở tệp functions.php của theme WordPress của bạn và thêm đoạn mã sau:
function hocwp_custom_price_message( $price, $product ) {
if ( '' === $product->get_price() || 0 == $product->get_price() ) {
return '<span class="custom-price">hocwp Liên hệ để biết giá</span>';
}
return $price;
}
Bước 2: Tạo CSS tùy chỉnh
Tiếp theo, bạn cần thêm CSS tùy chỉnh để định dạng văn bản theo ý muốn. Đây là ví dụ về cách áp dụng CSS cho văn bản:
/* Định dạng văn bản "hocwp Liên hệ để biết giá" */
.custom-price {
color: red; /* Màu đỏ cho chữ */
padding: 5px; /* Khoảng cách padding 5px */
/* Thêm các thuộc tính CSS khác tùy theo nhu cầu của bạn */
}
Bước 3: Kiểm tra kết quả
Sau khi bạn đã thêm đoạn mã PHP và CSS, bạn nên kiểm tra trang web của mình để đảm bảo rằng văn bản đã thay đổi và được định dạng đúng như mong muốn.
Kết luận
Trong bài viết này, chúng ta đã học cách thay đổi giá trong woo đổi thành “Liên hệ” và áp dụng CSS tùy chỉnh cho nó. Điều này giúp bạn tùy chỉnh giao diện cửa hàng trực tuyến của mình một cách dễ dàng và tạo ra trải nghiệm người dùng tốt hơn.