[Resolved] How to add inline SVG background to the add to cart button

[tractor-1]

Hi,
I was wondering if I could get some help getting the add to cart button to look like this? I don’t want to use a png background.
Thanks

[Tom]

Hi there,

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

[tractor-1]

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.

[Tom]

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 🙂

[tractor-1]

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.

[Tom]

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

[tractor-1]

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?

[Tom]

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.

[tractor-1]

Thank you, that helped.

[Tom]

No problem 🙂

[Author]

Posts