First of all, I have no idea how old and / or deprecated (that's the word right?) this code is. My old developer (passed away) gave it to me well over two years ago, and now I am trying to make sense of it all.
Not being a programmer, I need help with two things, whereof the second part is the most important. When ALL products are removed from the checkout, redirect to the shop page.
This is the code I am using for adding qty and what not to the checkout.
add_filter( 'woocommerce_cart_item_name', 'jess_product_thumbnail_on_checkout_order_review', 20, 3 );
function jess_product_thumbnail_on_checkout_order_review( $product_name, $cart_item, $cart_item_key ) {
if ( is_checkout() ) {
$product = $cart_item['data'];
$thumbnail = $product->get_image(array(50, 50));
$image_html = '<div class="product-item-thumbnail">' . $thumbnail . '</div>';
$product_name_link = '' . $product_name . '';
$product_name = $image_html . $product_name_link;
}
return $product_name;
}
add_action( 'wp_footer', 'jess_product_image_css_checkout', 900 );
function jess_product_image_css_checkout(){
if (is_checkout()){ ?>
<style>
.product-item-thumbnail{float:left; padding-right:20px;}
.product-item-thumbnail img{margin:0!important;}
</style>
<?php
}}
add_filter('woocommerce_checkout_cart_item_quantity', 'jess_qty_change_remove_item_checkout_order_review', 1000, 3);
function jess_qty_change_remove_item_checkout_order_review( $quantity_html, $cart_item, $cart_item_key ) {
$_product = $cart_item['data'];
if ($_product->is_sold_individually()){
$product_quantity = sprintf('<input type="hidden" name="cart[%s][qty]" value="" />', $cart_item_key);
}else{
$product_quantity = woocommerce_quantity_input(
array(
'input_name' => "cart[{$cart_item_key}][qty]",
'input_value' => $cart_item['quantity'],
'max_value' => $_product->get_max_purchase_quantity(),
'min_value' => '1',
'class' => 'qtyinput',
'placeholder' => 'Qty',
'product_name' => $_product->get_name(),
),
$_product,
false
);
}
$cart = WC()->cart->get_cart();
foreach ($cart as $cart_key => $cart_value){
if ($cart_key == $cart_item_key){
$product_id = $cart_item['product_id'];
$_product = $cart_item['data'] ;
$remove_product = sprintf(
'Remove',
esc_url(wc_get_cart_remove_url($cart_key)),
__( 'Remove From My Order', 'woocommerce' ),
esc_attr( $product_id ),
esc_attr( $_product->get_sku() ),
esc_attr( $cart_item_key )
);
}}
return '<br><span class="product-quantity">' . sprintf( 'Qty: %s', $cart_item['quantity'] ) . ' / ' . $remove_product . '</span>'.$product_quantity.'';
}
add_action( 'wp_footer', 'refresh_checkout_on_quantity_change' );
function refresh_checkout_on_quantity_change() {
if (is_checkout()){ ?>
<script type="text/javascript">
<?php $admin_url = get_admin_url(); ?>
jQuery("form.checkout").on("change", "input.qty", function(){
var data = {
action: 'update_order_qty',
security: wc_checkout_params.update_order_review_nonce,
post_data: jQuery('form.checkout').serialize()
};
jQuery.post('<?php echo $admin_url; ?>' + 'admin-ajax.php', data, function(response){
jQuery('body').trigger('update_checkout');
});
});
</script>
<?php
}}
add_action( 'init', 'jess_load_ajax_checkout_qty_and_removal' );
function jess_load_ajax_checkout_qty_and_removal(){
if (!is_user_logged_in()){
add_action( 'wp_ajax_nopriv_update_order_qty', 'update_order_qty');
}else{
add_action( 'wp_ajax_update_order_qty', 'update_order_qty');
}}
function update_order_qty(){
$values = array();
parse_str($_POST['post_data'], $values);
$cart = $values['cart'];
foreach ($cart as $cart_key => $cart_value){
WC()->cart->set_quantity( $cart_key, $cart_value['qty'], false );
WC()->cart->calculate_totals();
woocommerce_cart_totals();
}
exit;
}
add_action( 'wp_footer', 'jess_remove_product_from_checkout_script' );
function jess_remove_product_from_checkout_script() { ?>
<script>
jQuery( function($){
if (typeof woocommerce_params === 'undefined')
return false;
console.log('defined');
$(document).on('click', 'tr.cart_item a.remove-product', function (e){
e.preventDefault();
var product_id = $(this).attr("data-product_id"),
cart_item_key = $(this).attr("data-cart_item_key"),
product_container = $(this).parents('.shop_table');
product_container.block({
message: null,
overlayCSS: {
cursor: 'none'
}
});
$.ajax({
type: 'POST',
dataType: 'json',
url: wc_checkout_params.ajax_url,
data: {
action: "product_remove",
product_id: product_id,
cart_item_key: cart_item_key
},
success: function (result) {
$('body').trigger('update_checkout');
console.log(result);
}
});
});
});
</script>
<?php
}
add_action('wp_ajax_product_remove', 'ajax_product_remove');
add_action('wp_ajax_nopriv_product_remove', 'ajax_product_remove');
function ajax_product_remove(){
ob_start();
foreach (WC()->cart->get_cart() as $cart_item_key => $cart_item) {
if($cart_item['product_id'] == $_POST['product_id'] && $cart_item_key == $_POST['cart_item_key'] ) {
WC()->cart->remove_cart_item($cart_item_key);
}
}
WC()->cart->calculate_totals();
WC()->cart->maybe_set_cart_cookies();
woocommerce_order_review();
$woocommerce_order_review = ob_get_clean();
}
Here is the modified code. I have added some comments where what is changed. This is tested on storefront theme and works.
//We need to load cart scripts
function checkout_woocommerce_scripts()
{
if ( is_checkout() ) wp_enqueue_script( 'wc-cart' );
}
add_action( 'wp_enqueue_scripts', 'checkout_woocommerce_scripts', 10 );
//When we remove all products from checkout will redirect to cart so we redirect to shop instead
//This also will work if we are on cart page and remove all products
add_action('template_redirect','redirect_cart_page');
function redirect_cart_page() {
if(is_cart() && WC()->cart->get_cart_contents_count() == 0 ):
wp_safe_redirect(wc_get_page_permalink( 'shop' ));
endif;
}
add_filter( 'woocommerce_cart_item_name', 'jess_product_thumbnail_on_checkout_order_review', 20, 3 );
function jess_product_thumbnail_on_checkout_order_review( $product_name, $cart_item, $cart_item_key ) {
if ( is_checkout() ) {
$product = $cart_item['data'];
$thumbnail = $product->get_image(array(50, 50));
$image_html = '<div class="product-item-thumbnail">' . $thumbnail . '</div>';
$product_name_link = '' . $product_name . '';
$product_name = $image_html . $product_name_link;
}
return $product_name;
}
add_action( 'wp_footer', 'jess_product_image_css_checkout', 900 );
function jess_product_image_css_checkout(){
if (is_checkout()){ ?>
<style>
.product-item-thumbnail{float:left; padding-right:20px;}
.product-item-thumbnail img{margin:0!important;}
</style>
<?php
}
}
//In this function all i did change is the class of the remove button from remove-product to product-remove
add_filter('woocommerce_checkout_cart_item_quantity', 'jess_qty_change_remove_item_checkout_order_review', 1000, 3);
function jess_qty_change_remove_item_checkout_order_review( $quantity_html, $cart_item, $cart_item_key ) {
$_product = $cart_item['data'];
if ($_product->is_sold_individually()){
$product_quantity = sprintf('<input type="hidden" name="cart[%s][qty]" value="" />', $cart_item_key);
}else{
$product_quantity = woocommerce_quantity_input(
array(
'input_name' => "cart[{$cart_item_key}][qty]",
'input_value' => $cart_item['quantity'],
'max_value' => $_product->get_max_purchase_quantity(),
'min_value' => '1',
'class' => 'qtyinput',
'placeholder' => 'Qty',
'product_name' => $_product->get_name(),
),
$_product,
false
);
}
$cart = WC()->cart->get_cart();
foreach ($cart as $cart_key => $cart_value){
if ($cart_key == $cart_item_key){
$product_id = $cart_item['product_id'];
$_product = $cart_item['data'] ;
$remove_product = sprintf(
'Remove',
esc_url(wc_get_cart_remove_url($cart_key)),
__( 'Remove From My Order', 'woocommerce' ),
esc_attr( $product_id ),
esc_attr( $_product->get_sku() ),
esc_attr( $cart_item_key )
);
}
}
return '<br><span class="product-quantity">' . sprintf( 'Qty: %s', $cart_item['quantity'] ) . ' / ' . $remove_product . '</span>'.$product_quantity.'';
}
// I have added wc_fragment_refresh to update your minicart when qty change.
add_action( 'wp_footer', 'refresh_checkout_on_quantity_change' );
function refresh_checkout_on_quantity_change() {
if (is_checkout()){ ?>
<script type="text/javascript">
<?php $admin_url = get_admin_url(); ?>
jQuery("form.checkout").on("change", "input.qty", function(){
var data = {
action: 'update_order_qty',
security: wc_checkout_params.update_order_review_nonce,
post_data: jQuery('form.checkout').serialize()
};
jQuery.post('<?php echo $admin_url; ?>' + 'admin-ajax.php', data, function(response){
jQuery('body').trigger( 'wc_fragment_refresh' );
jQuery('body').trigger('update_checkout');
});
});
</script>
<?php
}
}
// You dont need to wrap this in a function and do checks wp_ajax_nopriv runs for guests where wp_ajax runs for users
add_action( 'wp_ajax_nopriv_update_order_qty', 'update_order_qty');
add_action( 'wp_ajax_update_order_qty', 'update_order_qty');
function update_order_qty(){
$values = array();
parse_str($_POST['post_data'], $values);
$cart = $values['cart'];
foreach ($cart as $cart_key => $cart_value){
WC()->cart->set_quantity( $cart_key, $cart_value['qty'], false );
WC()->cart->calculate_totals();
woocommerce_cart_totals();
}
exit;
}
This is i think the better solution when we want to update cart items in checkout. Its all woocommerce core so it will perform and last longer than custom code for people who are not into coding.
Here is a video how its working https://webm.red/iV0t . It may get deleted after time.
//We need to load cart scripts
function checkout_woocommerce_scripts()
{
if ( is_checkout() ) wp_enqueue_script( 'wc-cart' );
}
add_action( 'wp_enqueue_scripts', 'checkout_woocommerce_scripts', 10 );
//If we want to redirect to shop page when cart or checkout get empty.
add_action('template_redirect','redirect_cart_page');
function redirect_cart_page() {
if(is_cart() && WC()->cart->get_cart_contents_count() == 0 ):
wp_safe_redirect(wc_get_page_permalink( 'shop' ));
endif;
}
//Load the cart form provided by woocommerce as shortcode.
// I will keep it outside the checkout form since its a form on its self.
// If we want we can extend the layout with modifying the checkout template.
add_action('woocommerce_before_checkout_form','checkout_cart_form');
function checkout_cart_form() {
echo do_shortcode('[woocommerce_cart]');
}
//Since we load cart form we dont need the coupon form twice
//Remove checkout coupon form comment this if you want to use this instead
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
//Remove cart coupon form
function hide_coupon_field_on_cart( $enabled ) {
if ( is_cart() ) { $enabled = false; } return $enabled;
}
//Uncomment this if you want to use this coupon form
// add_filter( 'woocommerce_coupons_enabled', 'hide_coupon_field_on_cart' );
//The scripts and styles we gonna use. Feel free to move them in your theme css js files (make sure they are loaded on checkout page)
add_action( 'wp_footer', 'checkout_styles_scripts');
function checkout_styles_scripts() {
?>
<style>
body.woocommerce-checkout button[name="update_cart"],
body.woocommerce-checkout input[name="update_cart"] {
display: none;
}
</style>
<script>
jQuery( function( $ ) {
let timeout;
$('.woocommerce').on( 'change keyup mouseup', 'input.qty', function(){
if ( timeout !== undefined ) {
clearTimeout( timeout );
}
timeout = setTimeout(function() {
$("[name='update_cart']").trigger("click"); // trigger cart update
}, 1000 ); // 1 second delay, half a second (500) seems comfortable too
});
} );
</script>
<?php
}
While this works fine as is, I need help in getting it to display all the different variation details that are available.
As of now, it displays the price. This is the full list of variables that are available:
'attributes'
'availability_html'
'backorders_allowed'
'dimensions'
'dimensions_html'
'display_price'
'display_regular_price'
'price'
'image'
'image_id'
'is_downloadable'
'is_in_stock'
'is_purchasable'
'is_sold_individually'
'is_virtual'
'max_qty'
'min_qty'
'price_html'
'sku'
'variation_description'
'variation_id'
'variation_is_active'
'variation_is_visible'
'weight'
'weight_html'
This is the code that I need help changing into displaying all of these as a table if at all possible.
add_action( 'woocommerce_after_add_to_cart_form', 'display_variation_info_in_product_summary' );
function display_variation_info_in_product_summary() {
global $product;
if ( ! $product->is_type( 'variable' ) ) return;
echo '<div class="var_info"></div>';
wc_enqueue_js( "
$(document).on('found_variation', 'form.cart', function( event, variation ) {
$('.var_info').html(variation.price_html); // need to show all options here
});
" );
}
does this work? I'm using this to display a table of the variation options, with the price. It works with multiple attributes.
add_action( 'woocommerce_before_add_to_cart_form', 'display_variation_info_in_product_summary' );
function display_variation_info_in_product_summary() {
global $product;
if ( !$product->is_type( 'variable' ) ) return;
$variations = $product->get_available_variations();
echo '<div class="variation-prices"><table>';
foreach($variations as $variation){
$attributes = wc_get_formatted_variation($variation['attributes'],true, false);
echo '<tr><td>' . $attributes . '</td><td>' . wc_price($variation['display_price']) . '</td></tr>';
}
echo '</table></div>';
}
Hello I have a little problem, and I hope someone of you can help me, I use wordpress and I have a buy button that I want to be active only when the amount is bigger than 267 $ for example!
How can I do that?
Someone can tell me if I can do that simply in javaScript or maybe even css?
I attach some pictures and explain more:
I have tried something with an woocommerce code but it just stop me to place the order in the check out page, this is the code I used:
add_action( 'woocommerce_checkout_process', 'wc_minimum_order_amount' );
add_action( 'woocommerce_before_cart' , 'wc_minimum_order_amount' );
function wc_minimum_order_amount() {
// Set this variable to specify a minimum order value
$minimum = 267;
if ( WC()->cart->total < $minimum ) {
if( is_cart() ) {
wc_print_notice(
sprintf( 'Totalul tau este %s — comanda ta trebuie sa fie de minim %s adica minim 3 m² pentru a putea plasa comanda! ' ,
wc_price( WC()->cart->total ),
wc_price( $minimum )
), 'error'
);
} else {
wc_add_notice(
sprintf( 'Totalul tau este %s — comanda ta trebuie sa fie de minim %s adica minim 3 m² pentru a putea plasa comanda!' ,
wc_price( WC()->cart->total ),
wc_price( $minimum )
), 'error'
);
}
}
}
Well, in WooCommerce the function that displays the button can be overwritten in a theme's file or a mu-plugin file.
If you want the button to disappear when the order doesn't comply you can simply add this in functions.php.
if ( ! function_exists( 'woocommerce_widget_shopping_cart_proceed_to_checkout' ) ) {
function woocommerce_widget_shopping_cart_proceed_to_checkout() {
$total = WC()->cart->subtotal;
$minimum_amount = 267;
if ( $total < $minimum_amount ) {
return;
}
echo '' . esc_html__( 'Checkout', 'woocommerce' ) . '';
}
add_action( 'woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_proceed_to_checkout', 20 );
}
Personally I would rather create a CSS class like .disabled and add it to the button when our condition in true.
if ( ! function_exists( 'woocommerce_widget_shopping_cart_proceed_to_checkout' ) ) {
function woocommerce_widget_shopping_cart_proceed_to_checkout() {
$total = WC()->cart->subtotal;
$minimum_amount = 267;
if ( $total <= $minimum_amount ) {
echo '' . esc_html__( 'Checkout', 'woocommerce' ) . '';
} else {
echo '' . esc_html__( 'Checkout', 'woocommerce' ) . '';
}
}
add_action( 'woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_proceed_to_checkout', 20 );
}
In this case you will need to add some sort of CSS to make it look like a inactive button:
.button.checkout.disabled {
opacity: 0.6; // or give it some sort of gray feeling.
cursor: not-allowed; // so the user get's the notice that something is wrong.
pointer-events: none; // so the user cannot click the button.
}
.button.checkout.disabled:before {
content: "Add here a notice for the user about the minimum requirement."
// the should feel like a tooltip and you will have to make your own placements here.
// oh, and if you need this to be translatable you will have to print this in PHP.
}
Anyway, this is just "esthetics" You should keep the function that prevents the user to place the order from the checkout page.
Cheers!
I would like to have WooCommerce external/affiliate products open in a new tab. This would go for all aspects of a product: image, title, buy now button and archive pages(product category/tags). All I have been able to find is a way to change the "Buy Now" button but no other solutions to the other areas previously mentioned. Other solutions offer a the external link in all the right places(product image, title, buy now button, archive pages), but it can't open in a new tab.
I've tried a bunch of different codes, as mentioned above, all lead to partial solutions. I believe if these can be combined, it may work. But I haven't been successful.
add_action( 'template_redirect', 'redirect_external_products' );
function redirect_external_products() {
global $post;
if ( is_singular( 'product' ) && ! empty( $post ) && ( $product = wc_get_product( $post ) ) && $product->is_type( 'external' ) ) {
wp_redirect( $product->get_product_url() );
exit;
}
}
function custom_redirect() {
global $post;
if( is_single() ){
$external_link = get_post_meta( $post->ID, 'external_link', true );
if($external_link) {
echo "<script> window.open(".$external_link.", '_blank') </script>";
exit;
}
}
}
I would like all affiliate/external links to open in a new tab. This would include: product image, product title, buy now button, archive page listings(product category/tags).
All previous attempts will only open the Buy Now links in a new tab - but the image and title still direct to the single product page. The first code above from does the trick, but won't open in a new tab. My research tells me that when using the template_redirect function, link targeting is not possible.
remove the previous code and let's add this code in the theme's functions.php file.
add_filter( 'woocommerce_loop_product_link', 'filter_external_product_permalink', 10, 2 );
if ( ! function_exists( 'filter_external_product_permalink' ) ) {
/**
* Insert the external url for products in the loop.
*/
function filter_external_product_permalink( $the_permalink, $product ){
global $product;
if( $product->is_type( 'external' ) ) {
$external_link = $product->get_product_url();
return $external_link;
}
return $the_permalink;
}
}
if ( ! function_exists( 'woocommerce_template_loop_product_link_open' ) ) {
/**
* Insert the opening anchor tag for products in the loop.
*/
function woocommerce_template_loop_product_link_open() {
global $product;
$link = apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product );
$link_target = $product->is_type( 'external' ) ? '_blank' : '_self';
echo '<a target="' . esc_attr( $link_target ).'" href="' . esc_url( $link ) . '" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">';
}
}
add_filter( 'woocommerce_loop_add_to_cart_link', 'custom_external_add_product_link' , 10, 2 );
if ( ! function_exists( 'custom_external_add_product_link' ) ) {
function custom_external_add_product_link( $permalink ) {
global $product;
if ( $product->is_type( 'external' ) ) {
$permalink = sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s" target="_blank">%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 product_type_external add_to_cart_button' ),
esc_html( $product->add_to_cart_text() )
);
}
return $permalink;
}
}
I have woocommerce setup with products and variations on these products. When I change the variation (for example, the size of the product (340g or 900g), I want it to dynamically on the page update the price so the person can see what the price difference is between the two sizes. At the moment, I can't even get the variation ID of the variation. This does not seem to be working at all.
If I test and modify the variations, this is all I get from the Javascript console:
Here is my code:
// removing the price of variable products
remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_price', 10 );
// Change location of
add_action( 'woocommerce_single_product_summary', 'custom_wc_template_single_price', 10 );
function custom_wc_template_single_price(){
global $product;
// Variable product only
if($product->is_type('variable')):
// Main Price
$prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
$price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );
// Sale Price
$prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
sort( $prices );
$saleprice = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );
if ( $price !== $saleprice && $product->is_on_sale() ) {
$price = '<del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price . $product->get_price_suffix() . '</ins>';
}
?>
<style>
div.woocommerce-variation-price,
div.woocommerce-variation-availability,
div.hidden-variable-price {
height: 0px !important;
overflow:hidden;
position:relative;
line-height: 0px !important;
font-size: 0% !important;
}
</style>
<script>
jQuery(document).ready(function($) {
$('select').blur( function(){
console.log("blur");
if( '' != $('input.variation_id').val() ){
console.log($('input.variation_id'));
console.log($('input.variation_id').val());
$('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
console.log($('input.variation_id').val());
} else {
$('p.price').html($('div.hidden-variable-price').html());
if($('p.availability'))
$('p.availability').remove();
console.log('NULL');
}
});
});
</script>
<?php
echo '<p class="price">'.$price.'</p>
<div class="hidden-variable-price" >'.$price.'</div>';
endif;
}
Here is the site: https://bricksandmortar.ca/product/no-eye-contact/#
Any ideas?
You can hook into the show_variation trigger with some jQuery to get all of the information about the selected variation. Here's an example that will write the price formatted in HTML to the console.
(function( $ ) {
'use strict';
$(function() {
var $variation_form = $( '.variations_form' );
$variation_form.on( "show_variation", function ( event, variation ) {
// Fired when the user selects all the required attributes
console.log(variation.price_html);
} );
});
})( jQuery );