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:

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;
}