Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – Trigger child element when parent is clicked

I explain what I would like to achieve with an image, I think it is easier.

What I would like to do (click to see the example)

I’ve tried this but it doesn’t work

$('.entry-tpl-grid').each(function(){
        $(this).on('click', function(){
            location.href = $(this).find('div > header > h3> a').attr('href');
        });
});

Where I want to apply it (click to see the example)

<article class="entry-tpl-grid">

    <figure class="entry-featured-media">
       <a href="#" class="g1-frame">
          <div class="g1-frame-inner">
                <img src="https://--.com/300x300.png">
          </div>
       </a>
    </figure>       


    <div class="entry-body">
        <header class="entry-header">
              <h3 class="entry-title">
                  <a href="https://www.--.com/" class="woocommerce-LoopProduct-link"> Product name </a> 
              </h3>
        </header>
    </div>

</article>

Thanks in advance.

Tags:

3

Answers


  1. 0

    You can use [0] to access the DOM Element directly, and then use the standard JS .click()

    $('.entry-tpl-grid').on('click', function() {
  $(this).find('div > header > h3 > a')[0].click();
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<article class="entry-tpl-grid">

  <figure class="entry-featured-media">
    <a href="#" class="g1-frame">
      <div class="g1-frame-inner">
        <img src="http://placekitten.com/150/150">
      </div>
    </a>
  </figure>


  <div class="entry-body">
    <header class="entry-header">
      <h3 class="entry-title">
        <a href="https://www.--.com/" class="woocommerce-LoopProduct-link"> Product name </a>
      </h3>
    </header>
  </div>

</article>
    Login or Signup to reply.
  2. 0

    using the each statment you would be adding multiple event handlers to each child element so would it not just be easier to add the event handler on the parent and if a child element is clicked it runs the parents event …

    $('.entry-tpl-grid').on('click', function(){
            location.href = $(this).find('div > header > h3> a').attr('href');
      
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<article class="entry-tpl-grid">

    <figure class="entry-featured-media">
       <a href="#" class="g1-frame">
          <div class="g1-frame-inner">
                <img src="https://--.com/300x300.png">
          </div>
       </a>
    </figure>       


    <div class="entry-body">
        <header class="entry-header">
              <h3 class="entry-title">
                  <a href="https://www.--.com/" class="woocommerce-LoopProduct-link"> Product name </a> 
              </h3>
        </header>
    </div>

</article>
    Login or Signup to reply.
  3. 0

    This answer uses vanilla js:

    let articleClick = document.querySelectorAll('article.entry-tpl-grid'); // taking the article
for (var i=0; i<articleClick.length; i++) { // iterate them
  articleClick[i].addEventListener('click', function() { // click event
    this.querySelector('h3.entry-title > a').click(); // click on the link inside (using this keyword    
  });
} 
    article {border: 1px solid black; width: 80%; margin: 20vh auto;} /* just for demo */
    <article class="entry-tpl-grid">

    <figure class="entry-featured-media">
       <a href="#" class="g1-frame">
          <div class="g1-frame-inner">
                <img src="https://--.com/300x300.png">
          </div>
       </a>
    </figure>       


    <div class="entry-body">
        <header class="entry-header">
              <h3 class="entry-title">
                  <a href="https://www.google.com/" class="woocommerce-LoopProduct-link"> Product name (Google) </a> 
              </h3>
        </header>
    </div>
</article>

<article class="entry-tpl-grid">

    <figure class="entry-featured-media">
       <a href="#" class="g1-frame">
          <div class="g1-frame-inner">
                <img src="https://--.com/300x300.png">
          </div>
       </a>
    </figure>       


    <div class="entry-body">
        <header class="entry-header">
              <h3 class="entry-title">
                  <a href="https://www.microsoft.com/" class="woocommerce-LoopProduct-link"> Product name (Microsoft)</a> 
              </h3>
        </header>
    </div>
</article>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search