[BaroninnParticipant]

Hi

I was wondering if someone could point me in the right direction.

Im doing some customizing to woocommerce in ethos stack of X theme.
And im having a hard time to get a functionality that is included with ethos stack..

In the shop frontpage , when you put your mouse over the product , a popup will show with “Name” , “Price” , “Add To Cart” button

I have a code that changes the button into “View Product” instead of Add to Cart
Here is the Code

/*STEP 1 - REMOVE ADD TO CART BUTTON ON PRODUCT ARCHIVE (SHOP) */

function remove_loop_button(){
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
}
add_action('init','remove_loop_button');

/*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */

add_action('woocommerce_after_shop_loop_item','replace_add_to_cart');
function replace_add_to_cart() {
global $product;
$link = $product->get_permalink();
echo do_shortcode('<a href="'.$link.'" class="button addtocartbutton">Skoða Vöru</a>');
}

My problem is that it doesnt stick to the popup , instead it will just be fixed on top of the image…

I want the button to popup like the ethos stack is programed to be…

I know that there is not much support for this kind of thing . But if someone could atleast tell me where the function for the add_to_cart button in ethos stack is .. I could maybe try to implement my code into the excisting code…
Anyone that can point me in the right direction ?

Here is a link to the shop archive page so that you can see what im talking about :
http://backup.is/Marko/verslun/

[BaroninnParticipant]

I figured it out …

I just add this code to /wp-content/themes/x-child/functions.php

// Change the add to cart button INTO View Product button
// =================================================================================================================

add_filter( 'woocommerce_loop_add_to_cart_link', 'add_product_link' );
function add_product_link( $link ) {
global $product;
    echo '<form action="' . esc_url( $product->get_permalink( $product->id ) ) . '" method="get">
            <button type="submit" class="button add_to_cart_button product_type_simple">' . __('View Product', 'woocommerce') . '</button>
          </form>';
}

Hope this helps someone 🙂

[BaroninnParticipant]

I also had to do some CSS changes …

/* Custom View Product Button */
.woocommerce li.product .entry-header .button, .woocommerce-page li.product .entry-header .button {
    display: initial;
    font-size: 14px;
padding-left: 18%;
    padding-right: 18%;
}

[RupokMember]

Hi there,

Glad that you figured it out and thanks for sharing with us.

Cheers!

[chill986Participant]

This was a great find! The only problem I have is that when you click on the “View Product” button it adds the item to your cart anyway. How can I change it so it just goes to the product page? Appreciate any help you can give me on this!

[ZeshanMember]

Hi Chilli,

Try replacing the code provided above with this:

// Change the add to cart button INTO View Product button
// =================================================================================================================

add_filter( 'woocommerce_loop_add_to_cart_link', 'add_product_link' );
function add_product_link( $link ) {
    global $product;
    echo '<a href="'.$product->get_permalink( $product->id ).'" class="button">' . __('View Product', 'woocommerce') . '</a>';
}

Thank you!

[chill986Participant]

Thanks! I actually added an ACF checkbox field “call_to_order”, and for those items NOT checked I want “Add to Cart”, and those that ARE checked, I want “View Product”. Here’s what I came up with, and it works well:

// Display 24 products per page. Goes in functions.php
add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 32;' ), 20 );

// Change the add to cart button INTO View Product button
// =================================================================================================================

add_filter( 'woocommerce_loop_add_to_cart_link', 'add_product_link' );
function add_product_link( $link ) {
	global $product;
	if (get_field("call_to_order")){
	    echo '<form action="' . esc_url( $product->get_permalink( $product->id ) ) . '" method="get">
	            <button type="submit" class="button product_type_simple">' . __('View Product', 'woocommerce') . '</button>
	          </form>';
	}
	else {
		    echo '<form action="' . esc_url( $product->get_permalink( $product->id ) ) . '" method="get">
            <button type="submit" class="button add_to_cart_button product_type_simple">' . __('Add to Cart', 'woocommerce') . '</button>
          </form>';
	}

Works great! I also modified my css as follows:

/* Custom View Product Button */
.woocommerce li.product .entry-header .button, .woocommerce-page li.product .entry-header .button {
    display: initial;
    font-size: 14px;
    width: 100%;
}

Thanks for your rapid response!

[chill986Participant]

Oh, the other thing I need to do is set the button to “view product” if the price is $0.00. Haven’t found how to check the price value yet. Then it will be perfect.

[RadModerator]

Hi there,

It’s already set as “View Product”, the other question is what should be displayed if the product is not $0.0?

Or would you mind clarifying your last reply? 🙂

Thanks.

[chill986Participant]

To clarify, if you go to a category, and some items are set to “call to order” and others are not, the ones set to “call to order” now have the button that says “View Product” and the verbiage “Call to Order”. The ones NOT set have “add to cart” with no “call to order” verbiage. The items that are priced at “$0” have the “Call to Order” verbiage, but still have the “add to cart” button – I don’t want to have to set them all to “call to order” if they are already set to $0 price. Does that make sense?

“Call to Order” set to “yes” – button reads “View Product”, product metadata includes “Call to Order” text
“Call to Order” not set or set to “no” – button reads “Add to Cart”
Price == $0 – product metadata includes “Call to Order” text – and right now button reads “Add to Cart”. I want it to read “View Product” instead.

Thanks for any help you can give me!

[RadModerator]

Hi there,

Still a little confusing, would you mind providing a screenshot and admin login credentials in private reply?

I can see products with no price with just same buttons. But no view product nor add to cart.

Thanks.

[chill986Participant]

Figured it out – all I had to do was add $price = $product->price; and then modify my conditional statement to check to see if either the price was not set, or that the price is set to 0. Works. 🙂 Thanks!

// Change the Add to Cart button into View Product button
// =================================================================================================================

add_filter( 'woocommerce_loop_add_to_cart_link', 'add_product_link' );
function add_product_link( $link ) {
	global $product;
	$price = $product->price;
	if (get_field("call_to_order") || (!isset($price)) or ($price == 0)){
	    echo '<form action="' . esc_url( $product->get_permalink( $product->id ) ) . '" method="get">
	            <button type="submit" class="button product_type_simple">' . __('View Product', 'woocommerce') . '</button>
	          </form>';
	}
	else {
		    echo '<form action="' . esc_url( $product->get_permalink( $product->id ) ) . '" method="get">
            <button type="submit" class="button add_to_cart_button product_type_simple">' . __('Add to Cart', 'woocommerce') . '</button>
          </form>';
	}
}

[BaroninnParticipant]

thanks for sharing chill986

Glad to hear that my solution came to some help 🙂

I try to help out as much as I can on this forum since Theme.co support team is one of the best in the world (My opinion)
They always go out of their scope and help with anything they can …

[ChristopherModerator]

Thanks for sharing the code @chill986

Thanks for your kind words @baroninn

[chill986Participant]

Yes, thanks @baroninn! I find such great solutions here in the themeco forum, and the @themeco support is amongst the best I’ve encountered!

[Author]

Posts