How to link external products on the Shop page to the Product page in WooCommerce

WooCommerce products are of different types viz. simple, grouped, variable, virtual, downloadable and external products. While products belonging to the first six product types can be bought directly off the store, external products function differently.

What is an external product in WooCommerce?

External products in WooCommerce are called so because though they may be added on your WooCommerce store, they can only be bought from the web page / website which they are hosted on. Even though their product pages get created when they are added to your store, the “Buy product” button is still linked to the location they are hosted and sold from. Even on the Shop page, the “Buy product” button is linked to the external site instead of to its product page on your WooCommerce store.

Consider an instance where you want your customer to read or have access to some information about the product before they are directed to the external site. In this case, you would want the customer to first visit the product page of the external product (that is hosted on your site or store) and then decide if they still want to visit the external site to buy the product. Retaining customers on your store/site is also a good practice as it prevents the occurrence of a high bounce rate. The bounce rate of a page refers to the number of times a user has left the page or website. A high bounce rate negatively impacts page ranking and thus is considered bad for SEO. Let us explore in this post how you can link external products on the Shop page to the Product page in WooCommerce.

When you click on the “Buy product” button below an external product on the Shop Page in WooCommerce, the default behaviour is that it immediately opens up the website the product is sold on:

By using a simple code snippet, we can change this behaviour. Copy the following code in the functions.php file of your child theme:

add_filter( 'woocommerce_loop_add_to_cart_link', 'ts_link_external_product_page', 16, 3 );
function ts_link_external_product_page( $button, $product, $args ) {
  $url = $product->add_to_cart_url();

  if ( 'external' === $product->get_type() ) {
    $url = $product->get_permalink();
  }

   return sprintf( '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
    esc_url( $url ),
    esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
    esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
    isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
    esc_html( $product->add_to_cart_text() )
  );
}

We have used the woocommerce_loop_add_to_cart_link hook to change the behaviour of the button on the Shop Page. Now, if you try visiting the Shop page and click on the Buy product button, you will see that you will be directed to the product page instead of the product’s external link:

Suppose that you want to also change the text of the “Buy product” button in order to be more specific about where your users would be navigated to. In that case, you can just modify the above code snippet a little bit by defining an extra variable for the button text:

add_filter( 'woocommerce_loop_add_to_cart_link', 'ts_link_external_product_page', 16, 3 );

function ts_link_external_product_page( $button, $product, $args ) {
  $url = $product->add_to_cart_url();
  $button_text = $product->add_to_cart_text();

  if ( 'external' === $product->get_type() ) {
    $url = $product->get_permalink();
    $button_text = "View Product Page";
  }

  return sprintf( '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
    esc_url( $url ),
    esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
    esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
    isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
    esc_html( $button_text)
  );
}

The button text will thus change on the Shop page:

In this way, you can easily change the button text of external products on the Shop Page, and link the button to the product page using a short code snippet.