Tag: Cart

Deleting multiple items in a shopping cart efficiently

My boss is insistent we need to build functionality to allow users to delete multiple items out of their shopping cart at once (e.g., checkboxes, with a “Select All” button/link, and “Delete” at the top and bottom of pages).

Currently we have the far more typical “Delete” option at the item/product level.

I’ve researched dozens of competitor carts and not one offers delete-multiple-items-at-once functionality. Edit: AmazonSupply does this, but at the expense of line-item delete.

I’d love to be able to push back on this and prove it’s a bad user experience – but honestly the requestor is so adamant about it it’s probably an unwinnable discussion.

Anyway does anyone have examples of good implementations of this functionality? It seems like it’s going to add a lot of clutter and visual noise and overall is an atypical implementation. Our site has some “Save for Later” functionality multi-select might be beneficial for, but overall I’m concerned about implementing it as it doesn’t seem widely done.

Anyway if anyone has good examples of multi-select delete/save in Shopping Carts — or compelling articles why that functionality shouldn’t be used for me to try to beat the requirement back with any help would be appreciated — thanks!

Is there a preset CSS class when shopping cart isn’t empty?

WooCommerce enables automatically .logged-in class when a user is logged in. This allows to create a page with different content without any PHP coding.

Is there something similar when the shopping cart is empty? I am NOT seeking any PHP solution. It should be solved only with a CSS class so I can hide/show parts of a page depending on the fact this CSS class does/does not exist.

How is it possible that Google Analytics is showing a high bounce rate (50%) on a cart and checkout page?

The cart and checkout pages are not landing pages so it isn’t possible for that to be the first page in their session. The exit rate is way too low (approximately 15%) which signals to me that the bounces should be counted as exits. Also, it isn’t reasonable to believe they would time out often enough that Google Analytics counts it as a bounce.

Possible thoughts is that it’s an issue with nonInteraction?

This is an ongoing issue I have been trying to correct for the business, any help would be great.

Append cart icon to end of main nav menu

I’m using a custom theme and want to append a cart icon to the main nav menu. This is my site.

www.allianchemical.com/staging

I used the theme_location to select for the primary navigation as it’s defined in my functions.php in my parent theme, however the primary menu must’ve have been used twice on the same page in my theme, because the cart icon show sup twice. How do I work around this. 

    // Add Font Awesome to site.     add_action( 'wp_enqueue_scripts', 'dcwd_include_font_awesome_css' );     function dcwd_include_font_awesome_css() {         // Enqueue Font Awesome from a CDN.         wp_enqueue_style( 'font-awesome-cdn', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );     }       // Style the cart count number.     add_action( 'wp_head', 'dcwd_cart_count_styles' );     function dcwd_cart_count_styles() {     ?>     <style>     #menu-main-nav.cart { position: relative; margin-top: auto; margin-bottom: auto; }     #menu-main-nav .count { background: #666; color: #fff; border-radius: 2em; height: 18px; line-height: 18px; position: absolute; right: 5px; text-align: center; top: 90%; transform: translateY(-100%) translateX(15%); width: 18px; }     </style>     <?php     }        add_filter( 'wp_nav_menu_items', 'am_append_cart_icon', 10, 2 );     function am_append_cart_icon( $  items, $  args ) {         if( $  args->theme_location == 'Primary Navigation')             {                 $  cart_item_count = WC()->cart->get_cart_contents_count();                 $  cart_count_span = '';                 if ( $  cart_item_count ) {                     $  cart_count_span = '<span class="count">'.$  cart_item_count.'</span>';         }         $  cart_link = '<li class="cart menu-item menu-item-type-post_type menu-item-object-page"><a href="' . get_permalink( wc_get_page_id( 'cart' ) ) . '"><i class="fa fa-shopping-bag"></i>'.$  cart_count_span.'</a></li>';          // Add the cart link to the end of the menu.         $  items = $  items . $  cart_link;          return $  items;         }  }

Here is the register code for the nav menus in functions.php

/*-----------------------------------------------------------------------------------*/ /* Register WP3.0+ Menus /*-----------------------------------------------------------------------------------*/ register_nav_menu('Primary Navigation', 'Main Menu'); register_nav_menu('Footer Navigation', 'Footer Menu'); register_nav_menu('Top Toolbar Navigation', 'Top Toolbar Menu'); //add nav_menu if UberMenu installed... global $  ttso; $  ubermenu = $  ttso->ka_ubermenu; if('true' == $  ubermenu): register_nav_menu('UberMenu', 'UberMenu'); endif;

I want to display the cart only on the main menu navigation at the top, and not below the image slider.

Add param to cart item url

I am adding custom data to a variable product. On the single product page I have a dropdown (woo controlled variation) and a javascript app that allows the user designs a poster. When the poster is done it is save to a database and an id is returned. I then save the id in the custom field and the customised product can be added to the cart. I display the id on the cart item and on the order as well. But if I want to edit the item after I have added it to the cart (clicking the item in the cart) i only get the variation value (as part of the GET url)

It is more than likely that a customer could have two (or more) items in cart from the same variable product with the same selected variation (but with different custom values). These items would have the exact same url and no way for me to differentiate between them.

I would like to add the value of my custom field to the url.

Is there a way to do that? Or does anyone have a different approach to solve this problem? Thanks in advance

Update / refresh mini cart, after custom AJAX add_to_cart event

I need help

In my custom single-product.php template, I added the button

public function AddToCartButton() {     global $  product;      if($  product->is_type('variable') || $  product->get_stock_status() !== 'instock') {         $  disabled_btn_class = 'btn-am--disabled';     } else {         $  disabled_btn_class = '';     }      $  echo = '<form class="cart single-product-cart" method="post" action="woocommerce_ajax_add_to_cart" enctype="multipart/form-data">';     $  echo .= '<button type="submit" class="single_add_to_cart_button button alt btn-am btn-am--red '. $  disabled_btn_class .'" data-url="'. admin_url("admin-ajax.php").'"> ' . esc_html( $  product->single_add_to_cart_text() ) .'</button>';     $  echo .= '<input type="hidden" name="add-to-cart" value="'. absint( $  product->get_id() ) .'" />';     $  echo .= '<input type="hidden" name="product_id" value="'. absint( $  product->get_id() ) .'" />';     $  echo .= '<input type="hidden" name="quantity" value="1" />';     $  echo .= '<input type="hidden" name="variation_id" class="variation_id" value="0" />';     $  echo .= '</form>';      return $  echo; }

Custom AJAX call

public function __construct() {     add_action('wp_ajax_woocommerce_ajax_add_to_cart', [$  this, 'ajax_add_to_cart']);     add_action('wp_ajax_nopriv_woocommerce_ajax_add_to_cart', [$  this, 'ajax_add_to_cart']); }  function ajax_add_to_cart() {     $  product_id         = apply_filters('woocommerce_add_to_cart_product_id', absint($  _POST['product_id']));     $  quantity           = empty($  _POST['quantity']) ? 1 : wc_stock_amount($  _POST['quantity']);     $  variation_id       = absint($  _POST['variation_id']);     $  passed_validation  = apply_filters('woocommerce_add_to_cart_validation', true, $  product_id, $  quantity);     $  product_status     = get_post_status($  product_id);      if ($  passed_validation && WC()->cart->add_to_cart($  product_id, $  quantity, $  variation_id) && 'publish' === $  product_status) {          do_action('woocommerce_ajax_added_to_cart', $  product_id);          if ('yes' === get_option('woocommerce_cart_redirect_after_add')) {             wc_add_to_cart_message(array($  product_id => $  quantity), true);         }      } else {          $  data = array(             'error' => true,             'product_url' => apply_filters('woocommerce_cart_redirect_after_error', get_permalink($  product_id), $  product_id));          echo wp_send_json($  data);     }      wp_die(); }

This code works, and if refresh page, item added to cart, but this not work with hook woocommerce_add_to_cart_fragments

And in my functions.php I have this code for refresh update cart

add_filter( 'woocommerce_add_to_cart_fragments', 'wc_mini_cart_ajax_refresh' ); function wc_mini_cart_ajax_refresh( $  fragments ) { $  fragments['#mcart-stotal'] = '<div id="mcart-stotal" class="mini-cart-footer__total">'.WC()->cart->get_cart_subtotal().'</div>'; ob_start(); echo '<div id="mcart-widget">'; woocommerce_mini_cart(); echo '</div>'; $  fragments['#mcart-widget'] = ob_get_clean();  return $  fragments;

}

And this hook works fine, but not for my custom AJAX button, why this happen?

What’s better action after click on the “Add To Cart” button?

Reading about the add to cart flow on e-commerce on the web and here on Stack Overflow, I observed that is a very common question but is difficult to take a decision considering that nowhere we are comparing all alternatives and not pointing why to decide for each strategy.

My question is:

In which situation should I choose each of the alternative bellows?

After click on “Add To Cart” Button:

1. Keep on the current page, make animation on the “Add to cart” button to show the item was added and show a bubble message on the mini-cart at on the header.

enter image description here

2. Keep on the current page, scroll the screen to frequently bought together and show a message that the product was added on the cart.

enter image description here

3. Open a modal with continue buying and go to checkout buttons and frequently bought together items.

enter image description here

4. Go to an intermediary page like Amazon are doing.

enter image description here

5. Redirect to the shopping cart and guarantee that has a continue buying button there.

Ps: I already read Do we need to show Cart page after user clicked “Add to Cart” from list page? and What is the best eCommerce add-to-cart flow?

I know that each one has your own good reason and interesting conversion and would be awesome if you can list pros and cons for each one to argument about your usage suggestion.

Show total price of current product on product page before “Add To Cart” button, why not?

I’m having a hard discussion about adding total price per product in product page before adding to cart or not.

The situation:

Our user normally add more than 1 product to cart and our products have a cheap price, but the user never buys just 1. For example, if he is buying a roof tile, he will add 500 tiles. And considering it I thinking the total price could be a benefit helping users to know the individual total (subtotal for each product) before add to cart reducing the shopping cart abandonment. And the experience could improve because this new feature will reduce the number of page changes and we will be very transparent with the user without bad surprises.

As this feature is no common on other e-commerce is being very difficult to approve an A/B test. Adding the total price for each product on the product page looks a good idea? Why not?

I already read this topic but they are talking something more advanced and my user is not adding a shirt or simple items to the cart. I just want to calculate: Product Price X Quantity and show the total price.

See an example of how I expect to do it.

enter image description here enter image description here