Which file do I need to edit if I don’t want user to click the link to apply the coupon code?
In simple, I want no LINK to be clicked on.
I want the apply coupon appear below the text "Have a coupon?" so that user can ALWAYS see the section.
Updated
This can be done very easily using dedicated woocommerce_checkout_coupon_message filter hook:
add_filter( 'woocommerce_checkout_coupon_message', 'custom_checkout_coupon_message', 20, 1 );
function custom_checkout_coupon_message( $message ) {
?>
<script type='text/javascript'>
jQuery(document).ready( function($){
setTimeout(function(){
$('form.checkout_coupon').css('display','block');
}, 300);
});
</script>
<?php
// HERE your custom message
return __( 'Have a coupon?', 'woocommerce' ) . ' <a class="showcoupon-off">' . __( 'Below you can enter your coupon code', 'woocommerce' ) . '</a>';
}
Code goes in function.php file of the active child theme (or active theme). Tested and works.
Related
We're building a webshop with a lot of custom code added and hooked on WooCommerce.
On the single product page, we have ofcourse the add-to-cart button, which automatically redirects to the cart page.
Underneath the add-to-cart button, we've added a button to add the product to a 'quotation'. I general, this button has to exactly copy the Add-to-cart button functions, but in stead of redirecting to the Cart page, it has to redirect to a custom page.
There is this code to change the redirect url when adding a product in your cart, but that's not enough.
function my_custom_add_to_cart_redirect( $url ) {
$url = get_permalink( 1 ); // URL to redirect to (1 is the page ID here)
return $url;
}
add_filter( 'woocommerce_add_to_cart_redirect', 'my_custom_add_to_cart_redirect' );
When clicking on the add to cart button -> Cart page
When clicking on the add to quote button -> Custom page
Is there any possibility to 'copy' the functionalities from the Add-to-cart button, but change the redirect that's happening afterwards?
NOTE: We hooked on a few WooCommerce functions like adding Cart Item Data, so all of these have to be 'copied' as well.
I have divided my answer into 3 parts. The intention is to add a copy of the existing add to cart button with 1 difference, and we will use that difference for the redirect.
Step 1) Adding the (copy) of the add to cart button can be done by adjusting/overwriting the template file, however it can also be done by using the available hooks in the template file, for example the woocommerce_after_add_to_cart_button hook
// Add new/extra button
function action_woocommerce_after_add_to_cart_button() {
global $product;
// Button text
$button_text = __( 'My new text', 'woocommerce' );
// Is a WC product
if ( is_a( $product, 'WC_Product' ) ) {
// Simple products
if ( $product->is_type( 'simple' ) ) {
echo '<button type="submit" name="add-to-cart" value="'. esc_attr( $product->get_id() ) . '" class="single_add_to_cart_button button alt custom_redirect_button">' . $button_text . '</button>';
// Variable products
} elseif( $product->is_type( 'variable' ) ) {
echo '<button type="submit" class="single_add_to_cart_button button alt custom_redirect_button">' . $button_text . '</button>';
}
}
}
add_action( 'woocommerce_after_add_to_cart_button', 'action_woocommerce_after_add_to_cart_button', 10 );
This adds a copy of the existing add to cart button for simple and variable products but with 1 difference. Namely: when the button is clicked, a hidden input field is added via jQuery (step 2).
Step 2) This is the code to add the hidden input field with a certain value. I added the jQuery via an action hook but this can just as well be included in an external js file.
// Add jQuery to footer
function action_wp_footer() {
// Only on single product page
if ( is_product() ) {
?>
<script type="text/javascript">
jQuery( function($) {
// Add to cart button or custom button is clicked
$( document ).on( 'click', '.custom_redirect_button', function () {
// NOT disabled
if ( ! $( this ).hasClass( 'disabled' ) ) {
// Add hidden input field after
$( this ).after( '<input type="hidden" name="custom-redirect" value="my-value" />' );
}
});
});
</script>
<?php
}
}
add_action( 'wp_footer', 'action_wp_footer', 10 );
Step 3) Get the value from the hidden input field and when it matches, then it is our custom button and we apply our own url.
// Redirect
function filter_woocommerce_add_to_cart_redirect( $redirect_url, $product ) {
// If value isset
if ( isset( $_REQUEST['custom-redirect'] ) ) {
// If equal to
if ( $_REQUEST['custom-redirect'] == 'my-value' ) {
// URL to redirect to (1 is the page ID here)
$redirect_url = get_permalink( 1 );
}
}
return $redirect_url;
}
add_filter( 'woocommerce_add_to_cart_redirect', 'filter_woocommerce_add_to_cart_redirect', 10, 2 );
I use a code that changes the text and style of the "Add to Cart" button for a product if the item is already in the cart. Many thanks to 7uc1f3r for this.
/* for single product */
add_filter( 'woocommerce_product_single_add_to_cart_text', 'single_product_button_text' );
function single_product_button_text( $text ) {
if( WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( get_the_ID() ) ) ) {
$text = 'Product in cart';
}
return $text;
}
/* for archive/category pages */
add_filter( 'woocommerce_product_add_to_cart_text', 'products_button_text', 20, 2 );
function products_button_text( $text, $product ) {
if(
$product->is_type( 'simple' )
&& $product->is_purchasable()
&& $product->is_in_stock()
&& WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( $product->get_id() ) )
) {
$text = 'Product in cart';
}
return $text;
}
function action_wp_footer() {
?>
<script>
jQuery(document).ready(function($) {
var selector = '.add_to_cart_text:contains("Product in cart")';
// Selector contains specific text
if ( $( selector ).length > 0 ) {
$( selector ).addClass( 'product-is-added' );
} else {
$( selector ).removeClass( 'product-is-added' );
}
});
</script>
<?php
}
add_action( 'wp_footer', 'action_wp_footer' );
After adding a product to the cart, I have to refresh the page each time to get new text and button style.
UPDATE
I also used Relabel "add to cart" button after add to cart in WooCommerce 2nd function code to change the text and style of the button using AJAX. The text changes, but all styles break.
Unfortunately, adding styles on the echo '<div class="add_to_cart_text">' . $new_text . '</div>'; line doesn't work.
Any help?
As your website shop and archives pages are very custom (doesn't have the default WooCommerce html structure) you need a very custom jQuery code made for your website.
Your Ajax add to cart button has by default this output html example:
<a href="?add-to-cart=1234" rel="nofollow" data-quantity="1" data-product_id="1234" class="add-to-cart-grid btn-link nasa-tip add_to_cart_button ajax_add_to_cart product_type_simple nasa-tiped" data-product_sku="AB123" data-tip="Add to Cart">
<span class="add_to_cart_text">Add to Cart</span>
<i class="cart-icon pe-7s-cart"></i>
</a>
And you need on Ajax added to cart to have the following output html (example):
<a href="?add-to-cart=1234" rel="nofollow" data-quantity="1" data-product_id="1234" class="add-to-cart-grid btn-link nasa-tip add_to_cart_button ajax_add_to_cart product_type_simple nasa-tiped" data-product_sku="AB123" data-tip="Product in cart">
<span class="add_to_cart_text product-is-added">Product in cart</span>
<i class="cart-icon pe-7s-cart"></i>
</a>
So know we can manage the jQuery code that is needed for your custom Ajax add to cart buttons on shop and archive pages…
Try the following that will change the text on your custom Ajax add to cart button on added_to_cart WooCommerce jQuery event:
add_action( 'wp_footer', 'ajax_button_text_js_script' );
function ajax_button_text_js_script() {
$text = __('Product in cart', 'woocommerce');
?>
<script>
jQuery(function($) {
var text = '<?php echo $text; ?>', $this;
$(document.body).on('click', '.ajax_add_to_cart', function(event){
$this = $(this); // Get button jQuery Object and set it in a variable
});
$(document.body).on('added_to_cart', function(event,b,data){
var buttonText = '<span class="add_to_cart_text product-is-added">'+text+'</span><i class="cart-icon pe-7s-cart"></i>';
// Change inner button html (with text) and Change "data-tip" attribute value
$this.html(buttonText).attr('data-tip',text);
});
});
</script>
<?php
}
Code goes in functions.php file of the active child theme (or active theme). Tested and works.
I have something similar implemented on a website.
What might help is
.on('input change', function() { // Your code here }).change();
this updated my product page in real time and I believe you should be able to find a way to implement it to change the text on the add to cart button.
I am new to JavaScript so please bear with me and I hope my answer was at least a little helpful.
How can I detect that Remove button/link clicked to remove the coupon from the checkout page in woocommerce.
You can use jQuery to live detect when "remove coupon" is clicked this way:
add_action( 'wp_footer', 'coupon_removed_script' );
function coupon_removed_script() {
if( is_cart() || ( is_checkout() && ! is_wc_endpoint_url() ) ):
?>
<script type="text/javascript">
jQuery(function($){
$('a.woocommerce-remove-coupon').on( 'click', function(){
console.log('click remove coupon');
alert('click remove coupon');
});
})
</script>
<?php
endif;
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
And you can also use the following code to do something when coupon is removed (where $coupon_code is the removed coupon code argument):
add_action("woocommerce_removed_coupon", 'coupon_removed_action');
function coupon_removed_action( $coupon_code ) {
// Do something
}
Code goes in function.php file of your active child theme (or active theme).
In Woocommerce, is there a way to display a message to a customer when they add the first item to the basket?
I want to warn customers that they have 30 minutes to shop before their cart is emptied.
This is not so simple as you have:
NORMAL "Add to cart" buttons (Not AJAX)
AJAX enabled "Add to cart" buttons (If it's enabled in Woocommerce settings)
So below you will find 2 hooked functions for both (where you will set your message):
// For NORMAL add to cart
add_filter( 'woocommerce_add_to_cart_validation', 'custom_message_add_to_cart', 20, 3 );
function custom_message_add_to_cart( $passed, $product_id, $quantity ) {
if( WC()->cart->is_empty() ){
$message = __("1st cart item message here", "woocommerce");
wc_add_notice( $message, 'notice' );
}
return $passed;
}
// For AJAX add to cart (if enabled)
add_action( 'woocommerce_shortcode_before_product_cat_loop', 'custom_print_message', 11 );
add_action( 'woocommerce_before_shop_loop', 'custom_print_message', 11 );
add_action( 'woocommerce_before_single_product', 'custom_print_message', 11 );
function custom_print_message() {
if( WC()->cart->is_empty() ){
$message = __("1st cart item message here", "woocommerce");
// HERE BELOW, replace clothing' with your product category (can be an ID, a slug or a name)
echo '<div class="woocommerce-info hidden" style="display:none;">' . $message . '</div>';
}
?>
<script type="text/javascript">
jQuery( function($){
$('body').on('added_to_cart', function(){
$('.woocommerce-info.hidden').show('fast');
});
});
</script>
<?php
}
Code goes in function.php file of the active child theme (or active theme). Tested and Works.
I have created a plugin that adds a input box, 'Logo URL' on the Settings > General page in WordPress. This input can be called and works correctly. I have created another plugin that pulls the 'Logo URL' and applies the path to pull an image for the Login screen. Everything appears peachy.
The only issue I am having is that I would like to move the 'Logo URL' on the Settings > General page to up under 'Site Address (URL)'. I am at a loss on how to do this. I have scoured the web and been unable to find a helpful answer.
I am currently removing the original General page and adding a New General page but am unsure how to parse the correct options-general.php.
How to move the Logo_URL higher on the General Page?
/**
* This is the code to create the Settings box on the Settings > General
*/
$new_general_setting = new new_general_setting();
class new_general_setting {
function new_general_setting( ) {
add_filter( 'admin_init' , array( &$this , 'register_fields' ) );
}
function register_fields() {
register_setting( 'general', 'URL_logo', 'esc_attr' );
add_settings_field('URL_logo', '<label for="URL_logo">'.__('Website logo (URL)' , 'URL_logo' ).'</label>' , array(&$this, 'fields_html') , 'general' );
}
function fields_html() {
$value = get_option( 'URL_logo', '' );
echo '<input type="text" id="URL_logo" name="URL_logo" value="' . $value . '" />';
}
}
No, there's no way of ordering that natively. WordPress first prints its stuff then ours. It has to be done with jQuery.
add_action( 'admin_footer-options-general.php', function()
{
?>
<script type="text/javascript">
jQuery(document).ready( function($)
{
var son = $("label[for='URL_logo']").parent().parent(); // Our setting field
var father = $("label[for='home']").parent().parent(); // WordPress setting field
son.insertAfter(father);
});
</script>
<?php
});
The recommended way is to enqueue the JS inside an action call for "admin_print_scripts-$hookname". Note the hook name use in admin_footer and admin_head too.
As your field only changes after the page loaded, we can notice the "jump". To smooth it, we can use:
add_action( 'admin_head-options-general.php', function()
{
echo '<style>#wpbody .wrap form{display:none}</style>';
});
And add this jQuery after replaceWith():
$('#wpbody .wrap form').fadeIn('slow');