javascript - Woocommerce 'remove product' remove X and replace with an image -

im trying replace cross image delete products can't make work, says path invalid.

here's js:

function replacecross($){ // search woocommerce object var link    = $(".woocommerce .product-remove a"); var can     = $('<img id="trashcan">'); var dir     = "<?php echo get_template_directory_uri(); ?>";  can.attr("src", +dir+ "/images/garbage.png"); can.appendto(".woocommerce .product-remove"); 

}

and html:

<tr class="woocommerce-cart-form__cart-item cart_item">     <td class="product-remove">         <a href="#" class="remove" aria-label="dit artikel verwijderen" data-product_id="627" data-product_sku="mudd &amp; water dr alice white leaf-xs">×</a>         <img id="trashcan" src="nan/images/garbage.png">     </td> </tr> 

and i'm running localize script in functions.php like:

function custom_script(){ wp_enqueue_script( 'general-script' ,style_web_root . '/js/script.js', array('jquery'), '1.0' , true );  $script_data = array(     'image_path' => get_template_directory_uri() . '/images/' ); wp_localize_script(     'custom_script',     'cs_custom',     $script_data ); 

}

i'm still learner in jquery , php gentle please c:

thanks in advance!

changing icon in javascript huge mistake. doing loading old icon , send script client change it.

the correct solution replace in wordpress using css, send new icon style beginning. can find comprehensive tutorial on how change icon simple google search: https://businessbloomer.com/woocommerce-change-remove-item-icon-cart/

the tutorial shows how modify icon using font awesome, can own image (an avoid loading entire font-awesome library icon) doing:

.woocommerce a.remove:before{    content: "";    background-image: url(path-to-your-image.png); }