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:

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:

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:

Add a <?php opening tag. It’s crucial that you add this bit, otherwise your code is not going to do anything.

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.

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.

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()

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 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 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.

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.


Leave a comment

Your email address will not be published. Required fields are marked *