How to add inline SVG background to the add to cart button

Hi there,

I'm not sure how this would work without using a background image. Any examples I can check out?

I don’t have a live example to post, because I haven’t come across one.

This somewhat does the job but I sort of feel uncomfortable creating a new Woo directory inside GP and removing the esc_html() function in the add to cart template (which I’m unsure is even safe), hence looking for a solution here.

add_filter( 'woocommerce_product_single_add_to_cart_text', 'svg_single_product_add_to_cart' );
function svg_single_product_add_to_cart( $button ) {
$svg_btn = '<img src="http://localhost/tractor-1/wp-content/uploads/2020/04/my-cart-btn.svg" alt="" class="wp-image-1008"/>' . $button;
return $svg_btn;
}

I have SVG Support installed and inline SVG enabled.

You can just add that filter to your child theme functions.php file, or even a plugin like Code Snippets. No need to create a new directory.

As for escaping, you're not calling anything from a database, so there's no risk of bad stuff being inserted :)

I have a plugin called My Custom Functions installed to be able to insert php code.

Could you write me a snippet that would override the esc_html() function in simple.php located at wp-content/plugins/woocommerce/templates/single-product/add-to-cart/simple.php?

My little filter won’t work that way as I’m following this old stack.

It's not possible, unfortunately. It looks like you need to overwrite that files to remove it.

So you agree I've to create a Woo directory inside Generatepress if I don't want to edit the original file at wp-content/plugins/woocommerce/templates/single-product/add-to-cart/simple.php?

Yes, you'll need to overwrite that template in WooCommerce by adding it to your child theme.

Alternatively, a background image would likely give you the same result.

Thank you, that helped.

No problem :)