Truncate Short Description With “Read More” Toggle

by admin / Tuesday, 08 October 2019 / Published in Blogs, WooCommerce Tips

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.

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  
}

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++;

}

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 🙂

Tagged under: Featured

HOW TO SHOP

SHOWROOM HOURS