Hiện số điện thoại khi hết hàng
Mở file functions.php trong child theme của bạn (nếu chưa có child theme, bạn nên tạo child theme để tránh mất thay đổi khi update theme). Thêm đoạn code sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
add_filter( 'woocommerce_get_availability', 'webdy_custom_out_of_stock', 1, 2 ); function webdy_custom_out_of_stock( $availability, $_product ) { if ( ! $_product->is_in_stock() ) { // Hotline button HTML $hotline = '<a class="webdy-hotline-out-of-stock" href="tel:0902299161" target="_blank">'; $hotline .= '<i class="fa fa-phone" aria-hidden="true"></i> Gọi ngay: 090.22.99.161</a>'; // Thêm CSS nội tuyến 1 lần duy nhất (nếu chưa chèn) if ( ! wp_script_is( 'webdy-hotline-style', 'done' ) ) { add_action( 'wp_footer', function() { echo '<style id="webdy-hotline-style"> .webdy-hotline-out-of-stock { padding: 10px 25px; font-size: 1rem; font-weight: bold; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; border-radius: 10px; background-color: #fff; color: #000; position: relative; z-index: 1; overflow: hidden; } .webdy-hotline-out-of-stock::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, red, orange, yellow, green, cyan, blue, violet, red); background-size: 400%; z-index: -1; animation: rainbow 5s linear infinite; border-radius: 12px; } .webdy-hotline-out-of-stock:hover { color: #fff; background-color: #000; } @keyframes rainbow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } </style>'; }); wp_script_add_data( 'webdy-hotline-style', 'group', 1 ); // đánh dấu đã chèn } $availability['availability'] = $hotline; } return $availability; } |
Chào ! Bạn thấy nội dung này thế nào?
Xem thêm:
- Hiệu ứng chiếu sáng (shine effect) (hiệu ứng ánh sáng lướt qua) khi hover vào button
- Xóa /category/ khỏi URL
- Tắt tất cả các bản cập nhật tự động của WordPress
- Hướng dẫn tùy chỉnh mô tả danh mục sản phẩm hiển thị sau danh sách sản phẩm thay vì phía trên
- Tắt tính năng tự động cập nhật cho các plugin và theme trong WordPress
