Customize WooCommerce Add To Cart Button Step by Step Guide

Customize WooCommerce Add To Cart Button 

Add to Cart button is the most important button on any eCommerce Website. For the Website holder, it is the button that directly leads to sales and revenues. So, In today in this tutorial, I will show you How to Customize WooCommerce Add To Cart Button. In this context, you can very easily Customize WooCommerce Add to Cart button and add it to any template page.

Add to Cart Button to WooCommerce Template

Add The following code snippet will add the button to any template page or You can create a custom page template for the cart button.

<?php
 
/* Template Name: Custom 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 code snippet in action

The Code Explanation

Above the code snippet, 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’ WooCommerce default custom post type

‘posts_per_page’ => 12 Number of posts that can be displayed on a page also you can change 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() ) Gets the product ID

esc_attr( $product->get_sku() ) Gets the SKU for the product

esc_html( $product->add_to_cart_text() ) add to cart

Add Text Above the Add To Cart Button

The following code will be adding text above the add to cart button. So, you should add this code in your active theme functions.php file. 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 add to cart button text';
}

Change Add To Button Text

Finally, This code will change your website Add To Cart Button text. So, add the following code snippet in your theme fucntions.php file.

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');
}

You can read here about WooCommerce Action and Filter Hook Reference

Conclusion

A custom WooCommerce Add to Cart button is the most important for your eCommerce store. So, I think, now you able to customize WooCommerce Add to cart button. If you have any questions, just comment below.

Topics

• How to Create Custom Taxonomies in WordPress Step by Step Guide
• Speed Up WordPress Website Complete Guide Step by Step 2020