Skip to content
hestia

Make your site feel premium – unlock more controls, more style, and a smoother building experience with priority support.

See Pro Plans →

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.