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.
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:
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:
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(); ?>">
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: