10

I would like to remove some ugly looking arrows that are standard on cart buttons in WooCommerce. To achieve this, I found a tip of adding the following code, which should remove the arrows when the document has loaded.

I assume I am going to put it in my functions.php? How exactly would I do that?

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

EDIT

Okay. I've tried this approach:

Made a file named 'removeArrows.js' and placed it in my plugin folder. This has the same content as the original code, except jQuery instead $. Then I added the following to 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' ); 

I can't figure out how to make the code display properly. This did not work. Any suggestions to make this work?

jQuery Snippet Source

  • That's crazy: can't you edit the arrows out in the code that generates them? (Or is it downloaded from an external source?) In any case you can do both replaces in a single function to avoid reading and writing all the HTML inside the cart block twice. I don't know a way to directly inject that into the page from functions.php but you can save it in a separate script file (if you don't already have one you can add it to) and then wp-enqueue-script it. You'll also have to change the $s to jQuery (see that page section 7) – Rup Jun 25 '14 at 18:46
  • Nope, I'm pretty sure it can't be removed before inserted. If it can, I haven't been able to find a way to do it. Good point about adding it in a single function. Would it look like this? $(document).ready(function() { $(".woocommerce-cart").html(function(i, val) { return val.replace(" →", ""); return val.replace("← ", ""); }); }); I will look into the enqueue script. Seems a bit complicated, though.. Thanks! – user2806026 Jun 25 '14 at 20:18
  • Okay. I tried this approach; Made a file named 'removeArrows.js' and placed it in my plugin folder. This has the same content as the original code, except jQuery instead $. then I added the following to 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' ); (Sorry, I cant figure out how to make the code display properly) This did not work. Can you help me fix it? – user2806026 Jun 25 '14 at 20:32
  • 1
    Please file an edit and add all relevant info directly to your question Do not use the comment section to add code – Pieter Goosen Jun 26 '14 at 11:52
10

Your $scr in your wp_register_script() function is wrong. Given that your functions.php is inside your plugin, and your removeArrows.js is in the root of your plugin, your $scr should look like this

plugins_url( '/removeArrows.js' , __FILE__ )

Another point of note, it is always good practice to load your scripts and styles last. This will ensure that it will not get overriden by other scripts and styles. To do this, just add a very low priority (very high number) to your priority parameter ($priority) of add_action.

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

And always load/enqueue scripts and styles via the wp_enqueue_scripts action hook, as this is the proper hook to use. Do not load scripts and styles directly to wp_head or wp_footer

EDIT

For themes, as you've indicated that you now moved everything to your theme, your $scr would change to this

 get_template_directory_uri() . '/removeArrows.js'

for parent themes and this

get_stylesheet_directory_uri() . '/removeArrows.js'

for child themes. Your complete code should look like this

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 ); 
  • Thanks a lot for your great advice. This seems like the approach to use. One question though; the functions.php is in my theme folder. How would I link the js-file if it's just in the same, theme root folder? – user2806026 Jun 26 '14 at 14:41
  • You should keep everything in a plugin or in a theme, don't split them. If you are in a theme, your $scr would be get_template_directory_uri() . '/removeArrows.js' for parent themes, and get_templatestylesheet_directory_uri() . '/removeArrows.js' for childthemes – Pieter Goosen Jun 26 '14 at 14:44
  • Tried again, this time adding the removeArrows.js directly in theme folder and using the following in functions.php; function wpb_adding_scripts() { wp_register_script('my_amazing_script', get_template_directory_uri() . '/removeArrows.js', FILE), array('jquery'),'1.1', true); wp_enqueue_script('my_amazing_script'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); this gives me Parse error: syntax error, unexpected ',' on the wp_register_script line. – user2806026 Jun 26 '14 at 15:07
  • get_template_directory_uri() . '/removeArrows.js', FILE) should just be get_template_directory_uri() . '/removeArrows.js' – Pieter Goosen Jun 26 '14 at 15:10
  • Nope. Used your completely code you edited into the bottom of your original post. Only thing it does is to freeze the cart page when viewing the contents. I think I'll just give up :-) One last resort though; you started by mentioning that get_template_directory_uri() is for parent themes, and then in the final complete code that it's for child themes. Which is it? My theme is a parent :-) – user2806026 Jun 27 '14 at 12:41
4

I would not add another external js file, its just an extra and unnecessary resource to fetch and that is something we want to cut down on in terms of page loading times.

I would add this jQuery snippet in your websites head using the wp_head hook. You would paste the following in your theme or plugins functions file. I have also made sure jQuery is in no-conflict mode as you can see below.

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

Once you have done this and refreshed your page, check the page source to make sure this jQuery snippet is in fact being loaded into your page. If it is then it should work unless their is something off in the actual jQuery snippet you are using.

  • That's not the WordPress way to load Javascript, though. See wp_enqueue_script() for more information. – Pat J Jun 25 '14 at 21:24
  • 2
    Hi @PatJ, I agree, for loading an external JS library or JS file with all your Javascript functions in it, then yes absolutely that would be the correct way. However if you are loading a snippet of Javascript it does not make sense to create a whole new JS file and add an additional HTTP request just for that. Take Google Analytics for example, in 99% of themes or custom builds, the JS will be added into the the header or footer via theme options or functions file. Its common practice to include JS or even CSS snippets this way. – Matt Royal Jun 25 '14 at 21:33
  • 1
    "Common practice" doesn't make it correct, though. The wp_enqueue_script() docs even state This is the recommended method of linking JavaScript to a WordPress generated page. – Pat J Jun 26 '14 at 0:04
  • If you take WordPress default twentyfourteen theme, it loads html5.js in the header.php. Granted its doe this way for a reason so as to check of the browser meets the condition of being IE < 9, but my point is that understandably, enqueuing is the recommended and preferred method but depending on all the other variables/circumstances surrounding what you are trying to achieve it may not always be the most practical and I think some discretion should be used. Look, I could be completely wrong in this view as well, I'm interested to hear what some of the really experienced guys have to say :-) – Matt Royal Jun 26 '14 at 6:30
  • Thanks for your great suggestion. I can't get it to work though; if I add your code inside the <?php tag of my functions.php I get a 'Parse error: syntax error, unexpected '<' in /somepath.../functions.php on line 1146'. If I add it outside the <?php, it simply seems to echo the given code in top of the page. What am I missing here? – user2806026 Jun 26 '14 at 10:23
0

As the answer is accepted already so, I just want to say there's another way to enqueue javascript code in footer which I have done many times.

in functions.php file:

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

you can load this script to particular page template only by using condition

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;

if the page-template.php is in directory ( say templates directory in your theme's root dir ) you can write like:

is_page_template( 'templates/page-template.php' );
  • I would not recommend "baking" the JavaScript into the footer like this. It prevents it from being unhookable or modifiable (at least, easily) which is extremely important in plugin and theme development. If you're the end-user of a site and need a quick script or something, go for it - but even still wp_enqueue_script() is almost always universally better and more flexible. – Xhynk Aug 24 '18 at 16:33
-1

To answer the question we must first make a distinction between javascript and JQuery.

To state it in a simple fashion:

  • Javascript is based on ECMAScript
  • JQuery is a library for Javascript

So in reality you ask two different questions:

  • Your title speaks about a solution for implementing javascript
  • Your question speaks about a solution for implementing JQuery

Because the Google results show your title and all the content of the page talks about JQuery this can become very frustrating to people that search for a javascript solution.

And now for the JQuery solution:

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

And the javascript solution:

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

This code can be added to your functions.php The location of the scripts in both cases is wp-content/themes/theme-name/js/script.js

Happy coding!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.