How do I customize add to cart button in WooCommerce?
In this tutorial, I would like to share it with you that How do I customize add to cart button in WooCommerce? keep mind, Add to Cart button is the most important button on any eCommerce website or store. For store owners, it is the button that directly leads to sales and revenues.
Adding Add to Cart Button to WooCommerce Template
The following code snippet will add the button to any template page.
<?php
/**
* Template Name: Custom Add To Cart
*
* @package WordPress
* @This template will display 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 snapshot shows the code snippet in action.
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.
<?php
// add fucntions.php file below
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';
}
Change Cart Button Text
<?php
// add functions.php file below
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');
}
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, just check here: Customize WooCommerce store