CODEWITHSUNDEEP
wordpresscartwoocommerce
user1685141
user1685141

Reputation: 53

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.

Upvotes: 5

Views: 56581

Answers (5)

lise
lise

Reputation: 31

Using WooCommerce on a ElegantTheme wordpress theme (Divi) , I added this line to functions.php : 

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

It adds an "Add to Cart" button right after the title and price (i.e one 'Add to Cart' button per product )

Upvotes: 2

Matt Royal
Matt Royal

Reputation: 335

FYI for anyone who comes across this, you could also try using this hook to get it working...

// Add add to cart button on archive page products
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10 );

Upvotes: 2

Alain
Alain

Reputation: 36944

To add "add to cart" button to the product listing page, I personally copied :

wp-content/plugins/woocommerce/templates/content-product.php

Into :

wp-content/themes/myChildTemplate/woocommerce/content-product.php

I then replaced:

        do_action( 'woocommerce_after_shop_loop_item_title' );
    ?>

</a>

By:

        do_action( 'woocommerce_after_shop_loop_item_title' );
    ?>

</a>
    <?php do_action('woocommerce_simple_add_to_cart'); ?>

Upvotes: 5

Azmi Kamis
Azmi Kamis

Reputation: 901

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.

Upvotes: 8

Robert Lee
Robert Lee

Reputation: 1561

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' );

Upvotes: 12

Related Questions