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
Related
I've tried several things adding the code to functions.php.
I think that the time I've been closer was with this code:
printf('<a class="button" href=" ..... "?>');
echo woocommerce_get_product_thumbnail();
printf('</a>');
}
But I don't know what to href on there.
previously, I removed the other liks with:
/*remove links to loop, add link to title*/
remove_action('woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10);
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5);
add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_link_open', 5);
add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_link_close', 20);
function woocommerce_template_loop_product_title() {
echo sprintf('<h2 class="woocommerce-loop-product__title"><a title="%2$s" href="%1$s">%2$s</a></h2>',
get_the_permalink(),
get_the_title()
);
}
Thank you very much
There may be some modifications that need to be made for it to fit your scenario.
Add the following code to your functions.php file.
This will only add the link to the thumbnail if you are on the products page.
function add_link_woocommerce_single_product_image_thumbnail_html( $html, $post_thumbnail_id ) {
/**
* This will only add the link on a single product page.
*/
if ( is_product() ) :
global $product;
$product_id = $product->get_id();
$product_url = get_permalink( $product_id );
$main_image = true;
$flexslider = (bool) apply_filters( 'woocommerce_single_product_flexslider_enabled', get_theme_support( 'wc-product-gallery-slider' ) );
$gallery_thumbnail = wc_get_image_size( 'gallery_thumbnail' );
$thumbnail_size = apply_filters( 'woocommerce_gallery_thumbnail_size', array( $gallery_thumbnail['width'], $gallery_thumbnail['height'] ) );
$image_size = apply_filters( 'woocommerce_gallery_image_size', $flexslider || $main_image ? 'woocommerce_single' : $thumbnail_size );
$full_size = apply_filters( 'woocommerce_gallery_full_size', apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' ) );
$thumbnail_src = wp_get_attachment_image_src( $post_thumbnail_id, $thumbnail_size );
$full_src = wp_get_attachment_image_src( $post_thumbnail_id, $full_size );
$alt_text = trim( wp_strip_all_tags( get_post_meta( $post_thumbnail_id, '_wp_attachment_image_alt', true ) ) );
$image = wp_get_attachment_image(
$post_thumbnail_id,
$image_size,
false,
apply_filters(
'woocommerce_gallery_image_html_attachment_image_params',
array(
'title' => _wp_specialchars( get_post_field( 'post_title', $post_thumbnail_id ), ENT_QUOTES, 'UTF-8', true ),
'data-caption' => _wp_specialchars( get_post_field( 'post_excerpt', $post_thumbnail_id ), ENT_QUOTES, 'UTF-8', true ),
'data-src' => esc_url( $full_src[0] ),
'data-large_image' => esc_url( $full_src[0] ),
'data-large_image_width' => esc_attr( $full_src[1] ),
'data-large_image_height' => esc_attr( $full_src[2] ),
'class' => esc_attr( $main_image ? 'wp-post-image' : '' ),
),
$post_thumbnail_id,
$image_size,
$main_image
)
);
$html = '<div data-thumb="' . esc_url( $thumbnail_src[0] ) . '" data-thumb-alt="' . esc_attr( $alt_text ) . '" class="woocommerce-product-gallery__image">' . $image . '</div>';
return $html;
endif;
return $html;
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'add_link_woocommerce_single_product_image_thumbnail_html', 10, 2 );
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 );
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;
}
I need to replace the Add to Cart button (only on certain categories) with a custom button for "Text a Dealer." The "Text a Dealer" button will trigger a gravity form in a lightbox which allows the user to submit a text message over the Twilio SMS service.
Here is a screenshot
I think I know how to link the button to a form in a lightbox but I do not know how to replace the button.
add_filter( 'woocommerce_loop_add_to_cart_link', 'replace_default_button' );
function replace_default_button(){
return '<button>Text a Dealer</button>';
}
You can replace button code with your desired code.
This will replace the default button code with your custom code.
You also want this customization to be applicable only on certain categories. This can be achieved by addition of some more code. See below.
add_filter( 'woocommerce_loop_add_to_cart_link', 'replace_default_button' );
function replace_default_button(){
//list category slugs where button needs to be changed
$selected_cats = array('cat-one-slug', 'cat-two-slug', 'cat-three-slug');
//get current category object
$current_cat = get_queried_object();
//get category slug from category object
$current_cat_slug = $current_cat->slug;
//check if current category slug is in the selected category list
if( in_array($current_cat_slug, $selected_cats) ){
//replace default button code with custom code
return '<button>Text a Dealer</button>';
}
}
Hope this helps.
$args = array();
if ( $product ) {
$defaults = array(
'quantity' => 1,
'class' => implode(
' ',
array_filter(
array(
'button add-to-cart-loop',
'product_type_' . $product->get_type(),
$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
$product->supports( 'ajax_add_to_cart' ) && $product->is_purchasable() && $product->is_in_stock() ? 'ajax_add_to_cart' : '',
)
)
)
);
$args = apply_filters( 'woocommerce_loop_add_to_cart_args', wp_parse_args( $args, $defaults ), $product );
$price = $product->get_price();
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<a rel="nofollow" data-product_price_'.esc_attr( $product->get_id() ).'="'. $price .'" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s"><span>%s</span></a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
esc_html( $product->add_to_cart_text() )
),
$product );
}
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.