title: Custom Button next to “ADD TO CART” button of WooCommerce based on Product Type
body: <p>I want add a custom Button "View Demo" next to "Add to Cart" button of WooCommerce based on Product Type, both on main shop page and single product page.</p>
  
  <p>I've done this steps:</p>
  
  <p>Add code to theme file <code>header.php</code>:</p>
  
  <pre><code>&lt;script&gt;var url_demo = "&lt;?php echo the_field('url_demo'); ?&gt;"&lt;/script&gt;
  </code></pre>
  
  <p>Add jQuery script using "TC Custom JavaScript" plugin:</p>
  
  <pre><code>jQuery(function($) {
   $('.add_to_cart_button, .single_add_to_cart_button').after(' &lt;a class="button demo_button" style="padding-right: 0.75em;padding-left: 0.75em;margin-left: 8px; background-color: #0ebc30;" href="'+url_demo+'" target="_blank"&gt;View Demo&lt;/a&gt;');
  });
  </code></pre>
  
  <p>It's work, the Custom button "View Demo" shown on main shop page and single product page. </p>
  
  <p>But I've some problem now, the "View Demo" button link only correct on Single Product page, while on shop main page the "View Demo" button, link to the same url. Is my code above wrong?</p>
  
  <p>My questions are, how to add "View Demo" button (both on main shop page and single product page) that only show for spesific product type, for example only show on category <strong>Theme</strong>? Last, is there any other way to add demo link without editing the <code>header.php</code> file like above method? I just anticipating the <code>header.php</code> file reset if the theme updated.</p>