WooCommerce has a mini cart widget, this widget can place on sidebars only.
You are definitely looking for a mini-cart custom code, which can display in the header with your website header navigation.
This blog post can helps to achieve your wish. Let’s start exploring this custom code step by step.
Apply the navigation filter to display the cart icon
For detail about the navigation filter. Kindly check this link https://developer.wordpress.org/reference/hooks/wp_nav_menu_items/
add_filter( 'wp_nav_menu_items', 'custom_wc_mini_cart_link', 10, 2 );
function custom_wc_mini_cart_link( $items, $args ) {
if ( null === WC()->cart ) {
return $items;
}
$items .= '<li class="menu-item menu-item-type-post_type menu-item-object-custom">'. custom_wc_mini_cart_toggle() .'</li>';
return $items;
}
Cart fregments filter
It will helps to ajax able cart. It will update the cart item after adding to cart.
add_filter( 'woocommerce_add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment' );
function woocommerce_header_add_to_cart_fragment( $fragments ) {
ob_start();
echo custom_wc_mini_cart_toggle();
$fragments['div.wc-toggle-button-wrapper'] = ob_get_clean();
return $fragments;
}
Mini cart icon function
function custom_wc_mini_cart_toggle( ) {
if ( null === WC()->cart ) {
return;
}
$widget_cart_is_hidden = apply_filters( 'woocommerce_widget_cart_is_hidden', false );
$product_count = WC()->cart->get_cart_contents_count();
$sub_total = WC()->cart->get_cart_subtotal();
$counter_attr = 'data-counter="' . $product_count . '"';
$icon = 'cart-medium';
$cart_url = function_exists( 'wc_get_cart_url' ) ? wc_get_cart_url() : WC()->cart->get_cart_url();
$menu_toggle_btn = '';
$menu_toggle_btn = '
<div class="wc-toggle-button-wrapper">';
if ( ! $widget_cart_is_hidden ) :
$menu_toggle_btn .=
'<div class="wc-menu-cart__container">
<div class="wc-menu-cart__main">
<div class="wc-menu-cart__close-button">X</div>
<div class="widget_shopping_cart_content-custom">';
$menu_toggle_btn .= custom_wc_mini_cart_content_box();
$menu_toggle_btn .= '</div>
</div>
</div>';
$menu_toggle_btn .= '<a class="wc-menu-cart__toggle-button" href="'. $cart_url .'">
<span class="item-count cart-button-icon" '. $counter_attr .'>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
</span>
<span class="wc-menu-cart__toggle-button-text">' . $sub_total . '</span>
</a>';
endif;
$menu_toggle_btn .= '</div>';
return $menu_toggle_btn;
}
Cart content
function custom_wc_mini_cart_content_box(){
$cart_items = WC()->cart->get_cart();
$mini_cart = '';
if ( empty( $cart_items ) ) {
$mini_cart = '<div class="woocommerce-mini-cart__empty-message">' . __( 'No products in the cart.', 'woocommerce' ) .'</div>';
} else {
$mini_cart .=
'<div class="wc-menu-cart__products woocommerce-mini-cart cart woocommerce-cart-form__contents">';
$mini_cart .= do_action( 'woocommerce_before_mini_cart_contents' );
foreach ( $cart_items as $cart_item_key => $cart_item ) {
$mini_cart .= custom_wc_mini_cart_items( $cart_item_key, $cart_item );
}
$mini_cart .= do_action( 'woocommerce_mini_cart_contents' );
$mini_cart .= '</div>
<div class="woocommerce-mini-cart__total total">
<strong>'. esc_html__( 'Subtotal', 'woocommerce' ) .':</strong>
'. WC()->cart->get_cart_subtotal() .'
</div>
<div class="wc-menu-cart__footer-buttons woocommerce-mini-cart__buttons buttons">
<a href="'. esc_url( wc_get_cart_url() ) .'" class="button wc-forward">
'. esc_html__( 'View cart', 'woocommerce' ) .'
</a>
<a href="'. esc_url( wc_get_checkout_url() ) .'" class="button checkout wc-forward">
'. esc_html__( 'Checkout', 'woocommerce' ) .'
</a>
</div>';
} // empty( $cart_items )
return $mini_cart;
}
Cart item content
function custom_wc_mini_cart_items( $cart_item_key, $cart_item ) {
$_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
$is_product_visible = ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_widget_cart_item_visible', true, $cart_item, $cart_item_key ) );
if ( ! $is_product_visible ) {
return;
}
$product_id = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key );
$product_price = apply_filters( 'woocommerce_cart_item_price', WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key );
$product_permalink = apply_filters( 'woocommerce_cart_item_permalink', $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '', $cart_item, $cart_item_key );
$class = '';
//remove_action('woocommerce_after_cart_item_name', 20, 1);
$cart_items_output = '';
$cart_items_output =
'<div class="wc-menu-cart__product woocommerce-cart-form__cart-item '. esc_attr( apply_filters( 'woocommerce_cart_item_class', 'cart_item', $cart_item, $cart_item_key ) ) .'">
<div class="wc-menu-cart__product-image product-thumbnail">';
$thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );
if ( ! $product_permalink ) :
$cart_items_output .= wp_kses_post( $thumbnail );
else :
$cart_items_output .= sprintf( '<a href="%s">%s</a>', esc_url( $product_permalink ), wp_kses_post( $thumbnail ) );
endif;
$cart_items_output .= '</div>
<div class="wc-menu-cart__product-name product-name" data-title="'. esc_attr__( 'Product', 'woocommerce' ).' ">';
if ( ! $product_permalink ) :
$cart_items_output .= wp_kses_post( apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key ) . ' ' );
else :
$cart_items_output .= wp_kses_post( apply_filters( 'woocommerce_cart_item_name', sprintf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $_product->get_name() ), $cart_item, $cart_item_key ) );
endif;
$cart_items_output .= do_action( 'woocommerce_after_cart_item_name', $cart_item, $cart_item_key );
// Meta data.
$cart_items_output .= wc_get_formatted_cart_item_data( $cart_item );
$cart_items_output .= '</div>';
$cart_items_output .= '<div class="wc-menu-cart__product-price product-price" data-title="'. esc_attr__( 'Price', 'woocommerce' ) .'">';
$cart_items_output .= apply_filters( 'woocommerce_widget_cart_item_quantity', '<span class="quantity">' . sprintf( '<span class="product-quantity">%s ×</span> %s', $cart_item['quantity'], $product_price ) . '</span>', $cart_item, $cart_item_key );
$cart_items_output .= '</div>';
$cart_items_output .= '<div class="wc-menu-cart__product-remove product-remove">';
$cart_items_output .= apply_filters( 'woocommerce_cart_item_remove_link', sprintf(
'<a href="%s" class="%s" aria-label="%s" data-product_id="%s" data-cart_item_key="%s" data-product_sku="%s"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
</svg></a>',
esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
'remove',
__( 'Remove this item', 'woocommerce' ),
esc_attr( $product_id ),
esc_attr( $cart_item_key ),
esc_attr( $_product->get_sku() )
), $cart_item_key );
$cart_items_output .= '</div>
</div>';
return $cart_items_output;
}
Javascript code
add_action( 'wp_footer', 'custom_wc_mini_cart_js', 50 );
function custom_wc_mini_cart_js(){
?>
<script>
jQuery(document).ready(function($){
jQuery('a.wc-menu-cart__toggle-button').on('click', function(event){
event.preventDefault();
jQuery('.wc-menu-cart__container').toggleClass('show');
});
jQuery('.wc-menu-cart__close-button').on('click', function(event){
event.preventDefault();
jQuery('.wc-menu-cart__container').removeClass('show');
});
});
</script>
<?php
}
Css code
add_action( 'wp_head', 'custom_wc_mini_cart_css', 10 );
function custom_wc_mini_cart_css(){
?>
<style>
.wc-toggle-button-wrapper {
display: inline-block;
}
.wc-menu-cart__toggle-button{
padding: 0px;
}
.wc-menu-cart__container {
right: 0;
left: auto;
transform: none;
position: absolute;
overflow: visible;
top: 100%;
bottom: auto;
min-width: 330px;
display:none;
opacity: 0;
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
.wc-menu-cart__container.show{
opacity: 1;
display: block;
}
.wc-menu-cart__toggle-button-text{
display:none;
}
.wc-menu-cart__toggle-button .cart-button-icon svg{
width: 24px;
height: 24px;
}
.wc-menu-cart__toggle-button .cart-button-icon[data-counter]:before {
content: attr(data-counter);
display: block;
position: absolute;
min-width: 1.6em;
height: 1.6em;
line-height: 1.5em;
top: -0.7em;
inset-inline-end: -0.7em;
border-radius: 100%;
color: #fff;
background-color: #d9534f;
text-align: center;
font-size: 12px;
}
.wc-menu-cart__main{
min-height: 200px;
width: 370px;
max-width: 100%;
position: relative;
overflow: visible;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 14px;
padding: 10px 20px;
background-color: #fff;
-webkit-box-shadow: 0 0 20px rgb(0 0 0 / 20%);
box-shadow: 0 0 20px rgb(0 0 0 / 20%);
border-style: none;
border-color: initial;
border-radius: 0;
margin-top: 0;
}
.wc-menu-cart__close-button {
width: 25px;
height: 25px;
position: relative;
margin: 0 0 20px;
-ms-flex-item-align: end;
align-self: flex-end;
cursor: pointer;
display: inline-block;
font-family: eicons;
font-size: 20px;
line-height: 1;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
.widget_shopping_cart_content-custom{
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.wc-menu-cart__products{
max-height: calc(100vh - 250px);
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.wc-menu-cart__subtotal{
font-size: 18px;
text-align: center;
font-weight: 600;
color: inherit;
border-top: 1px solid #d4d4d4;
border-bottom: 1px solid #d4d4d4;
padding-bottom: 20px;
padding-top: 20px;
}
.wc-menu-cart__footer-buttons{
font-size: 20px;
text-align: center;
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 0;
grid-column-gap: 10px;
grid-row-gap: 10px;
padding-bottom: 20px;
padding-top: 20px;
}
.wc-menu-cart__product{
display: grid;
grid-template-columns: 28% auto;
grid-template-rows: auto auto;
position: relative;
border-width: 0;
border-bottom: 1px solid #d4d4d4;
padding-bottom: 20px;
padding-right: 30px;
}
.wc-menu-cart__product-image {
grid-row-start: 1;
grid-row-end: 3;
width: 90%;
margin-right: 10%;
}
.wc-menu-cart__product-image img{
display: block;
}
.wc-menu-cart__product-name {
grid-column-start: 2;
grid-column-end: 3;
margin: 0;
}
.wc-menu-cart__product-remove{
color: #ff0000;
width: 22px;
height: 22px;
border-radius: 22px;
border: 1px solid #ff0000;
text-align: center;
overflow: hidden;
position: absolute;
right: 0;
bottom: 20px;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
.wc-menu-cart__product-remove svg{
width:20px;
height:20px;
}
.wc-menu-cart__product-remove a.remove:hover {
color: #fff!important;
background: red;
}
</style>
<?php
}
How to implement
My recommendations are to use the code and paste it into a separate file and must use a child theme if possible. Then include the file into the theme functions.php file. Check the following code sample.
require get_template_directory() . '/inc/wc-custom-mini-cart.php';
