Como adicionar Javascript corretamente no functions.php

Gostaria de remover algumas setas feias que são padrão nos botões do carrinho no WooCommerce. Para conseguir isso, achei uma dica de adicionar o código a seguir, que deve remover as setas quando o documento for carregado.

Suponho que vou colocá-lo em minhas funções.php? Como exatamente eu faria isso?

$(document).ready(function() {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});

EDITAR

OK. Eu tentei esta abordagem:

Criei um arquivo chamado 'removeArrows.js' e o coloquei na minha pasta de plugins. Ele tem o mesmo conteúdo que o código original, exceto jQuery em vez de $. Em seguida, adicionei o seguinte ao functions.php:

function wpb_adding_scripts() {
      wp_register_script('my_amazing_script', plugins_url('removeArrows.js', FILE), array('jquery'),'1.1', true);
     wp_enqueue_script('my_amazing_script');
 } 

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

Não consigo descobrir como fazer com que o código seja exibido corretamente. Isso não funcionou. Alguma sugestão para fazer isso funcionar?

Origem do snippet do jQuery

Seu $screm sua wp_register_script()função é errado. Dado que o seu functions.php está dentro do seu plugin e o removeArrows.js está na raiz do seu plugin, você $scrdeve se parecer com isso

plugins_url( '/removeArrows.js' , __FILE__ )

Outro ponto a ser observado, é sempre uma boa prática carregar seus scripts e estilos por último. Isso garantirá que ele não seja substituído por outros scripts e estilos. Para fazer isso, basta adicionar uma prioridade muito baixa (número muito alto) ao seu parâmetro de prioridade ( $priority) de add_action.

 add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); 

E sempre carregue / enfileire scripts e estilos por meio do wp_enqueue_scriptsgancho de ação, pois esse é o gancho adequado a ser usado. Não carregue scripts e estilos diretamente para wp_headouwp_footer

EDITAR

Para temas, como você indicou que agora mudou tudo para o seu tema, você $scrmudaria para este

 get_template_directory_uri() . '/removeArrows.js'

para temas-pai e isso

get_stylesheet_directory_uri() . '/removeArrows.js'

para temas infantis. Seu código completo deve ficar assim

function wpb_adding_scripts() {
    wp_register_script('my_amazing_script', get_template_directory_uri() . '/removeArrows.js', array('jquery'),'1.1', true);
    wp_enqueue_script('my_amazing_script');
} 

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); 

Eu não adicionaria outro arquivo js externo, é apenas um recurso extra e desnecessário para buscar e isso é algo que queremos reduzir em termos de tempo de carregamento da página.

Eu adicionaria esse trecho do jQuery na cabeça do seu site usando o wp_headgancho. Você colaria o seguinte no seu arquivo de funções de tema ou plug-ins. Também verifiquei que o jQuery está no modo sem conflito, como você pode ver abaixo.

add_action('wp_head','woocommerce_js');

function woocommerce_js()
{ // break out of php ?>

jQuery(document).ready(function($) {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});
<?php } // break back into php

Depois de fazer isso e atualizar sua página, verifique a fonte da página para garantir que esse trecho de jQuery esteja sendo carregado na sua página. Se estiver, deve funcionar, a menos que haja algo errado no snippet do jQuery que você está usando.

Como a resposta já foi aceita, quero apenas dizer que há outra maneira de enfileirar o código javascript no rodapé, que já fiz várias vezes.

no arquivo functions.php:

function load_script_to_remove_arrow(){
?>
<script>
$(document).ready(function() {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});
</script>
<?php
}
add_action( 'wp_footer', 'load_script_to_remove_arrow' );

você pode carregar esse script em um modelo de página específico apenas usando a condição

if( is_page_template( 'page-template.php' ) ):

//put above code (or just add_action part) inside this condition to load file only if the condition is true 

endif;

se o page-template.php estiver no diretório (por exemplo, diretório de templates no diretório raiz do seu tema), você pode escrever como:

is_page_template( 'templates/page-template.php' );

Para responder à pergunta, primeiro precisamos fazer uma distinção entre javascript e JQuery.

Para afirmar de uma maneira simples:

• Javascript é baseado em ECMAScript
• JQuery é uma biblioteca para Javascript

Então, na realidade, você faz duas perguntas diferentes:

• Seu título fala sobre uma solução para implementar javascript
• Sua pergunta fala sobre uma solução para implementar o JQuery

Como os resultados do Google mostram seu título e todo o conteúdo da página fala sobre JQuery, isso pode se tornar muito frustrante para as pessoas que pesquisam uma solução javascript.

E agora para a solução JQuery:

wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

E a solução javascript:

wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );

Este código pode ser adicionado às suas funções.php A localização dos scripts nos dois casos é wp-content/themes/theme-name/js/script.js

Feliz codificação!