
Insert this code into the functions.php
function child_theme_enqueue_styles() {
// cart page
wp_localize_script( 'global-js', 'customMiniCartParams', array(
'totalUniqueProducts' => custom_get_total_unique_products_in_cart(),
) );
}
// Modify your PHP function to return the total unique products as a JavaScript variable
function custom_get_total_unique_products_in_cart() {
$total_unique_products = 0;
// Get the cart contents
$cart = WC()->cart->get_cart();
// Create an array to store product IDs
$product_ids = array();
// Loop through cart items and count unique products
foreach ( $cart as $item ) {
$product_id = $item['product_id'];
// Check if the product has already been counted
if ( ! isset( $product_ids[ $product_id ] ) ) {
$total_unique_products++;
$product_ids[ $product_id ] = true;
}
}
return $total_unique_products;
}
Insert this code to the global.js
function updateMiniCartTotal() {
const totalUniqueProducts = customMiniCartParams.totalUniqueProducts;
const $totalResult = $('<span>').addClass('total_result').text(totalUniqueProducts);
const $itemResult = $('<span>').addClass('item_result').text(`(${totalUniqueProducts} items)`);
const $miniCart = $('.wc-block-mini-cart.wp-block-woocommerce-mini-cart');
const $cartitems = $('.wp-block-woocommerce-mini-cart-contents .wp-block-woocommerce-mini-cart-title-block');
// Check if the mini-cart exists on the page
if ($miniCart.length > 0) {
$miniCart.prepend($totalResult).attr('data-total-unique-products', totalUniqueProducts);
}
if ($cartitems.length > 0) {
$cartitems.append($itemResult);
}
}
// Call the updateMiniCartTotal function on page load
updateMiniCartTotal();
Insert this code to the global.css
.wc-block-mini-cart.wp-block-woocommerce-mini-cart {
position: relative;
}
.wc-block-mini-cart__button{
position:relative;
}
.total_result,
.wc-block-mini-cart__badge,
.wp-block-woocommerce-mini-cart-title-items-counter-block{
display:none;
}
.wc-block-mini-cart__button{
z-index:9999;
}
.wc-block-mini-cart.wp-block-woocommerce-mini-cart::before {
content: attr(data-total-unique-products);
position: absolute;
top: 10px;
right: -7px;
background-color: #f5f5f5;
color: #000;
border-radius: 50%;
padding: 1px 5px;
font-size: 10px;
align-items: center;
border-radius: 1em;
box-sizing: border-box;
display: flex;
font-weight: 600;
height: 1.4285714286em;
justify-content: center;
left: 100%;
margin-left: -44%;
min-width: 1.4285714286em;
transform: translateY(-50%);
white-space: nowrap;
z-index: 1;
}