Skip to content

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.

Was this helpful?