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
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.
5 Responses
Would it be possible to add a second “Read More” button beside the add to cart button? How would I do that?
Hi,
I’m adding the products to the basket. Some of them worked fine, some of them went to the next product page and didn’t directly add to the basket.
Hi there thanks for info, can you please post an example of the whole line how to add the css customisation line. I tried as per your instruction and few other places unable to customise the button. If you can please post a video or a post will really appreciate.
Thank You
Hi Deb, go to your website’s Theme customizer admin page /wp-admin/customize.php. If you are not sure how, open https://www.example.com/wp-admin/customize.php where you change the “example.com” string to your actual domain name. The Theme customizer will open.
Then click on Additional CSS and that is the place where you alter your CSS code.
Hi,
I added this as a snippet on my page however the shop pages created with Divi are still not showing the add to cart button.
and the shop pages that are not using Divi are showing add to cart twice.
Can it be something else?
(I am using Divi builder but using a different theme)