How to Get Rid of Links to WooCommerce Single Product Page

I’ve recently come across an interesting question on the WordPress.org Themes and Templates Support Forum about how to remove the links to the Single Product page that wrap each product on the Shop page of the Storefront theme.

Storefront is a very popular theme by WooThemes designed to work tightly with WooCommerce. WooCommerce is a powerful free e-commerce plugin for WordPress, originally developed by WooThemes and later acquired by Automattic, the company behind WordPress itself.

In actual fact, the simple method I’m going to illustrate here to answer this question should work with most WooCommerce-powered themes, since the code won’t concern the Storefront theme at all. Rather, the snippet I’m going to provide here acts on the output of the WooCommerce template that manages the markup of the Shop page.

If you’re interested in this result, here’s what you need to do.

The WooCommerce HTML Markup for Products on the Shop Page

The WooCommerce Shop page displays products in a grid. Each product is placed in a grid cell and wrapped by a link.

WooCommerce Shop page
WooCommerce Shop page

Clicking the link lands you on to the Single Product page.

WooCommerce Single Product page
WooCommerce Single Product page

The task posed by the forum user involves eliminating the link that wraps each product in the Shop page. Users would have the option to add the product to the cart from the Shop page without being able to access the Single Product page.

The beauty of WooCommerce is that you can do a bunch of stuff to change the markup and the appearance of its templates without modifying the template itself or having to move a copy of the template into your theme and modifying it from there.

How? Using custom WooCommerce action and filter hooks. This is the method I’m going to show you here using the Storefront theme.

Create a Child Theme

If you’re using Storefront, like I am in this demo, the first step is to create a child theme. This ensures that when you update your theme, the updated files won’t overwrite your customizations.

First, add a new folder inside the themes directory of your WordPress installation. I call my child theme storefront-child, but you can choose any name you like.

The basic files you need for a child theme are:

  • style.css
  • functions.php

Create these two files inside your child theme’s folder.

What to Write in style.css

WordPress needs to find a comment block at the top of your stylesheet where you specify the name of your child theme and the name of your parent theme. Optionally, you can add more information like child theme’s author, author URI, theme’s description, etc.

Read this Codex article for more information.

Here’s what the stylesheet for my demo child theme looks like:

/*
 Theme Name:   Storefront Child
 Description:  Demo child theme of Strorefront WooCommerce theme
 Author:       Maria Antonietta Perna
 Author URI:   http://mariaantoniettaperna.com
 Template:     storefront
 Version:      1.0.0
*/

Make sure you have the Theme Name and Template information in your comment block and your child theme should be already visible on the back-end of your WordPress installation in the Appearance/Themes panel.

Storefront child theme in the Themes panel of the WordPress back-end.
Storefront child theme in the Themes panel of the WordPress back-end.

Also, don’t forget to have the parent theme installed.

All the CSS styles for your theme will go in style.css, after the comment block (after the */, which marks the end of the comment).

What to Write in functions.php

functions.php is where you place the code that manages the functionality of your child theme. For this demo, you need to load the parent theme’s stylesheet first and your child theme’s stylesheet just below it. Doing so ensures that you keep all the goodies from the parent theme without starting from scratch, while being able to overwrite the styles you want to modify according to your taste and design.

Here’s the code:

<?php
function storefront_child_styles_scripts() {
  //Enqueue parent stylesheet
  wp_enqueue_style( 'storefront-style', get_template_directory_uri().'/style.css' );
	
  //enqueue theme css
  wp_enqueue_style( 'storefront-child-style', get_stylesheet_directory_uri().'/style.css' );
	
}

add_action( 'wp_enqueue_scripts', 'storefront_child_styles_scripts' );

Here’s what the code above accomplishes:

  1. Add a <?php opening tag. It’s crucial that you add this bit, otherwise your code is not going to do anything.
  2. Wrap all your code in a function. Add your child theme name as prefix for your function name. I called mine storefront_child_styles_scripts(). storefront_child is the prefix for this function. This ensures that if there’s another function in the theme or in any of the plugins I use called styles_scripts(), my function won’t create any conflicts with it. This is recommended practice for all functions and variables you use in your theme.
  3. Hook the storefront_child_styles_scripts() function to the wp_enqueue_scripts action hook. Doing so ensures that WordPress correctly loads your stylesheets and scripts at the right time and order. Read this Codex article for more info.
  4. Inside the storefront_child_styles_scripts() function, enqueue the parent theme’s stylesheet using wp_enqueue_style(). Note how you get to the path that leads to the parent theme’s stylesheet using get_template_directory_uri()
  5. Finally, enqueue your child theme’s stylesheet using wp_enqueue_style(). However, notice how the path to the child theme’s stylesheet file uses get_stylesheet_directory_uri(). Keep this distinction in mind when you work with files inside your child theme: get_template_directory_uri() is to find files in the parent theme’s directory, while get_stylesheet_directory_uri() is to find files in the child theme’s directory.

That’s it! Activate your child theme in the Themes panel of your WordPress installation and visit your website. It shouldn’t be any different from the parent theme.

Modifying the WooCommerce Shop Page

To get rid of the links wrapping each product in the WooCommerce Shop page, you’ll need to modify the template that controls the HTML markup in the Shop page. To do so, find the right template by locating the woocommerce directory inside the plugins folder of your WordPress installation. Now dig into templates/content-product.php.

Open content-product.php and find this line of code (about line 59 of your code editor):

do_action( 'woocommerce_before_shop_loop_item' );

When you see do_action() it means you have a custom hook and you can either unhook what WooCommerce has already hooked there or hook your own functions to add or modify content at that particular place in the code.

If you read the comments just before do_action(), you’ll find that WooCommerce has hooked these two functions: woocommerce_before_shop_loop_item and woocommerce_template_loop_product_link_open. The second function is what outputs the opening <a> link tag that wraps each product on the Shop page. You can verify this by digging up woocommerce/includes/wc-template-functions.php and finding the woocommerce_template_loop_product_link_open() function.

To prevent each product from being linked, you start by simply unhooking that function from the woocommerce_before_shop_loop_item action hook in your functions.php file. Here’s how:

Below the code you previously added in your functions.php file, add the following:

remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );

remove_action() removes a function attached to a specific action hook. You also add 10, which is the priority with which WordPress executes that function. This number needs to match the number you find in the content-product.php template:

@hooked woocommerce_template_loop_product_link_open - 10

Next, you remove the function that adds the closing </a> link tag by following similar steps.

In content-product.php, locate the appropriate hook (about line 90 of your code editor):

do_action( 'woocommerce_after_shop_loop_item' );

Notice the woocommerce_template_loop_product_link_close() function hooked to the above action hook with a priority of 5.

Now unhook this function by adding the following code:

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );

That’s it, save your work and check the result in your Shop page. Try clicking on each product, can you do it? If your code is correct you shouldn’t be able to.

Conclusion

In this post, I showed how you can get rid of the links to access the single product page from a WooCommerce Shop page, which was a question I came across browsing on the WordPress.org forum.

I also showed how to create a child theme for the Storefront theme.

With its logical structure of action and filter hooks, WooCommerce makes it quite easy to modify the markup of its templates using functions rather than having to change its templates’ code.

Have a go at this yourself and let me know how the code works for you πŸ™‚
Advertisements

9 thoughts on “How to Get Rid of Links to WooCommerce Single Product Page

  1. added this to my child theme’s function.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 );

    but it didnt removed the link from the product.

    I also tried to remove the add to cart button by adding this to the function.php
    remove_action( ‘woocommerce_after_shop_loop_item’, woocommerce_template_loop_add_to_cart’, 10 );

    but it doesnt do anything either.

    • Hi Hanz,

      The code should remove the links and the button. From here there isn’t much I can do. Perhaps you could send me your child theme and I’ll have a look at it some time over the weekend. Thanks πŸ™‚

  2. Hi this is a great article and worked well for removing the link.
    I just want to change the class of the link i was wondering how you can do that in my child theme built on underscores.

    This is the code i want to run if i copy and paste it into the functions file i get an error message.

    Thanks in advance πŸ™‚

    function woocommerce_template_loop_product_link_open() {
    echo ‘‘;
    }

    • Hi Brad, thanks for your comment. Unfortunately, I can’t read your code snippet because the system has wiped it out. However, the process to add your own class to the product links is similar to that you use to eliminate the links altogether. You only need to remove one function hooked to the woocommerce_before_shop_loop_item action hook and replace it with your own function, which outputs the link with your custom CSS class. Here’s the snippet:

      //Change class on WC product page links
      //First remove the currently hooked function
      remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open' );

      //Write your own function with the modified CSS class
      function storefront_child_add_prod_link_class() {
      echo '<a href="' . get_the_permalink() . '" class="new-class" rel="nofollow">';
      }
      //Hook your function to the woocommerce_before_shop_loop_item hook
      add_action( 'woocommerce_before_shop_loop_item', 'storefront_child_add_prod_link_class' );

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s