This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How To Add Custom Add to Cart Button in WooCommerce

Updated on December 10, 2021

3 Min Read
Customized-Add-To-Cart

Add to Cart button is perhaps the most important button on any WooCommerce store. For store owners, it is the button that directly leads to sales and revenues.

Perhaps the best thing about WooCommerce (and WordPress in general) is the customization options available at all levels. This is why you can easily customize the Add to Cart button and add it to any template page.

Managed WooCommerce Hosting Starting from $10/month.

Create, manage, and customize your WooCommerce store with complete freedom.

Adding Add to Cart Button to WooCommerce Template

The following code snippet will add the button to any template page.

<?php

/* Template  Name: Customize Add To Cart*/

get_header(); ?>
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <ul class="products">
            <?php
            $args = array(
                'post_type' => 'product',
                'posts_per_page' => 12,
            );
            $loop = new WP_Query( $args );
            if ($loop->have_posts()) {
                while ($loop->have_posts()) : $loop->the_post();
                    ?>
                    <div id="product-image1">
                        <a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>"
                           title="<?php echo esc_attr( $product->get_title() ); ?>">
                            <?php echo $product->get_image(); ?>
                        </a>
                    </div>
                    <div id="product-description-container">
                        <ul>
                            <a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>"
                               title="<?php echo esc_attr( $product->get_title() ); ?>">
                                <li><h4><?php echo $product->get_title(); ?></h4></li>
                            </a>
                            <li><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt )?></li>
                            <li><h2><?php echo $product->get_price_html(); ?> </h2></li>
                            <?php
                            echo apply_filters(
                                'woocommerce_loop_add_to_cart_link',
                                sprintf(
                                    '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="button %s product_type_%s">%s</a>',
                                    esc_url( $product->add_to_cart_url() ),
                                    esc_attr( $product->get_id() ),
                                    esc_attr( $product->get_sku() ),
                                    $product->is_purchasable() ? 'add_to_cart_button' : '',
                                    esc_attr( $product->product_type ),
                                    esc_html( $product->add_to_cart_text() )
                                ),
                                $product
                            );?>
                        </ul>
                    </div>                     <?php endwhile;
            } else {
                echo __( ' o products found' );
            }
            wp_reset_postdata();
            ?>
        </ul>
        <!--/.products-->         </main>
    <!-- #main -->
</div><!-- #primary --> <?php
do_action( 'storefront_sidebar' );
get_footer();

The following snapshot shows the code snippet in action.

add to cart button

Snippet Explanation 

The above code snippet, although long is rather simple to understand. I will provide a short description of the important components of the code snippet so that you can understand and modify it as per your requirements.

‘post_type’ => ‘product’   This is the default WooCommerce custom post type

‘posts_per_page’ => 12     This is the maximum number of posts that can be displayed on a page. At the moment, it is set to 12. You can change it to fit your store’s requirements.

apply_filters( ‘woocommerce_short_description’, $post->post_excerpt ) This displays the the short and the long description of the product.

esc_url( $product->add_to_cart_url() ) coupled with the echo statement this displays the cart’s page URL and the items in the cart (if any).

esc_attr( $product->get_id() )    This gets the product ID

esc_attr( $product->get_sku() )    This gets the SKU for the product

esc_html( $product->add_to_cart_text() )

Cloudways Woocommerce Hosting Has No Restrictions!

Test your code, plugins and themes with ease.

Add Text Above the Add To Cart Button

Another great opportunity of customization is the addition of a text right above the custom Add to Cart button. The following snippet adds the line of text. This is made possible with the echo statement.

add_action( 'woocommerce_single_product_summary', 'add_to_cart_button_woocommerce', 20 );
function add_to_cart_button_woocommerce() {
    echo '
WooCommerce customize add to cart button
';
}

This is how the line of text would be displayed:

WooCommerce customize add to cart button

Change Button Text

Finally, it is time to add the final bit of customization. It is easy to change the text that appears on the button. This is done through the simple code snippet:

add_filter('woocommerce_product_single_add_to_cart_text','custom_add_to_cart_button_woocommerce');
function custom_add_to_cart_button_woocommerce() {
return __('WooCommerce custom add to cart button code', 'woocommerce');
}

As you can see, the label on the button changes to the text mentioned in the return statement of the custom_add_to_cart_button_woocommerce() function.

WooCommerce add to cart button code

Wrapping up!

A custom WooCommerce Add to Cart button is important customization that adds value to the user experience and helps in-store conversion. If you need help in applying this customization to your WooCommerce store, check our Woocommerce tutorial, and for questions and queries, just comment below.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Great performance for the price, and plenty of control”

Sean P [SMB Owner]

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at [email protected]

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!