On Woocommerce, how can we change the URLs on "View cart" and "Checkout" links on the drop down menu that show up on hover over the shopping cart icon on the the home page?
I have the "cart" and "checkout" pages setup but they are not linked to these.
I can view these pages directly with urls. http://mysite/cart and http://mysite/checkout
It seems that there is a problem somewhere with your theme (or in a plugin), as the minicart button links always point to the right cart and checkout pages.
The minicart buttons are hooked in woocommerce_widget_shopping_cart_buttons action hook (in the cart/mini-cart.php WooCommerce template). You will find the details HERE on includes/wc-template-hooks.php core file. It calls 2 functions that are displaying the buttons.
First you should try to refresh WordPress Permalinks, going on WP Settings > Permalinks:
Just at the end of the page click on "save". Empty your cart, and try it again to see if it changes something.
In the code below I remove first the original buttons and I replace them by the same ones where the links are customized. For each you can change the link to feet your needs (I have added in the links ?id=1 (at the end) just for testing purpose, to check changes):
add_action( 'woocommerce_widget_shopping_cart_buttons', function(){
// Removing Buttons
remove_action( 'woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_button_view_cart', 10 );
remove_action( 'woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_proceed_to_checkout', 20 );
// Adding customized Buttons
add_action( 'woocommerce_widget_shopping_cart_buttons', 'custom_widget_shopping_cart_button_view_cart', 10 );
add_action( 'woocommerce_widget_shopping_cart_buttons', 'custom_widget_shopping_cart_proceed_to_checkout', 20 );
}, 1 );
// Custom cart button
function custom_widget_shopping_cart_button_view_cart() {
$original_link = wc_get_cart_url();
$custom_link = home_url( '/cart/?id=1' ); // HERE replacing cart link
echo '' . esc_html__( 'View cart', 'woocommerce' ) . '';
}
// Custom Checkout button
function custom_widget_shopping_cart_proceed_to_checkout() {
$original_link = wc_get_checkout_url();
$custom_link = home_url( '/checkout/?id=1' ); // HERE replacing checkout link
echo '' . esc_html__( 'Checkout', 'woocommerce' ) . '';
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
All code is tested on Woocommerce 3+ and works.
Related
I am trying to hide the Add to Cart button and replace it with a message if the cart is not empty.
Reason: We can only process one order in the cart at a time, regardless of the product type.
Goal: If a customer has already added an item to the cart, they will not see the Add to Cart button on other items. But instead will see a message that states, "Before you can add another product to your cart, please complete your purchase that currently exists in your cart."
I have tested numerous conditional plugins, but none can provide a condition that checks if the cart is empty. I have also viewed various posts in this forum that discuss disabling the Add to Cart button under other conditions, but I have yet to see a code that can hide the Add to Cart button, replace it with a message, if the shopping cart is not empty.
Thanks!
You can achieve this by using a few custom functions.
First we'll make every product non purchasable when something exists in the cart.
add_filter( 'woocommerce_is_purchasable', 'products_no_purchasable_when_other_product_in_cart', 99, 1 );
function products_no_purchasable_when_other_product_in_cart( $is_purchasable ) {
if ( WC()->cart->get_cart_contents_count() > 0) {
$is_purchasable = false;
}
return $is_purchasable;
}
This function alone is enough to prevent users from adding more than one product in the cart. But they would still be able to see and click the "Add to cart" button.
The "Add to cart" button is typically seen in 2 places: on the product page and inside of the product loop, meaning archive pages, shop pages, related products etc.
When the button is displayed inside the loop, we can use filter and replace the the text and the url of the button. In the function below, we replace "Add to cart" text with a long message explaining why a customer can't buy the product and the url is linking to the checkout page.
// On WooCommerce shop and archives pages
add_filter( 'woocommerce_loop_add_to_cart_link', 'change_add_to_cart_button_in_a_loop', 10, 3 );
function change_add_to_cart_button_in_a_loop( $sprintf, $product, $args ) {
// When cart NOT empty
if ( WC()->cart->get_cart_contents_count() > 0 ) {
$button_text = 'Before you can add another product to your cart, please complete your purchase that currently exists in your cart.';
// Button URL
$new_button_url = wc_get_page_permalink( 'checkout' );
// New link + text
$sprintf = sprintf(
'%s',
esc_url( $new_button_url ),
esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
esc_html( $button_text )
);
}
return $sprintf;
}
On the product page, the button will be removed automatically when the product is not purchasable and we are making sure it's not purchasable in the first code snippet. Now we only have to fill the void with some message explaining why the "Add to cart" button is not there. We do it using woocommerce_single_product_summary hook. You can use any other hook on the product page to move this message around.
add_action( 'woocommerce_single_product_summary', 'message_when_other_product_already_in_cart', 10 );
function message_when_other_product_already_in_cart() {
if ( WC()->cart->get_cart_contents_count() > 0) {
$message = 'Before you can add another product to your cart, please complete your purchase that currently exists in your cart.';
echo '<p>'.$message.'</p>';
}
}
And finally, most themes will have ajax "add to cart" buttons. This means the page is not reloaded after you add or remove a product from the cart. For example, you are on the shop page and add one product in the cart. The buttons on other products will still be visible. Or when you open a small cart in the header and remove the product from the cart, the shop/product page won't enable "add to cart" buttons automatically.
That's why we add a simple javasctipt that will reload the page when added_to_cart or removed_from_cart javascript events are triggered. We add this code only to WooCommerce pages.
add_action( 'wp_footer', 'custom_footer_scripts' );
function custom_footer_scripts() {
if ( is_woocommerce() ) {
?>
<script>
jQuery( document.body ).on( 'added_to_cart', function() {
window.location = window.location.href;
});
jQuery( document.body ).on( 'removed_from_cart', function() {
window.location = window.location.href;
});
</script>
<?php
}
}
I tested this on the Storefront theme and with WooCommerce 7.2.2
I'm modifying a theme for WordPress and i can't find a solution for:
1. How can I delete the WooCommerce product image inside the gallery? Because this image is added automatically and cannot be deleted.
IMAGES: https://imgur.com/a/qd0INEX
2. How can I deactivate the cart page, is it possible? I'm only interested in the Checkout page. I've been looking at some codes but they don't allow to select more than 2 products.
Greetings to all who comment, I hope these issues can help more people in the future.
Redirect to Checkout when a Product has been added to the Cart
Second question answer:
How can I deactivate the cart page, is it possible? I'm only interested in the Checkout page. I've been looking at some codes but they don't allow to select more than 2 products.
Step 1.
// Disable AJAX add to cart buttons
First of all, we have to do some small configurations in WooCommerce Settings – Uncheck the “Enable AJAX add to cart buttons on archives” checkbox.
Step 2.
// Change text on add to cart buttons
/*
* Change button text on Product Archives
*/
add_filter( 'woocommerce_loop_add_to_cart_link', 'nik_add_to_cart_text_1' );
function nik_add_to_cart_text_1( $add_to_cart_html ) {
return str_replace( 'Add to cart', 'Buy now', $add_to_cart_html );
}
/*
* Change button text on product pages
*/
add_filter( 'woocommerce_product_single_add_to_cart_text', 'nik_add_to_cart_text_2' );
function nik_add_to_cart_text_2( $product ){
return 'Buy now';
}
I decided that str_replace() for this situation is the most simple and easy solution, but if you do not want to use it, you can replace the first part of the code with this one:
/*
* Change button text on Product Archives
*/
add_filter( 'woocommerce_product_add_to_cart_text', 'nik_add_to_cart_text_1', 10, 2 );
function nik_add_to_cart_text_1( $text, $product ){
return $product->is_purchasable() && $product->is_in_stock() ? 'Buy Now' : 'Read more';
}
Step 3.
// Redirect to Checkout Page
add_filter( 'woocommerce_add_to_cart_redirect', 'nik_skip_cart_redirect_checkout' );
function nik_skip_cart_redirect_checkout( $url ) {
return wc_get_checkout_url();
}
Step 4.
// Remove “The product has been added to your cart” message
add_filter( 'wc_add_to_cart_message_html', 'nik_remove_add_to_cart_message' );
function nik_remove_add_to_cart_message( $message ){
return '';
}
I have a website where product gallery is not working on product detail page, I have tried to add third party plugin but nothing seems to working.
Here when you click on product image, it should open in lightbox as product gallery.
https://bosheimsmarken.no/produkt/reinrot-te-med-tea-shotnon-binding-subscriptions/
Try to install this plugin and check if there is option to disable this gallery in theme options or woocommerce options.
Product Gallery Slider for Woocommerce by codeixer
Also add this code in your functions.php in active theme
add_action( 'after_setup_theme', 'bbloomer_remove_zoom_lightbox_theme_support', 99 );
function bbloomer_remove_zoom_lightbox_theme_support() {
remove_theme_support( 'wc-product-gallery-zoom' );
remove_theme_support( 'wc-product-gallery-lightbox' );
remove_theme_support( 'wc-product-gallery-slider' );
}
I want to add additional button in woocommerce single product. In which file I need to make changes?
Example on screen:
enter image description here
Try this code,
function wc_shop_demo_button() {
echo '<a class="button demo_button" style="padding-right: 0.75em;padding-left: 0.75em;margin-left: 8px; background-color: #0ebc30;" href="'.get_field( "url_demo" ).'" target="_blank">Show Details</a>';
}
add_action( 'woocommerce_after_shop_loop_item', 'wc_shop_demo_button', 20 );
add_action( 'woocommerce_after_add_to_cart_button', 'wc_shop_demo_button', 20 );
Hope this will helps you. For more details visit,
how to add button after woocommerce shop loop item
First of all, create a Custom Field using Advanced Custom Fields plugin for Woocommerce Product Page.
For creating a custom field using the ACF plugin, refer to the below article.
https://wpmayor.com/woocommerce-custom-fields-how-to-create-and-display-them/
To display the Custom Button in the frontend of the website, add the below code in functions.php file.
function rf_custom_product_button() {
echo '<a class="button custom_button" href="'.get_field( "custom_button" ).'" target="_blank">Click Here</a>';
}
add_action( 'woocommerce_after_add_to_cart_button', 'rf_custom_product_button', 20 );
add_action( 'woocommerce_after_shop_loop_item', 'rf_custom_product_button', 20 );
In the above code, Change the "custom_button" to the name of the field which you create using ACF.
I am setting up a woocommerce shop and I want to add a new page between the shopping cart and the final payment. I currently have my cart page (cart. php), and for example the finalize purchase button, be "next", on this new page I want to add a number of functions and the finalize purchase button to make the final payment.
By default the configuration is: product page -> shopping cart -> payment_final. My idea is to add one more page to this cycle: product page -> shopping cart -> My_page_with_other_options -> final payment.
What files would I have to touch to modify the purchase cycle?
A greeting and thank you in advance.
Try like this
add_action( 'woocommerce_widget_shopping_cart_buttons', function(){
// Removing Buttons
remove_action( 'woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_proceed_to_checkout', 20 );
// Adding customized Buttons
add_action( 'woocommerce_widget_shopping_cart_buttons', 'custom_widget_shopping_cart_proceed_to_checkout', 20 );
}, 1 );
// Custom Checkout button
function custom_widget_shopping_cart_proceed_to_checkout() {
$custom_link = 'your page url';
echo '' . esc_html__( 'Checkout', 'woocommerce' ) . '';
}
Change cart and checkout button links on WooCommerce mini cart widget