Expand or Minimize the Addon List on the Cart Page

Description:

This functionality allows users to either hide or reveal additional product options (add-ons) on the WooCommerce cart page. The add-ons are initially hidden, but users can click on the main product to show or hide these additional items. This guide will explain how to implement this feature step-by-step by adding custom CSS, JavaScript, and PHP code to your child’s theme.

Steps to Achieve this Functionality:

1. Download and Add the Custom Folder to Your Child Theme:
   
   • First, you need to download the custom-product-boxes folder (which contains necessary CSS and JS files) and place it inside your child theme directory. This folder contains the assets that will be used to manage the expand/minimize functionality.

2. Add Code to Your Child Theme’s functions.php File:
   
   • The next step involves adding a custom function to the functions.php file of your child theme. This function ensures that the required CSS and JavaScript files are loaded on the cart page to handle the expand/minimize behaviour for the product add-ons.

/**
 * This function loads the necessary styles and scripts for the cart page
 * to hide and show addon elements when the main product is clicked.
 */
function cpb_add_cart_assets() {
    if ( class_exists( 'Custom_Product_Boxes' ) ) { // Check if the plugin is active
        // Enqueue the custom CSS and JS files for the cart
        wp_enqueue_style( 'cpb-cart-css', trailingslashit( get_stylesheet_directory_uri() ) . 'custom-product-boxes/assets/css/cpb-cart.css', array(), wp_get_theme()->get( 'Version' ) );
        wp_enqueue_script( 'cpb-cart-js', trailingslashit( get_stylesheet_directory_uri() ) . 'custom-product-boxes/assets/js/cpb-cart.js', array(), wp_get_theme()->get( 'Version' ) );
    }
}
add_action( 'wp_enqueue_scripts', 'cpb_add_cart_assets' );

• This function checks whether the Custom_Product_Boxes class exists (i.e., if the related plugin is active). If it is, it loads the CSS (cpb-cart.css) and JS (cpb-cart.js) files from the folder you added to your theme.

3. CSS Code for Hiding/Showing Addon Elements:

• The CSS code defines the appearance of the addon items when they are hidden or visible. By default, addon items are hidden.

tr.cpb_addon_item {
    display: none; /* Initially hide the addon rows */
}
tr.cpb_box_product td.product-name::after {
    content: "\25bc"; /* Down arrow indicating hidden items */
    cursor: pointer;
    color: grey;
    padding-left: 5px;
}
tr.cpb-open td.product-name::after {
    content: "\25b2"; /* Up arrow when items are shown */
    cursor: pointer;
    color: grey;
    padding-left: 5px;
}

Explanation:

• Addon rows hidden by default: The class cpb_addon_item represents the additional items, and the display: none rule hides them when the page loads.
  
• Visual indicator: The ::after selector adds a down arrow (\25bc) next to the product name to show users that clicking on it will expand the addon list.
  
• Changing the arrow: When the addon items are visible, the class cpb-open changes the arrow to an up arrow (\25b2) to indicate that the list can now be minimized.

4. JavaScript Code for the Expand/Minimize Functionality:

• The JavaScript part adds the functionality to show or hide the addon items when the main product row is clicked.

jQuery(document).delegate('.cpb_box_product', 'click', function(){
    if (jQuery(this).hasClass('cpb-open') ) {
        // Hide the addon items
        jQuery('.cpb_addon_item').css('display', 'none');
        jQuery(this).removeClass('cpb-open');
    } else {
        // Show the addon items
        jQuery(this).addClass('cpb-open');
        jQuery('.cpb_addon_item').css('display', 'table-row');
    }
});

• Explanation:
  
  • Delegate Function: The jQuery(document).delegate() method is used to add a click event listener to all elements within the class cpb_box_product. This allows the JavaScript code to respond when users click on the main product row.
    
  • Checking if addon items are open or closed: When you click on a product, the code checks if the main product row already has the class cpb-open.
    
    • If it does, the code hides the addon items (sets display to none) and removes the cpb-open class from the main product row.
      
    • If it doesn’t, the code adds the cpb-open class to the main product row and shows the addon items by setting display to table-row.

Example:

Let’s say you have a product box in your cart called “Gift Box,” which includes 3 additional items (add-ons) such as chocolates, candles, and greeting cards.

• When the cart page loads, you will only see the “Gift Box” listed, with a down arrow next to it, indicating that more items are available.
  
• If you click on “Gift Box,” the additional items (chocolates, candles, greeting cards) will be revealed, and the arrow will change to an up arrow.
  
• If you click on the “Gift Box” again, the addon items will disappear, and the arrow will return to the down position, indicating that the list is collapsed.

Summary:

In this guide, we added functionality to expand or minimize a list of product add-ons on the WooCommerce cart page using a combination of CSS, JavaScript, and PHP. The add-ons remain hidden by default, but users can reveal or hide them by clicking on the main product row. The steps involve:

• Downloading and adding necessary files to your child theme.
  
• Adding code to enqueue the assets (CSS and JS).
  
• Writing CSS to handle the visibility of addon items and to display visual indicators (arrows).
  
• Writing JavaScript to toggle between showing and hiding the addon list.

This enhances the user experience on the cart page by keeping it clean and organized while still allowing access to the product’s add-ons.