'Custom Button next to “ADD TO CART” button of WooCommerce based on Product Type

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.

I've done this steps:

Add code to theme file header.php:

<script>var url_demo = "<?php echo the_field('url_demo'); ?>"</script>

Add jQuery script using "TC Custom JavaScript" plugin:

jQuery(function($) {
 $('.add_to_cart_button, .single_add_to_cart_button').after(' <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">View Demo</a>');
});

It's work, the Custom button "View Demo" shown on main shop page and single product page.

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?

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 Theme? Last, is there any other way to add demo link without editing the header.php file like above method? I just anticipating the header.php file reset if the theme updated.

javascriptphpjquerywordpresswoocommerce


Solution 1:[1]

I am using another way to do it: WooCommerce hooks.

You don't need anymore the jQuery script and also the javascript located in your header.php file, so you can erase them.

Using get_field() instead of the_field (thanks to Deepti chipdey) to get only the value concatenated in the echoed string.

Paste this code snippet in your function.php file located in your active child theme or theme folder:

function wc_shop_demo_button() {
    echo '<a class="button demo_button" style="padding-right: 0.75em;padding-left: 0.75em;margin-left: 8px; background-color: #0ebc30;" href="'.get_field( "url_demo" ).'" target="_blank">View Demo</a>';
}
add_action( 'woocommerce_after_shop_loop_item', 'wc_shop_demo_button', 20 );
add_action( 'woocommerce_after_add_to_cart_button', 'wc_shop_demo_button', 20 );

I have target the hooks used to display Add to cart button on shop page and in single product pages, to display your View demo button after it, buy lowering the priority.

Solution 2:[2]

For some reason LoicTheAztec's answer did not do it for me.

Here is what worked:

function wc_shop_demo_button() {
    echo '<a class="button demo_button" href="'.get_field( "url_demo" ).'" target="_blank">View Demo</a>';
}
add_action( 'woocommerce_after_add_to_cart_button', 'wc_shop_demo_button' );

Hope that helps someone in their journey.

Solution 3:[3]

Change 

the_field('url_demo');

to

 get_field('url_demo');

Solution 4:[4]

For some reason, the above answers throw an error for me. I use these codes and combined them with other codes and came to a solution.

  1. Edit the Woocommerce product and add an attribute to it with the name of url_demo and the value of your-demo-url.
  2. Add the below code to your child theme functions.php file (or your parent theme but I don't recommend it):
/* Adding demo button to Woocommmerce products */
function wc_shop_demo_button() {
  $product = wc_get_product(get_the_id());
  $url_demo = $product->get_attribute('url_demo');
  echo '<a class="button" href="'.$url_demo.'" target="_blank">View Demo</a>';
}
add_action('woocommerce_after_shop_loop_item', 'wc_shop_demo_button', 20);
add_action('woocommerce_after_add_to_cart_button', 'wc_shop_demo_button', 20);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2 Arun Basil Lal
Solution 3 Deepti chipdey
Solution 4 alvand1399

Related Questions