WPITECH
Image default
WooCommerce

How to Customize Add to Cart Button in WooCommerce

Add to Cart button is one of the most essential button in any WooCommerce store. This is the button that directly work to generate sales and revenue.

The best part is that we can easily customize WooCommerce add to cart button and add it to any template page.

Adding Add to Cart Button to WooCommerce Template

The below code 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();

Now you can see in the screenshot that add to cart button is now easily visible at your template page.

add-to-cart-button-customization

I will give you a brief about the above code snippet so that you can understand and modify it as per your requirements.

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

‘posts_per_page’ => 12 is the maximum number of posts that can be displayed on a page. You can change it as per your store’s requirements.

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

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

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

Adding The Text Above Add To Cart Button

You can aslo customize the add to cart button by adding a text above the button. This following code snippet will add the line of text. It is possible using 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 text would display

WooCommerce-customize-add-to-cart-button

Changing the Button Text

It’s easy to change the text that appears on the add to cart button. Add the following 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');
}

Now the label on the button changes to the text that is mentioned as the return statement of the custom_add_to_cart_button_woocommerce() function.

WooCommerce-add-to-cart-button-code

Related posts

How to Show Trailing Zeros on Prices in WooCommerce

WPITECH

How to Add Variable Products in WooCommerce

WPITECH

How to Add WooCommerce Registration Form Fields

WPITECH