Blog

Truncate Short Description With “Read More” Toggle

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 Sort Cart Items Alphabetically A>Z in order to sort your cart alphabetically first.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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 &amp;&amp; ! 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 🙂

Tags: