Changing Woocommerce "Add to cart" button to "view product" button - php

Trying to change the woocommerce button text from "add to cart" to "read more" and redirect it so that clicking the button takes the user to the individual product page. So far, the link works but all the text on the button says is "Button" when I need it to say "Read More". I'll place the code below, can anyone please tell me what the problem is.
/*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('<br>[button link="' . esc_attr($link) . '"]Read More[/button]');
}

Try this alternative that will replace add to cart button by a linked button to the product in Shop and archives pages
// Replace add to cart button by a linked button to the product in Shop and archives pages
add_filter( 'woocommerce_loop_add_to_cart_link', 'replace_loop_add_to_cart_button', 10, 2 );
function replace_loop_add_to_cart_button( $button, $product ) {
// Not needed for variable products
if( $product->is_type( 'variable' ) ) return $button;
// Button text here
$button_text = __( "View product", "woocommerce" );
return '<a class="button" href="' . $product->get_permalink() . '">' . $button_text . '</a>';
}
Code goes in function.php file of your active child theme (or theme). Tested and works.

Use this code to replace the default “Add to Cart” button with “Read More” (or anything you like) linking to the single product page.
// First, remove Add to Cart Button
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
// Second, add View Product Button
add_action( 'woocommerce_after_shop_loop_item', 'shop_view_product_button', 10);
function shop_view_product_button() {
global $product;
$link = $product->get_permalink();
echo 'View Product';
}
You can add this PHP Snippet at the very bottom of your active child theme (or main theme) functions.php file. Code Source

Related

Customize Add to Cart button on specific WooCommerce product categories

I am trying to change the add to cart button for a specific product category on my WooCommerce archives pages to a "Read more" button that will be linked to the product page (but Not on the single product page itself).
(Woocommerce, with Elementor on Wordpress)
Using "Replace add to cart button with a read more linked to product page on shop pages in WooCommerce 3" answer code, how to restrict it to only one product category (the term name is "Classes" in this case)?
Any help is appreciated.
You can use has_term() conditional function to target a product category, this way:
add_filter( 'woocommerce_loop_add_to_cart_link', 'replacing_add_to_cart_button', 10, 2 );
function replacing_add_to_cart_button( $button, $product ) {
if ( has_term( 'Classes', 'product_cat', $product->get_id() ) ) {
$button_text = __("Read more", "woocommerce");
$button = '<a class="button" href="' . $product->get_permalink() . '">' . $button_text . '</a>';
}
return $button;
}
Code goes in functions.php file of your active child theme (or active theme) or also in any plugin file.

Change add to cart button color and disable it for out of stock products in Woocommerce

In woocommerce I have changed the add to cart button redirect to add to checkout page.
When some products are out of stock in categories or homepage the add to checkout button misses the content icon.
How Can I change the color of the button using php and disable it for button pressed event
Shall I use something like:
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_stock', 10 );
function woocommerce_template_loop_stock() {
global $product;
if ( ! $product->managing_stock() && ! $product->is_in_stock() )
echo '<p class="stock out-of-stock">Out of Stock</p>';
}
But I am a bit confused
Try the following code:
// For Woocommerce version 3 and above only
add_filter( 'woocommerce_loop_add_to_cart_link', 'filter_loop_add_to_cart_link', 20, 3 );
function filter_loop_add_to_cart_link( $button, $product, $args = array() ) {
if( $product->is_in_stock() ) return $button;
// HERE set your button text (when product is not on stock)
$button_text = __('Not available', 'woocommerce');
// HERE set your button STYLING (when product is not on stock)
$color = "#777"; // Button text color
$background = "#aaa"; // Button background color
// Changing and disbling the button when products are not in stock
$style = 'color:'.$color.';background-color:'.$background.';cursor:not-allowed;';
return sprintf( '<a class="button disabled" style="%s">%s</a>', $style, $button_text );
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.

Hiding prices on the Woocommerce shop pages

I'm using WordPress with a WooCommerce plugin and I would like to hide the prices from the shop page (Eg. $20 - $50). I have tried researching it but I haven't found much relating to this problem.
I only want to hide the prices on the shop page, not the individual product pages.
Any help provided will be much appreciated.
You can use this simple hooked function that will remove all product prices from Woocommerce archive pages as shop, product category archives and product tag archives pages:
add_filter( 'woocommerce_after_shop_loop_item_title', 'remove_woocommerce_loop_price', 2 );
function remove_woocommerce_loop_price() {
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
}
Code goes in function.php file of your active child theme (or theme). Tested and works.
If you want to only target Shop pages, you will have to make it this way:
add_filter( 'woocommerce_after_shop_loop_item_title', 'remove_woocommerce_loop_price', 2 );
function remove_woocommerce_loop_price() {
if( ! is_shop() ) return; // only on shop pages
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
}
Updated: You may also want to replace add to cart button by a linked button to the product in Shop and archives pages
// Replace add to cart button by a linked button to the product in Shop and archives pages
add_filter( 'woocommerce_loop_add_to_cart_link', 'replace_loop_add_to_cart_button', 10, 2 );
function replace_loop_add_to_cart_button( $button, $product ) {
// Not needed for variable products
if( $product->is_type( 'variable' ) ) return $button;
// Button text here
$button_text = __( "View product", "woocommerce" );
return '<a class="button" href="' . $product->get_permalink() . '">' . $button_text . '</a>';
}

Removing or hiding WooCommerce add to cart buttons

I would like to hide add to cart button and to show a custom text instead of button.
I am trying following hook to remove button:
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart');
Here is the way that you are looking for (I think).
The first function will replace on shop pages the add-to-cart buttons by normal buttons linked to their single product pages, like below:
The second function will replace the add-to-cart button (and quantities) by your custom text as this:
Here is that code:
// Shop and archives pages: we replace the button add to cart by a link to the product
add_filter( 'woocommerce_loop_add_to_cart_link', 'custom_text_replace_button', 10, 2 );
function custom_text_replace_button( $button, $product ) {
$button_text = __("View product", "woocommerce");
return '<a class="button" href="' . $product->get_permalink() . '">' . $button_text . '</a>';
}
// replacing add to cart button and quantities by a custom text
add_action( 'woocommerce_single_product_summary', 'replacing_template_single_add_to_cart', 1, 0 );
function replacing_template_single_add_to_cart() {
// Removing add to cart button and quantities
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
// The text replacement
add_action( 'woocommerce_single_product_summary', function(){
// set below your custom text
$text = __("My custom text goes here", "woocommerce");
// Temporary style CSS
$style_css = 'style="border: solid 1px red; padding: 0 6px; text-align: center;"';
// Output your custom text
echo '<p class="custom-text" '.$style_css.'>'.$text.'</a>';
}, 30 );
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
Tested and works
1. In case you want to completely disable Add to cart button, add this code to your theme's functions.php file.
add_filter( 'woocommerce_is_purchasable', false );
2. To add some HTML content after Add to cart button, try this code.
add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart_button_func' );
function add_content_after_addtocart_button_func() {
echo '<p>Hi, I'm the text after Add to cart Button.</p>';
}
I was able to do this with a Wordpress plugin, i found later https://wordpress.org/plugins/woo-options/

Changing the redirect of the “add to cart” button in woocommerce store in Shop page

I am trying to change the redirect URL in the woocommerce for the 'add to cart' button in pages other than the single product page. The URL for the single product page can be changed with this solution. However this solution will not work for the for any other pages, to change the redirect after pressing the 'add to cart' button. Any help is greatly appreciated.
To make woocommerce_add_to_cart_redirect work on pages like shop, categories or tags archives pages, you need first in backend WooCommerce > Settings > Products > Display:
Disable the checkbox "Enable AJAX add to cart buttons on archives".
Then the hooked the code will work with woocommerce_add_to_cart_redirect hook on all woocommerce pages.
function wc_add_to_cart_custom_redirect() {
// Here the redirection
return site_url('/mypage/');
}
add_filter( 'woocommerce_add_to_cart_redirect', 'wc_add_to_cart_custom_redirect' );
You can use this in your Appearence>Theme Editor>function.php
add_filter( 'woocommerce_loop_add_to_cart_link', 'replacing_add_to_cart_button', 10, 2 );
function replacing_add_to_cart_button( $button, $product ) {
$button_text = __("View product", "woocommerce");
$button = '<a class="button" href="' . $product->get_permalink() . '">' . $button_text . '</a>';
return $button;
}
This will change your Add to cart to View porducts and the Url would be that specific products's Url

Categories