Quickly modify an Add to cart button using Woocommerce Hooks

Hooks available in WooCommerce allow us to do a lot. Using hooks, you can change the visual layer of the page without having to rewrite the whole thing. In addition, you can also modify the logic responsible for the flow of orders, payments or availability of goods in your store.

Wondering how you can encourage customers to buy? One way might be to add an emoji to the “add to cart” button on the product card or in the product category view.

Modify button on product view using Woocommerce hooks

See below for an example of how a fire icon draws attention to products in your store:

To do this, use WooCommerce hook woocommerce_product_single_add_to_cart_text to change the button text on a single product view.

Add the following code to your theme’s functions.php file:

add_filter( 'woocommerce_product_single_add_to_cart_text', function() {
    return __( 'Add to cart 🔥', 'your-theme-slug' );
} );

Modify button on product archive/category view using WooCommerce hooks

The matter gets a bit more complicated when we want to change the button in the product archive view. Unfortunately, we don’t have the hook available to change the button text only, so we have to change the whole button. To not lose any of the WooCommerce functionality, let’s use this code:

add_filter( 'woocommerce_loop_add_to_cart_link', function ($args = array(), $product) {
    global $product;

    // get product id
    if ( function_exists( 'method_exists' ) && method_exists( $product, 'get_id' ) ) {
        $prod_id = $product->get_id();
    } else {
        $prod_id = $product->id;
    }
    
    // custom emoji icon
    $emoji = '🛒';
    
    // allows pretty much all HTML to pass - same as what's normally applied to the_content by default
    $kses_defaults = wp_kses_allowed_html( 'post' );

    $allowed_tags = array_push( $kses_defaults, $emoji );

    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 add_to_cart_button" title="%6$s">%7$s'.__('Add to Cart', 'your-theme-slug').'</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 : '' ),
        esc_attr( $product->add_to_cart_text() ),
        // filter out unwanted html tags
        wp_kses( $emoji, $allowed_tags )
    );
}, 10, 2 );

add_filter( 'woocommerce_product_single_add_to_cart_text', function() {
    return __( 'Add to cart ', 'your-theme-slug' );
} );

Remember, if you have a few buttons next to each other, the flame icon may not look as attractive as on the product view. Therefore, it is better to add another emoji icon on the archive/product category view, e.g. shopping cart.

Of course instead of emoji you can add any other icon e.g. in SVG format.

Also, it is important to remember that icons may look differently depending on the operating system and its version. Emoji’s look different on Windows and on MacOS. You can check out other WooCommerce hooks at 👉 this link 👈

If you would like us to help you with the development of a bespoke WooCommerce shop feel free to 👉 contact us 👈