How to Customize Add to Cart Button in WooCommerce

In this post, we’ll learn how to customize Add to cart button in WooCommerce Product Page, step by step, and you can do it without coding skills ๐Ÿ™‚

Change Add to Cart Text

You need to insert the following code into Functions.php (Appearance > Editor > functions.php). But I recommend to insert with Code Snippets Plugin.ย  It will safer and easier to manage the codes.


Go to Plugins > Add New

php-snippets1-min

php-snippets2-min

Then go to Snippets > Add New > Insert code

change-add-to-cart-text-button1-min

Then click Save changes and Activate

change-out-of-stock-text3-min

and result

change-add-to-cart-text-button2-min

Hide Add to Cart Button

To hide add to cart button, just insert this CSS into Appearance > Customize > Custom CSS (or Additional CSS)

form.cart {
display: none;
}

hide-cart-button-woocommerce1-min

Customize Add to Cart Button Style

Insert these CSS (Line 04-18) into Appearance > Customize > Custom CSS/Additional CSS

Change color, background, font family, font size….to what you want ๐Ÿ™‚

Customize Quantity Box

Insert these CSS (Line 20-27) into Appearance > Customize > Custom CSS/Additional CSS.ย Change color, background, font family, font size….to what you want ๐Ÿ™‚

Share this post:

Leave a Comment