Linking a product to a custom landing page URL instead of the default WooCommerc

If the image gallery you’re thinking of is the Shop Page or some other page showing a list of products, I think you can create a new product and on the General Tab for Product Data, select a Product Type of “External/Affiliate Product” and then put the landing page URL from your own site in the “Product URL” box. Set the Button Text to whatever you want, like, “View Details” or something. On the landing page, use a WooCommerce Block or shortcode to display the link to the actual product.

Hello @linux4me2,
Thank you so much!! But is it possible to change or disable the link on the image as well? thanks

Sorry about that. You mentioned in your initial post that you wanted the image to link to the landing page as well.

If you only have a limited number of products that you’ve set up as external/affiliate products, and you want the images to link to the landing page as well as the “Buy Product” buttons, the easiest thing to do would be to create redirects for each link. For example, if you are running on an Apache web server, you’d create .htaccess redirects for the links on the images to the correct landing page.

If you have a lot of products you want to do this with, then some conditional logic like, “if this is an affiliate product, then set the image link to the same URL as the “Buy Product” button would be a better approach.

How many products–or is it all your products–are we talking about?

Hello @linux4me2,

Thank you for your answer again.
I have a limit number of products about 30.
As you said, I would like to create redirects for each image and link to the landing page as well as the “Buy Product” buttons but I have no idea what to do.
Could you please show me how to redirect for each link?
thanks

Hello @linux4me2,

Thank you for your answer again.
I have a limit number of products about 30.
As you said, I would like to create redirects for each image and link to the landing page as well as the “Buy Product” buttons.

I have tried to edit .htaccess but it does not work
Is anything wrong as the image link below
https://biofill.com.au/wp-admin/upload.php?item=2591

thanks

Hi @linux4me2

Updated
My web server provide told me they are a windows only provider
.htaccess files will not work on their hosting platform

I have tried to add the code as the link below with “code snippet”

but it is still not working

Is there any other way to change the link on images? thanks

I’m not a Windows guy, but judging from this article, it looks like there are HTTP redirects on Windows servers, but the necessary packages aren’t necessarily installed by default, and your server may not have them. Your web host would be the ones to help with that.

However, there may be another option. Take a look at the Redirection Plugin. Although it can use .htaccess, which would require Apache, it sounds like the default is to use WordPress (probably just PHP) to do the redirects. I would give that plugin a try with one or two of your products and see if it will work.

If that doesn’t work, there’s another plugin called 301 Redirects that may.

If those don’t do the trick, then I’d start looking for a code-based solution to use the “Buy Product” links you’ve added for the image links.

I think the redirects are kind of messy, so I looked at the possibilities for adding a little code to your child theme’s functions.php to accomplish this so you can use one less plugin.

The following code will first check to make sure the product in question is an external/affiliate product. If it is, it will change the image link to the same URL as you use for the “Buy Product” button. If it’s not an external/affiliate product, it won’t do anything:

// *** Affiliate Product Landing Page Link ***
add_action ('woocommerce_before_shop_loop_item', 'custom_product_image_link', 1);
function custom_product_image_link(){
  global $product;
  if ($product->get_type() == 'external') {
    // For product category archives pages only
    if(is_product_category()){
      // Remove default image link
      remove_action ('woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10);
      // Add custom image link function
      add_action ('woocommerce_before_shop_loop_item', 'custom_set_external_product_image_link', 10);
    }
  }
}

// Custom image link for external (affiliate) products only.
function custom_set_external_product_image_link(){
  global $product;
  echo '<a href="' . $product->add_to_cart_url()  . '" class="woocommerce-LoopProduct-link">';
}
// *** End Affiliate Product Landing Page Link ***

I tested it, and it’s working for me. Thanks to LoicTheAztec whose code I modified to get this.

Hi @linux4me2,

I have added the code to my child theme’s functions.php but it is still not working.
Is it because of different themes? (My theme is OceanWP )

Hi @polycellroot,

It’s possible it’s your theme, but I think it’s more likely that I misunderstood what you’re trying to accomplish.

The code snippet I gave you is built to work on a Product Category Page. In your original post, you asked about “an image in image gallery.” Since you posted in the WooCommerce Support Forum, I assumed the image gallery you meant was a Product Category Page, which shows a gallery of product images with Add to Cart/Select Options buttons.

Is the image gallery you’re working with a WooCommerce page, or did you build it some other way?

Hi @linux4me2

Sorry for I have no clear narrative
I built this website with OceanWP + Elementor Pro + WooCommerce and I edited the page with Elementor and used WooCommerce Product widget for the Product image gallery.

Can it still be amended under such conditions?

thanks

Hi @polycellroot

I’m sorry! I did misunderstand what you are doing. That probably explains why it’s not working. The line:

if(is_product_category()){

is most likely returning “false” on that page, so the code isn’t firing.

When you say the “WooCommerce Product widget,” do you mean A WooCommerce Block? I’m not using Elementor, but in my theme, if I use a WooCommerce Block, I get “Add to Cart” buttons, and I don’t see those in your screenshot.

Hi @linux4me2,

I am appreciated for your help
I have hidden “add to cart” button because I just need the product gallery and Product filter function.
I am a bit confused now
I think I have to figure out something before I solve this problem

Great thanks for your help

@polycellroot You’re welcome, though I’m not sure I helped. There are a couple things I should pass along.

First of all, if you use the external/affiliate products to link to your landing page, you’re going to need to have a way for customers to purchase the products from the landing page when they arrive there. To do that, you’d have to create duplicate products of simple or variable product types with their catalog visibility set to “hidden” so they only show up on the landing page, not on the Shop page or search.

An alternative that doesn’t require duplicate products would be to set a custom field called something like “landing_page_url” for the products you want to link to a landing page, then set the value of the field to the URL of the corresponding landing page. You can then use code to set the link to the product image when the products are displayed outside of the landing page to that URL if the meta value is present for a product.