WooCommerce: “Split” Cart Table (A>Z Headings)

Because “split” might not be the correct term, let me explain this better.

Let’s imagine your WooCommerce cart table is sorted by A>Z (with my WooCommerce cart sorting snippet for example). If your business model and/or UX requires it, then you might need to “add a cart table row” to communicate the fact those items belong to that letter:

  • A
    • Item 1 Title: “AAA”
    • Item 2 Title: “ACC”
  • B
    • Item 3 Title: “BDD”
    • Item 4 Title: “BEE”

Once again, this might sound incomprehensible so you’d better look at the screenshot below. Enjoy!

Here’s the result: cart is sorted alphabetically, and each cart section is now delimited by the first cart item title letter.

PHP Snippet: Split Cart by A>Z (Display Letter Above Each Section)

Note: you also need to use https://businessbloomer.com/woocommerce-sort-cart-items-alphabetically-az/ in order to sort your cart alphabetically first.

/**
 * @snippet       Split Cart Table Alphabetically @ WooCommerce Cart
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'wp_footer', 'bbloomer_split_cart_by_az', 9999 );
  
function bbloomer_split_cart_by_az(){
    if ( ! is_cart() ) return; 
	if ( WC()->cart->is_empty() ) return;
	$i = 0;
	$split = array();
	foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
		$cart_item_title = $cart_item['data']->get_title();
		$first_letter = substr( $cart_item_title, 0, 1 );
		if ( 0 == $i || ( 0 < $i && ! in_array( $first_letter, $split ) ) ) {
			$split[$i] = $first_letter;
		}
		$i++;
	}
	?>
	<script type="text/javascript">
		jQuery(document).ready(function($){
			var indx = $('.woocommerce-cart-form__contents tbody tr').length;
			var rows = <?php echo json_encode($split); ?>;
			$.each(rows,function(key,value){	
				var newRow = $('<tr><td colspan="6">'+value+'</td></tr>');
      			newRow.insertBefore($('.woocommerce-cart-form__contents tbody tr.woocommerce-cart-form__cart-item:nth('+key+')'));
			});
		});
	</script>
	<?php  
}

Where to add this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7+.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce Customization?

Check out these free video tutorials. You can start learning how to customize WooCommerce without unnecessary plugins. Watch me code and learn by example!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

Your email address will not be published. Required fields are marked *