shvsh > /home/1168859.cloudwaysapps.com/rcyqmhwrmv/public_html/docs/wp-content/plugins/ht-knowledge-base/ht-knowledge-base.php
shvsh > /home/1168859.cloudwaysapps.com/rcyqmhwrmv/public_html/docs/wp-content/plugins/ht-knowledge-base/ht-knowledge-base.php
shvsh > /home/1168859.cloudwaysapps.com/rcyqmhwrmv/public_html/docs/wp-content/plugins/ht-knowledge-base/ht-knowledge-base.php

Expand or minimise the addon list on the cart page

To achieve the above functionality follow these steps:

Download, extract and add the above custom-product-boxes folder in your child theme.
Add the following code to child theme’s functions.php file.

/**
 * This function is used to hide the addon elements in the cart page and on the click of the main element addon elements can be seen.
 * This function loads the assets.
 */
function cpb_add_cart_assets() {
    if ( class_exists( 'Custom_Product_Boxes' ) ) {
        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 will hide your addon elements from cart page by default and add a dropping arrow to box product.
When you click on dropping arrow it will expand and show you the addons included in it.

If you are unable to download the files.
  • Copy the above code in child themes functions.php file.
  • Then add the following directory structure, add a directory named custom-product-boxes in your child theme’s directory.
  • Under the custom-product-boxes directory add assets directory.
  • Under the assets directory, you need to add 2 directories named css and js.
  • Under css directory add a file and name it cpb-cart.css and paste the following CSS code in it.
  • Under js directory add a file and name it cpb-cart.js and paste the following JS code in it.
/** CSS Code **/
tr.cpb_addon_item {
    display: none;
}
tr.cpb_box_product td.product-name::after {
    content: "\25bc";
    pointer-events: visible;
    cursor: pointer;
    color: grey;
    padding-left: 5px;
}

tr.cpb-open td.product-name::after {
    content: "\25b2";
    pointer-events: visible;
    cursor: pointer;
    color: grey;
    padding-left: 5px;
}
/** JS Code **/
jQuery(document).delegate('.cpb_box_product', 'click', function(){
    if (jQuery(this).hasClass('cpb-open') ) {
        jQuery('.cpb_addon_item').css('display', 'none');
        jQuery(this).removeClass('cpb-open');
    } else {
        jQuery(this).addClass('cpb-open');
        jQuery('.cpb_addon_item').css('display', 'table-row');
    }
});
Updated on March 10, 2021
shvsh > /home/1168859.cloudwaysapps.com/rcyqmhwrmv/public_html/docs/wp-content/plugins/ht-knowledge-base/ht-knowledge-base.php
shvsh > /home/1168859.cloudwaysapps.com/rcyqmhwrmv/public_html/docs/wp-content/plugins/ht-knowledge-base/ht-knowledge-base.php
shvsh > /home/1168859.cloudwaysapps.com/rcyqmhwrmv/public_html/docs/wp-content/plugins/ht-knowledge-base/ht-knowledge-base.php

Was this article helpful?

shvsh > /home/1168859.cloudwaysapps.com/rcyqmhwrmv/public_html/docs/wp-content/plugins/ht-knowledge-base/ht-knowledge-base.php
shvsh > /home/1168859.cloudwaysapps.com/rcyqmhwrmv/public_html/docs/wp-content/plugins/ht-knowledge-base/ht-knowledge-base.php

Related Articles