Ask SkyVerge

We’ve got a couple new Ask SkyVerge questions prepped for you this week! The first question comes from Randy:

I’m wondering how to remove the links on the shop page to the single product page — I simply want users to be able to click on the ‘add to cart’ button on the shop page.


If you’re using WooCommerce 2.5+, there’s a code snippet that can do this for you now! Please see this comment string. (props Darren! thanks for the update)

Unfortunately there’s not a small code snippet that can remove these links for you, as they wrap several elements of the products in the shop archive. However, we can achieve this by overriding the shop template and manually removing the link from this template. The only issue that you should be aware of here is that templates can be updated, so for each major WooCommerce update, you should ensure your overridden templates are up-to-date.

We’ll need to override the content-product.php template in our theme. If you’ve never done this before, here’s a guide to doing so.

We’ll copy the content-product.php to a new “woocommerce” folder in our theme so that WooCommerce will load our version of the file instead. When you’re done, your new template will be located at:

/your-child-theme/woocommerce/content-product.php

Now that we’ve copied this file into our theme, we can modify the template to tell WooCommerce to remove the link to product page from the shop. We’ll be removing the link that surrounds the area highlighted in pink here:

WooCommerce Link to Product Page from Shop

This will leave only the “Add to cart” button available, so customers won’t be able to view the product page, but can still purchase the product. This can be helpful if your products don’t require much description, or you link to product pages elsewhere.

Open the template that’s been copied into your theme, and check out lines 44 and 68. The first and last lines here are adding the link to the product page on your shop page. We can remove the first and last lines, but keep everything in between them. I’ve removed:

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

and

</a>

from my template. This is all that’s needed to tell WooCommerce to remove links to the product page from the shop page, and now customers will only be able to add products to the cart from the shop.

Taking it Further

If you do this, you may find it helpful to display a short description to the customer on the shop archive instead. You can use your product short description on the shop page to do so in order to ensure your customers have enough information to make a purchasing decision.

This one-line code snippet can add the short description to the shop page, and can be used in a custom plugin or your functions.php file:

add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_single_excerpt' );

Now my shop’s product page links will be removed, but short descriptions will be displayed above the add-to-cart button:

WooCommerce Display short descriptions on shop pages

Display short descriptions on shop pages

Published by Beka Rice

Beka leads product direction for SkyVerge and technical documentation. She spends a lot of time on research and interviews, but likes to write so she has an excuse to spend more time jamming out to anything from The Clash to Lady Gaga.

33 Comments

  1. Dear

    I have tried the above procedure to remove product link, but it did not works.

    please help to solve the issue.

    thanks

  2. You’re a life saver, thank you so very much!!

  3. Is there a way to put the short description just right above the product price. I’m also using the product add-on plugin. I’d like to put the short description above price and the add-ons.

  4. is there a way to add a zoom image link?like lightbox?

  5. Hi Beka Rice,

    I want to change the permalink to the ‘add-to-cart-function’. For example, when a user is clicking on the image the specific product gets to the cart. What do I need for this behavior?

    Thanks for suggestions,

    Simon

  6. Did Woocommerce update content-product.php since this article was written? I’d really like to know how to do this but line 44 is not a permalink.

    https://github.com/woothemes/woocommerce/blob/master/templates/content-product.php#L44-68

    • Looks like it Amandathewebdev! I’m not sure if you are still looking, but I just had this problem and think I’ve found a solution.

      Add the following to functions.php:

      remove_action( ‘woocommerce_before_shop_loop_item’, ‘woocommerce_template_loop_product_link_open’, 10 );
      remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_product_link_close’, 5 );

  7. great..i was looking for that for ages..^^..thank you

  8. Hmmm.. adding that to functions didn’t do anything to the shop page. The link is still there.

    • Try switching themes to a default theme (like Twenty Sixteen) and re-adding it. If it works, your theme is bundling outdated templates and needs to be updated.

  9. Hi there

    I tried this fix with twentyfifteen theme:

    remove_action( ‘woocommerce_before_shop_loop_item’, ‘woocommerce_template_loop_product_link_open’, 10 );
    remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_product_link_close’, 5 );

    Nothing happened. I tried changing themes and this didn’t work either. Any suggestions?

  10. For me it worked if I changed the string parameters (woocommerce_SOMETHING) in remove_action() to straight quotes ( ‘ ) not smart quotes ( ‘ ).

    • Looking at my post above, it’s clear this comment form converts straight quote to smart quotes.

      • Already tried that Scott!

        I think there is something else that’s messing it up. Even changing themes doesn’t fix it.

        I am WP 4.4.2 and WC 2.5.2 – the latest as of today!

        Any other suggestions?

        • i changed the quotes and it worked for me: ‘ vs ’

          remove_action( ‘woocommerce_before_shop_loop_item’, ‘woocommerce_template_loop_product_link_open’, 10 );
          remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_product_link_close’, 5 );

  11. Seriously, every time I go looking for a solution I find SkyVerge; love it.

    Adding the following definately works for products using the default Twenty Sixteen theme. It’s not working on my current theme but I’ll do some digging to find out why:

    remove_action( ‘woocommerce_before_shop_loop_item’, ‘woocommerce_template_loop_product_link_open’, 10 );
    remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_product_link_close’, 5 );

    So if we wanted to target a specific category (or categories) shouldn’t we be able to put it in a function? Something like:

    // Remove Link To Product Page From The Shop – WoCommerce 2.5+
    function remove_direct_link_to_product_page() {
    if ( is_product_category( ‘extension-type’ ) ) {
    remove_action( ‘woocommerce_before_shop_loop_item’, ‘woocommerce_template_loop_product_link_open’, 10 );
    remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_product_link_close’, 5 );
    }
    }

    The above is actually not working in Twenty Sixteen (I’ve probably got it coded wrong) but in theory this should still work correct? Has anyone tried targeting just a specific category?

    • Hi Amber,

      Adding the following has worked for me as well:

      remove_action( ‘woocommerce_before_shop_loop_item’, ‘woocommerce_template_loop_product_link_open’, 10 );
      remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_product_link_close’, 5 );

      However, I want to target also a specific category or only out of stock products. The 2nd code didn’t work for me either. Did you manage to find a solution for that?

  12. Version:

    WordPress: V 4.5.2
    Woocommerce : V 2..5.5

    File: content-product.php
    Line: 59

    <li >

    <?php
    /**
    * woocommerce_before_shop_loop_item hook.
    *
    * @hooked woocommerce_template_loop_product_link_open - 10
    */
    do_action( 'woocommerce_before_shop_loop_item' );

    Remove/comment this line “do_action( ‘woocommerce_before_shop_loop_item’ );”

  13. It works for me.

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

    Make these code as comments:
    do_action( ‘woocommerce_before_shop_loop_item’);
    do_action( ‘woocommerce_after_shop_loop_item’);

    Become like this:
    //do_action( ‘woocommerce_before_shop_loop_item’);
    //do_action( ‘woocommerce_after_shop_loop_item’);

    The link to the product page have removed but the image still can be hovered.

  14. Hi,
    How if I would like to replace the text “Removed. Undo?”?
    thanks,

    sokhorn

    • Thanks. I wanted removed <a href="”> to <a href=”#” rel=”nofollow”>. the images do not link to single product page now. 😀

  15. Hi,

    For the same, If I want to change the link to a custom page that I have created for each product, how do I do that?

  16. I struggled for this solution and while the one presented in the comments does work inside functions.php it did not work inside a plug-in (which i what I needed). So here is the solution if you need it to work inside a plug-in:


    function remove_woo_product_page_links() {
    remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
    }
    add_action( 'init', 'remove_woo_product_page_links' );

    • Adam, thank you so much you are the freaking best! I’ve read countless forums and FINALLY found the answer to my problems woo hoo!

  17. Hi,

    I need to remove particular sentence from the product description. I added nearly 10000 products and I need to remove the common sentence in all product description.

    Eg : If the sentence is ” About US | Shop US | Contact Us ” in the description of the products (all products which I added)…How I can remove it …is there any way to do it

  18. Just add following code to Quick CSS

    .woocommerce-cart td.product-thumbnail, .woocommerce-cart td.product-name {
    pointer-events: none;
    }

    Best regards,
    Daniel

  19. i need shorten woocommerce url, is that a plugin help me ?

Hmm, looks like this article is quite old! Its content may be outdated, so comments are now closed.