Cómo agregar Javascript correctamente en functions.php

Me gustaría eliminar algunas flechas de aspecto feo que son estándar en los botones de carrito en WooCommerce. Para lograr esto, encontré un consejo al agregar el siguiente código, que debería eliminar las flechas cuando el documento se ha cargado.

Supongo que lo voy a poner en mis functions.php? ¿Cómo exactamente haría eso?

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

EDITAR

Bueno. He intentado este enfoque:

Hice un archivo llamado 'removeArrows.js' y lo coloqué en mi carpeta de complementos. Tiene el mismo contenido que el código original, excepto jQuery en su lugar $. Luego agregué lo siguiente a 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' ); 

No puedo entender cómo hacer que el código se muestre correctamente. Esto no funcionó. ¿Alguna sugerencia para hacer que esto funcione?

Fuente de fragmentos de jQuery

Tu $scren tu wp_register_script()función está mal. Dado que su functions.php está dentro de su complemento y su removeArrows.js está en la raíz de su complemento, $scrdebería verse así

plugins_url( '/removeArrows.js' , __FILE__ )

Otro punto a destacar es que siempre es una buena práctica cargar los scripts y los estilos al final. Esto asegurará que otros scripts y estilos no lo anulen. Para hacer esto, simplemente agregue una prioridad muy baja (número muy alto) a su parámetro de prioridad ( $priority) de add_action.

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

Y siempre cargue / ponga en cola los scripts y estilos a través del wp_enqueue_scriptsgancho de acción, ya que este es el gancho adecuado para usar. No cargue scripts y estilos directamente en wp_headowp_footer

EDITAR

Para los temas, como ha indicado que ahora movió todo a su tema, $scrcambiaría a esto

 get_template_directory_uri() . '/removeArrows.js'

para temas principales y esto

get_stylesheet_directory_uri() . '/removeArrows.js'

para temas infantiles. Su código completo debería verse así

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

No agregaría otro archivo js externo, es solo un recurso adicional e innecesario para obtener y eso es algo que queremos reducir en términos de tiempos de carga de la página.

Agregaría este fragmento de jQuery en la cabeza de su sitio web usando el wp_headgancho. Pegaría lo siguiente en su tema o archivo de funciones de complementos. También me he asegurado de que jQuery esté en modo sin conflicto, como puede ver a continuación.

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

Una vez que haya hecho esto y haya actualizado su página, verifique el origen de la página para asegurarse de que este fragmento de jQuery se esté cargando en su página. Si es así, debería funcionar a menos que haya algo fuera del fragmento de jQuery real que está utilizando.

Como la respuesta ya está aceptada, solo quiero decir que hay otra forma de poner en cola el código de JavaScript en el pie de página, lo que he hecho muchas veces.

en el archivo 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' );

puede cargar este script en una plantilla de página en particular solo usando la condición

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;

si el page-template.php está en el directorio (digamos el directorio de plantillas en el directorio raíz de su tema) puede escribir como:

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

Para responder a la pregunta, primero debemos hacer una distinción entre javascript y JQuery.

Para decirlo de una manera simple:

• Javascript se basa en ECMAScript
• JQuery es una biblioteca para Javascript

Entonces, en realidad, haces dos preguntas diferentes:

• Tu título habla de una solución para implementar JavaScript
• Su pregunta habla sobre una solución para implementar JQuery

Debido a que los resultados de Google muestran su título y todo el contenido de la página habla de JQuery, esto puede ser muy frustrante para las personas que buscan una solución de JavaScript.

Y ahora para la solución JQuery:

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

Y la solución de JavaScript:

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

Este código se puede agregar a sus functions.php La ubicación de los scripts en ambos casos es wp-content/themes/theme-name/js/script.js

¡Feliz codificación!