Banner popup quando cliente clicar em comprar no Woocommerce

O código abaixo, insere um popup personalizado na página do produto com o id específico com uma mensagem personalizada.

<div class="modal">
  <div class="content" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #fff;padding: 20px;border-radius: 5px;text-align: center;background-color: #fff!important;">
    <h2>Parabéns!</h2>
    <p>Você acaba de adquirir o kit infantil com ativador de cachinhos e ganhar 25% de desconto + 1 escova polvo + 1 scrunchie + 1 massinha de modelar.</p>
    
  </div>
</div>
<style>
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}



.modal .close {
  margin-top: 10px;
  cursor: pointer;
}
</style>
<script>
//codigo de exibicao de banner produto
jQuery(document).ready(function($) {
$(document).ready(function() {
  // Seletor para o link com o atributo data-product_id="24878"
  $('a[data-product_id="24878"]').on('click', function(e) {
    e.preventDefault(); // Impede o comportamento padrão do link

    // Abre o modal box
    $('.modal').fadeIn();
    
    setTimeout(function() {
      $('.modal').fadeOut();
    }, 4000);
    
  });

  // Fecha o modal box quando o usuário clicar no botão Fechar ou fora do modal
  $('.modal .close, .modal').on('click', function() {
    $('.modal').fadeOut();
  });

  // Impede que o modal seja fechado quando o usuário clicar dentro do modal
  $('.modal .content').on('click', function(e) {
    e.stopPropagation();
  });
});

});
//fecha codigo de exibicao de banner
<script>