Woocommerce “archive page” product title with link

Question

I've been focusing on creating a custom woocommerce shop archive page without using the standard "product list" module. I'm using Oxygen builder and they give a "repeater" module to build the product list, allowing you to stack elements in div like you want.

I'm facing a problem. I'm using some single product page elements to build the layout. The problem is that the single product title "product title" module doesn't have a link embedded on it like the archive product title have.

I've been looking for some codes but doesn't get exactly what I want. Please don't blame me, I've already did tons of research but I haven't found a solution.

Here is the 2 codes that I actually founded. I've stacked both together but don't know how to make it work 100% right. The issue would be probably obvious for some of you!

Actually it wrap the product title with the product link, it does work perfectly on the front end but I have an other div below with the "product price" module and it's also wrapped with the same link... Click on the price will also redirect to single product page!

<a href="<?php echo get_the_permalink(); ?>"><?php _e('<?php');?></a>

<?php
global $product;

// If the global WC_product Object is not accessible
if ( ! is_a( $product, 'WC_Product' ) ) {
    $product = wc_get_product( get_the_id() );
}
echo $product->get_name();
?>

Here is the original code I've found to show "view more" link that redirect to product page.

<a href="<?php echo get_the_permalink(); ?>"><?php _e('view more', 'woocommerce');?></a>

Here is the code to show product title but it doesn't link to the single product page...

<?php
global $product;

// If the global WC_product Object is not accessible
if ( ! is_a( $product, 'WC_Product' ) ) {
    $product = wc_get_product( get_the_id() );
}
echo $product->get_name();
?>

The goal is to have a product title that link to the single porduct page.

Id' like to know if someone are able to find a solution?

Answer 1

You can wrap up your product name to the anchor tag. check below code.

CSS

a.yourclassname:hover {
  color: red;
}

PHP

<?php
global $product;

// If the WC_product Object is not defined globally
if ( ! is_a( $product, 'WC_Product' ) ) {
    $product = wc_get_product( get_the_id() );
}
echo '<a href="'.get_the_permalink().'" class="yourclassname">'.$product->get_name().'</a>';
?>