Question 166741 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How do I make images link to product detail pages in WordPress?

I have some confusion when editing the CSS code in WordPress to display a link to the permalink product details in WordPress. Is there a friend who can help me? This is my code.

<article id="product-<?php the_ID(); ?>" class="productbox">

<div class="content">           
<div class="image productbox-image lazy" data-bg="url(<?php echo $thumb;?>)" >
<?php if ($promo == 'on') : ?>
<span class="ribbon">Promo</span>
<?php endif; ?>       
</div>

<div class="detail">
<?php
the_title('<h3><a href="' . esc_url(get_permalink()) . '" rel="bookmark">', '</a></h3>');
?>
<div class="desc">
    <?php the_content(); ?>
</div>
<div class="pricing">
    <?php
    echo $prices;
    ?>
</div>

Thank you before

Tags:

2

Answers


  1. 0

    You could try changing that <div> for image to an <a> and include the permalink in the href of it.

    Eg:

    <a href="<?php echo esc_url(get_permalink()); ?>" class="image productbox-image lazy" data-bg="url(<?php echo $thumb;?>)" >
<?php if ($promo == 'on') : ?>
<span class="ribbon">Promo</span>
<?php endif; ?>       
</a>
    Login or Signup to reply.
  2. 0

    As we don’t know how specific the CSS selectors are for the div which has

    class="image productbox-image lazy" data-bg="url(<?php echo $thumb;?>)"

    to ensure the CSS formatting stays the same for it we’ll have to keep it as a div.

    What we can do though is wrap it in an anchor element with href the permalink to the details.

    <a href="<?php  echo esc_url(get_permalink()); ?>">
<div class="image productbox-image lazy" data-bg="url(<?php echo $thumb;?>)" >
<?php if ($promo == 'on') : ?>
<span class="ribbon">Promo</span>
<?php endif; ?>       
</div>
</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search