How to insert add to cart link to icon - Woocommerce - woocommerce

I tried to replace the Add To Cart button by this code:
add_filter( 'woocommerce_loop_add_to_cart_link', 'replace_default_button' );
function replace_default_button(){
return __( '<i class="fas fa-cart-plus"></i>', 'woocommerce' );
}
and I insert the code bellow to my woocommerce/loop/add-to-cart.php
global $product;
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
$product->add_to_cart_text()
),
$product );
and the result I received is button Add to Cart replace to Shopping icon but without link, could anybody help me fix this ?!
Thanks

If you can edit the template page, then why can't you replace add_to_cart_text with icon html
global $product;
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
'<i class="fas fa-cart-plus"></i>'
),
$product );

Related

Remove rel="nofollow" from woocommerce 'add to cart' buttons

WooCommerce is adding rel="nofollow" links to the add to cart button on the products on my site and I can't figure out how to remove it.
I tried following the answer here, but couldn't get it to work.
Any help would be much appreciated.
you can use woocommerce_loop_add_to_cart_args to unset the rel attribute from the add to cart button in the WooCommerce loop
add_filter( 'woocommerce_loop_add_to_cart_args', 'remove_rel', 10, 2 );
function remove_rel( $args, $product ) {
unset( $args['attributes']['rel'] );
return $args;
}
I use this code. But did not find how to insert in "aria-label" product title.
// Change rel “nofollow” to rel “dofollow” on Shop Page Product button
add_filter( 'woocommerce_loop_add_to_cart_link', 'add_to_cart_dofollow', 10, 2 );
function add_to_cart_dofollow($html, $product){
if($product->product_type == 'simple') {
$html = sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" aria-label="Добавить в корзину" data-product_sku="%s" class="%s" %s>%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $args['class'] ) ? $args['class'] : 'button product_type_variable add_to_cart_button' ),
esc_attr( isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : ''),
esc_html( $product->add_to_cart_text() )
);
}else {
$html = sprintf( '<a href="%s" data-quantity="%s" data-product_id="%s" aria-label="Выбрать" data-product_sku="%s" class="%s" %s>%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $args['class'] ) ? $args['class'] : 'button product_type_variable add_to_cart_button' ),
esc_attr( isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : ''),
esc_html( $product->add_to_cart_text() )
);
}
return $html;
}

How do I display quantity select in loop in woocommerce?

I need to display quantity select near "Add to cart" button in WooCommerce in loop. How do I do that?
Thank you MahdiY, that works. But I faced another problem:
I want to replace button "Add to cart" with cart icon.
In file add-to-cart.php I have the following code:
global $product;
$class = isset( $class ) ? $class . ' cart-icon-btn' : 'cart-icon-btn';
$tdir = get_template_directory_uri();
echo has_filter('woocommerce_loop_add_to_cart_link');
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s"><img class="cart-icon-btn" src="' . $tdir . '/images/basketin.png"></a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' )
// esc_html( $product->add_to_cart_text() )
),
But this filter 'woocommerce_loop_add_to_cart_link' seems to override my HTML and remove IMG tag. I tried to find any function added to this filter in files of WC code but did not find.
How do I fix that?
Use this code:
<?php
/**
* Code should be placed in your theme functions.php file.
*/
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
$html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
$html .= woocommerce_quantity_input( array(), $product, false );
$html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
$html .= '</form>';
}
return $html;
}
Override loop template and show quantities next to add to cart buttons.

Add to cart button with quentity filed under image woocommerce

I want to add add to cart button with quantity filed under image in single product page. i have tried many code but not luck. one code which work but issue is that quantity not adding properly. i add below code my-theme/woocommerce/single-product/product-image.php before do_action( 'woocommerce_product_thumbnails' ); hook.
if ( ! is_shop() && ! is_product_taxonomy() ) {
$quantity_field = woocommerce_quantity_input( array(
'input_name' => 'product_id',
'input_value' => ! empty( $product->cart_item['quantity'] ) ? $product->cart_item['quantity'] : 1,
'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity(),
'min_value' => 0,
), $product, false );
$quantity_field = str_replace( array( '<div class="quantity">', "</div>" ), '', $quantity_field );
echo str_replace( '<input ', '<input style="max-width: 70px" ', $quantity_field );
}
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() )
),
$product );
Hi add this hook in your function file.
remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_add_to_cart',30 );
add_action( 'woocommerce_product_thumbnails','woocommerce_template_single_add_to_cart',30 );
display as like default WC
http://screencast.com/t/u8giinLfKmzt

Woocommerce replace add to cart url to link to product page

I am using this shortcode to display products [product_category category="extras" orderby="date"].
Variable products show "select options" and single products show "add to cart". I was able to change text of both to say "View Product".
The problem now is that I need to change the url of those that used to say "add to cart", because they don't link to the product page but to "Add to the cart".
I know I can edit the woocommerce template, but I would need this as a function to be added to function.php
I don't need any button involved, just replacing the url.
So again purpose:
Replace/redirect "Add to Cart" url to link to product page (only in loop, obviously not in product page).
Can someone help?
If someone does elect to change the woocommerce file (in child theme of course!).
In file: /loop/add-to-cart.php
Change:
global $product;
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '%s',
esc_url( $product->add_to_cart_url() ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
esc_attr( $product->product_type ),
esc_html( $product->add_to_cart_text() )
),
$product );
To:
global $product;
if ( $product->product_type == "simple" ) {
$simpleURL = get_permalink();
$simpleLabel = "View Product"; // BUTTON LABEL HERE
} else {
$simpleURL = $product->add_to_cart_url();
$simpleLabel = $product->add_to_cart_text();
};
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '%s',
esc_url( $simpleURL ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
esc_attr( $product->product_type ),
esc_html( $simpleLabel )
),
$product );
In the funtions.php of you theme add this 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 '<p style="text-align:center;margin-top:10px;">';
$currentlang = get_bloginfo('language');
//for multilanguage
if($currentlang=="en-GB"){
echo do_shortcode('View Product');
} elseif($currentlang=="fr-FR"){
echo do_shortcode('Voir le produit');
}else {
echo do_shortcode('Ver Producto');
}
echo '</p>';
}
I believe you can disable AJAX add-to-cart functionality in the WooCommerce settings.
If that isn't satisfactory for some reason you can take a look at the loop/add-to-cart.php template. The add to cart link is filterable. If you look at add-to-cart.js you can see that the AJAX add to cart function is triggered for any link with the add_to_cart button class, and only works for buttons with the product_type_simple class.... ie: only for simple products. Depending on your styles, you could either remove the product type class or the add_to_cart_button class from the link. In the example below, I have removed the add_to_cart_button class.
add_filter( 'woocommerce_loop_add_to_cart_link', 'so_26247988_add_to_cart_link', 10, 2 );
function so_26247988_add_to_cart_link( $link, $product ){
$link = sprintf( '%s',
esc_url( $product->add_to_cart_url() ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->product_type ),
esc_html( $product->add_to_cart_text() )
)
return $link;
}

Modification to WooCommerce for WordPress featured image link

I need to change the link code that is being used for external products for woo commerce.
This is the code that generates the product image:
<?php
/**
* Single Product Image
*
* #author WooThemes
* #package WooCommerce/Templates
* #version 2.0.3
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
global $post, $woocommerce;
?>
<div class="images">
<?php
if ( has_post_thumbnail() ) {
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) );
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
$attachment_count = count( get_children( array( 'post_parent' => $post->ID, 'post_mime_type' => 'image', 'post_type' => 'attachment' ) ) );
if ( $attachment_count != 1 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="Placeholder" />', woocommerce_placeholder_img_src() ), $post->ID );
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
So I just want to change out the image link to the external link url so if someone clicks on the picture, they will go to the external link instead of a blow up of the image
The code to do so is within the add to cart code, but I don't know how to apply it to the image:
<?php
/**
* Loop Add to Cart
*
* #author WooThemes
* #package WooCommerce/Templates
* #version 1.6.4
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
global $product;
?>
<?php if ( ! $product->is_in_stock() ) : ?>
<?php echo apply_filters( 'out_of_stock_add_to_cart_text', __( 'Read More', 'woocommerce' ) ); ?>
<?php else : ?>
<?php
$link = array(
'url' => '',
'label' => '',
'class' => ''
);
$handler = apply_filters( 'woocommerce_add_to_cart_handler', $product->product_type, $product );
switch ( $handler ) {
case "variable" :
$link['url'] = apply_filters( 'variable_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'variable_add_to_cart_text', __( 'Select options', 'woocommerce' ) );
break;
case "grouped" :
$link['url'] = apply_filters( 'grouped_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'grouped_add_to_cart_text', __( 'View options', 'woocommerce' ) );
break;
case "external" :
$link['url'] = apply_filters( 'external_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'external_add_to_cart_text', __( 'Read More', 'woocommerce' ) );
break;
default :
if ( $product->is_purchasable() ) {
$link['url'] = apply_filters( 'add_to_cart_url', esc_url( $product->add_to_cart_url() ) );
$link['label'] = apply_filters( 'add_to_cart_text', __( 'Add to cart', 'woocommerce' ) );
$link['class'] = apply_filters( 'add_to_cart_class', 'add_to_cart_button' );
} else {
$link['url'] = apply_filters( 'not_purchasable_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'not_purchasable_text', __( 'Read More', 'woocommerce' ) );
}
break;
}
echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('%s', esc_url( $link['url'] ), esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );
?>
Sorry I'm such a nube, but I can't figure out how to get the link code the same as the 'add to cart' link code, thanks for the help!
Why not copy product-image.php to your theme or template (this will overwrite the Woocommerce default) and then change the following:
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
Where it says
<a href="%s"
Replace %s with your link, or you can register a custom post field and have a different link for each of your products.
You can ignore the "add to cart" code if this is all you are trying to accomplish. I might have misunderstood - so let me know if it's still unclear.

Resources