How to change cart icon with Add to cart text in Hestia

If you want to show the Add to cart text in place of the cart icon, you need to follow the below steps:

  1. If you have not created a child theme then be sure to create one before proceeding or your changes will be lost on next update:  How to create a child theme
  2. After you have created your child theme add the following snippet in the functions.php file of the child theme.
function filter_add_to_cart_text( $arg1, $product ) {

	global $product;

	if ( function_exists( 'method_exists' ) && method_exists( $product, 'get_id' ) ) {
		$prod_id = $product->get_id();
	} else {
		$prod_id = $product->id;
	}

	return sprintf(
		'<a rel="nofollow" href="%1$s" data-quantity="%2$s" data-product_id="%3$s" data-product_sku="%4$s" class="%5$s btn btn-just-icon btn-simple btn-default" title="%6$s">Add to cart</a>',
		esc_url( $product->add_to_cart_url() ),
		esc_attr( isset( $quantity ) ? $quantity : 1 ),
		esc_attr( $prod_id ),
		esc_attr( $product->get_sku() ),
		esc_attr( isset( $class ) ? $class : 'button' ),
		esc_attr( $product->add_to_cart_text() )
	);
}
add_filter( 'woocommerce_loop_add_to_cart_link', 'filter_add_to_cart_text', 10, 2 );

You can add the following custom CSS to Appearance -> Customize -> Additional CSS section to make it look like a button.

.card-product .footer .stats a.button.btn-default{
    background: #C73646;
    padding: 10px;
    color: #fff!important;
    font-size:inherit;
}

That's it.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us