1

Tentando alterar a palavra "New!" gerada automaticamente no woocommerce conforme abaixo:

<span class="label-new">New!</span>

E usando o trecho do jQuery abaixo

<script>
$(document).ready(function(){

   $(".label-new").html("Novo!");

});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Aparece a mensagem no console assim:

Uncaught TypeError: $ is not a function at (index):864

Que é o local da linha do código

$(document).ready(function(){

Gostaria de ter o seguinte resultado:

$(document).ready(function(){

   $(".label-new").html("Novo!");

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="label-new">New!</span>

E no caso não estou obtendo.

Como resolver esse problema?

1
  • 1
    Tente assim: window.onload = function(){ $(".label-new").html("Novo!"); }
    – Sam
    Commented 11/04/2018 às 21:32

1 Resposta 1

1

Isso acontece pois seu tema carregou a biblioteca jquery depois de executar seu código: Para adicionar um script no wordpress você precisa usar a função add_action('wp_enqueue_scripts' , 'function_name').

O exemplo abaixo mostra como fazer isso utilizando apenas vanilla.js(javascript). Se caso você precisa utilizar jquery terás que registrar a biblioteca com a função wp_enqueue_script().

Observe que estou executando o script apenas nas páginas e posts: is_single() && is_page().

Você pode tirar esse trecho porém seu script ira executar em todas as rotas do site.

Adicione isso ao functions.php do tema:

Apenas com vanila.js:

if (! function_exists('mudar_span')){
    /**
     * Muda o conteúdo da tag span com a classe .label-new
     */
    function mudar_span(){
        if (is_single() && is_page()) {
            ?>                
            <script>
                function ready (fn) {
                    if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading")
                    {
                        return fn();
                    }
                    else{
                        return document.addEventListener('DOMContentLoaded', fn);
                    }
                }
                ready(function () {
                    el = document.querySelectorAll('.label-new span');                   
                    for (let n = 0; n < el.length; n++) {
                         el[n].innerHTML = 'Novo !';  
                    }

                })
            </script>
            <?php
        }
    }

}

add_action('wp_enqueue_scripts' , 'mudar_span' );

Para poder usar o jquery precisas certificar que ele está sendo incluído no cabeçalho:

Usando o jquery:

wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', array('jquery'), '', false);

O ultimo atributo false determina o carregamento do script no head do site. Caso for true o script é carregado no footer. Agora você pode registrar o script:

if (! function_exists('mudar_span_jquery')){
    /**
     * Muda o conteúdo da tag span com a classe .label-new
     */
    function mudar_span_jquery(){
        if (is_single() && is_page()) {
            ?>                
            <script>
              $(document).ready(function(){

                   $(".label-new").html("Novo!");

              });
            </script>
            <?php
        }
    }

}

add_action('wp_enqueue_scripts' , 'mudar_span_jquery' );
2
  • Tentei executar ambos os códigos, porém nenhum rodou, não estão inserindo nos código fonte das páginas, o wp_enqueue_script() coloco dentro do functions.php do tema né? Commented 12/04/2018 às 14:06
  • Sim. dentro do arquivo functions.php do tema. Onde está sendo exibido essa span ? numa página, em uma postagem ? na administração ? Commented 12/04/2018 às 17:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .