Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding Woocommerce Add to Cart Button to related products and product listing

I'm having some difficulty in adding additional stuffs to WooCommerce as I'm still new to it. I'm trying to add an 'add to cart' button to related products and product listing.

Was running through the codes and got stuck at the below.

<a href="<?php the_permalink(); ?>">

        <?php
            /**
             * woocommerce_before_shop_loop_item_title hook
             *
             * @hooked woocommerce_show_product_loop_sale_flash - 10
             * @hooked woocommerce_template_loop_product_thumbnail - 10
             */
            do_action( 'woocommerce_before_shop_loop_item_title' );
        ?>

        <h3><?php the_title(); ?></h3>

        <?php
            /**
             * woocommerce_after_shop_loop_item_title hook
             *
             * @hooked woocommerce_template_loop_price - 10
             */
            do_action( 'woocommerce_after_shop_loop_item_title' );
        ?>

    </a>

    <?php do_action( 'woocommerce_after_shop_loop_item' ); ?>  

Hope someone can guide me on how to add the button. Thanks in advance.

like image 503
user1685141 Avatar asked Feb 23 '13 01:02

user1685141


People also ask

How do I trigger add to Cart button in WooCommerce?

Yes, that can be done by selecting the Redirect user to a URL option in your form's Behavior > Submission Behavior settings. Change yoursite. tld to your actual site, and change 7283 to the ID of the product you want added to the user's cart.

How do I link my add to Cart button?

Activate the plugin through the Plugins menu in WordPress. Then go to settings menu and select Custom Cart Button submenu. Choose appropriate option like to show on shop page or single product page, as per your need.

How do I display the View Cart button after product is added to Cart?

You have to set up WooCommerce shop page or archive page to get the message that product has been added to cart. If you don't know before how to setup woocommerce product page, here is a video can help you on this. Regarding the cart button, you can activate it in X-> Theme Option -> WooCommerce enable the menu there.


2 Answers

To explain each do_action is inside the woocommerce-hooks.php and points to a Function inside of woocommerce-template.php

Creates thumbnail:

Function Name: woocommerce_template_loop_product_thumbnail()

do_action( 'woocommerce_before_shop_loop_item_title' );

Provides Price:

Function Name: woocommerce_template_loop_price()

do_action( 'woocommerce_after_shop_loop_item_title' );

Add to Cart Button:

Function Name: woocommerce_template_loop_add_to_cart()

do_action( 'woocommerce_after_shop_loop_item' );
like image 174
Robert Lee Avatar answered Sep 20 '22 08:09

Robert Lee


Search for woocommerce_template_loop_add_to_cart recursively in your wordpress folder.

By default WooCommerce hooks it to woocommerce_after_shop_loop_item in wp-content\plugins\woocommerce\woocommerce-hooks.php

add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

My installed theme, Mystile, removed this hook in wp-content\themes\mystile\includes\theme-woocommerce.php

// Remove add to cart button on archives
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);

Once I commented it out, the "Add to cart" button appeared.

like image 35
Azmi Kamis Avatar answered Sep 20 '22 08:09

Azmi Kamis