Adding a “read more” button above “add to cart”

youprinting
(@youprinting)

7 years, 1 month ago
Hi there,

I’m developing a website and a webshop. The product-page has an effect where on hover of a product an “add to cart” button appears (ajax-styled). Basically I want to add a second button to that hover effect, above the “add to cart” button, reading “more information” and linking to the single product page. I added an image of what I’m trying to achieve. Currently only the “add to cart” button (the orange one) is present.

I’ve already read some documentation about the loop templates but I just can’t seem to figure out what code to add where. Is there anyway you can help?

Thanks in advance!
- This topic was modified 7 years, 1 month ago by youprinting.

Viewing 4 replies - 1 through 4 (of 4 total)

lorro
(@lorro)

7 years, 1 month ago
Template hooks are listed here:
https://docs.woocommerce.com/wc-apidocs/hook-docs.html

This plugin will put up little black boxes all over the page to show you which hooks are firing where:
http://hookr.io/

I think the hook you are looking for is:
```
add_action( 'woocommerce_after_shop_loop_item', 'my_button', 8 );
function my_button() {
  // code to output my custom button
}
```
but look in your theme’s content-product.php to see how your theme has arranged hooks on the content block.

To be update-safe, your code goes in functions.php for your child theme or you can use the “My Custom Functions” plugin.
Thread Starter youprinting
(@youprinting)

7 years ago
Hi Iorro,

Thanks for the reply. Using the information you provided, I managed to get a button on the spot I wanted. Now there’s one issue: the link isn’t working. Could you shine a light on the situation?

Here’s my code:
```
add_action('woocommerce_after_shop_loop_item_title','more_information');
	
function more_information() {
	global $product;
	$link = $product->get_permalink();
	echo do_shortcode('<br>[button class="meer-informatie" link="' . esc_attr($link) . '"]meer informatie[/button]');
}
```
I need to somehow add a class to the button to be able to style it.

Thanks alot!
lorro
(@lorro)

7 years ago

Where does the button shortcode come from?

Thread Starter youprinting
(@youprinting)

7 years ago

Actually, I found the following page:

https://www.pootlepress.com/2014/10/replace-add-to-cart-button-woocommerce-shop-page/#

Instead of replacing the add-to-cart-button I just tried to add a more-info button.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Adding a “read more” button above “add to cart”’ is closed to new replies.

Tags