If you want to add Add to Cart button to your shop pages, this is how you do it.

In this short tutorial, you will get answers to:

  • How to add Add to Cart button to the shop page
  • Where to put the code
  • How to customize the button
  • How to move it around inside the shop loop

Add the following code to your functions.php

// Add "Add to Cart" buttons into a page displaying shop loop
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

Add this code to your functions.php file, or even better create your own little plugin for this particular experiment, so you can switch this feature on/off anytime just by deactivating it.

Customize the button

You have options to directly create a CSS class for the button when the button is created using PHP or to apply CSS directly without creating a special class for this button. I this is not your only customization on the shop page, you should go with creating a class.

Customize using PHP

Add to cart button will be styled according to your Divi / WooCommerce defaults. You can customize the button by passing a ‘class’ argument to the woocommerce_template_loop_add_to_cart function.

add_action( 'woocommerce_after_shop_loop_item', 'custom_woocommerce_template_loop_add_to_cart', 10 );add_action( 'woocommerce_after_shop_loop_item_title', 'custom_woocommerce_template_loop_add_to_cart', 10 );

function custom_woocommerce_template_loop_add_to_cart(){
woocommerce_template_loop_add_to_cart(array('class'=>'button product_type_simple add_to_cart_button ajax_add_to_cart my_class_here')); 
}

The “Add to Cart” button default style classes are: button product_type_simple add_to_cart_button ajax_add_to_cart and you append your own class replacing my_class_here text. Then just add your class as custom CSS to your theme, something like: .my_class { option:value !important; }

Customize using CSS

The easiest way to apply CSS directly to the button is by using the adjacent sibling selector.

.woocommerce-LoopProduct-link + a {
/* Your custom CSS here */
}

Visual hook guide for the shop loop in WooCommerce

woocommerce_before_shop_loop_item

woocommerce_before_shop_loop_item_title

woocommerce_shop_loop_item_title

Product title

woocommerce_after_shop_loop_item_title

$5,00

woocommerce_after_shop_loop_item

Instead of placing your Add to Cart button at to bottom of the shop, you can place it on top, before or after the image, before or after the price or product title.

Just replace the woocommerce_after_shop_loop_item in the code snippet according to this visual guide.

Notice that the add_action function has priority 20 as the last argument. If you wish to experiment with the visual hook guide, you may want to adjust the priority accordingly to get your desired result. For example, if you use a hook and your button is still below and should not be, lower the priority from 20 to 5.

Any questions are welcome in the forum. 

Pin It on Pinterest

Shares