Posted on

WooCommerce: Change Product Permalinks @ Shop / Loop Pages

A BloomerArmada fan asked me a very interesting question: how can I link each product in the shop page to its own custom landing page as opposed to the default permalink?

Of course this applies when you don’t want to use the default single product page for all or some products. Clearly, you could set up a 301 redirect from the single product page to the landing page – that will help for SEO as well. But if this is temporary, or you need to still give access to the single product page later on, then a redirect is no good.

So, here’s how you can override the default permalink.

Linking a product to a custom landing page URL instead of the default WooCommerce single product permalink

Thankfully, the woocommerce_template_loop_product_link_open() function, which is responsible for the product “a href” in the loop pages, contains a filter:

apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product );

You can therefore change that link with add_filter() and return your custom URL instead of the default permalink.

It even gives you access to $product, which means if you have the custom URL saved in a custom field, you can return that programmatically.


/**
 * @snippet       Change Product Permalinks @ WooCommerce Shop
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=81980
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.1
 */ 

add_filter( 'woocommerce_loop_product_link', 'bbloomer_change_product_permalink_shop', 99, 2 );

function bbloomer_change_product_permalink_shop( $link, $product ) {
$this_product_id = $product->get_id();
// E.G. CHANGE LINK FOR PRODUCT ID = 25
if ( $this_product_id === 25 ) $link = '/custom-landing-page.com';
return $link;
}

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

2 thoughts on “WooCommerce: Change Product Permalinks @ Shop / Loop Pages

  1. Hey! Appreciate you creating this tutorial for me Rodolfo 🙂

    1. 🙂

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.