Chat with us, powered by LiveChat

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 Customize Add to Cart Button in WooCommerce

September 19, 2019

3 Min Read
Customized-Add-To-Cart
Reading Time: 3 minutes

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.

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() ) 🡪 add to cart ka text fetch kre ga

Add Text Above the Add To Cart Button

Another great oppertunity 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 an 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, just comment below.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Your WooCommerce Store Needs A Reliable Host

With no compromise on Performance, Security & Support.

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 owais.alam@cloudways.com

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

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!