Simple Ajax Supported WooCommerce Mini Cart, Shortcode, Unstyled

Use it and add it anywhere or any builder you want it just works and native and realtime ajax

will work fine with woo features and the woo plugins mini cart hooks as well like for example free shipping calc/bar…

shortcode: [snn_mini_cart]

// shortcode [snn_mini_cart]
if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
    function snn_mini_cart_shortcode() {
        ob_start();
        echo '<div class="snn_mini_cart">';
            woocommerce_mini_cart();
        echo '</div>';
        return ob_get_clean();
    }
    add_shortcode( 'snn_mini_cart', 'snn_mini_cart_shortcode' );
    function snn_ajax_mini_cart_fragment( $fragments ) {
        ob_start();
        echo '<div class="snn_mini_cart">';
            woocommerce_mini_cart();
        echo '</div>';
        $fragments['div.snn_mini_cart'] = ob_get_clean();
        return $fragments;
    }
    add_filter( 'woocommerce_add_to_cart_fragments', 'snn_ajax_mini_cart_fragment' );
}

and some css styles if you need to;

<style>
.snn_mini_cart {    width:100%;}
.snn_mini_cart ul.woocommerce-mini-cart {    list-style: none;}
.snn_mini_cart .woocommerce-mini-cart-item {    display: flex;    align-items: center;    gap: 10px;}
.snn_mini_cart .woocommerce-mini-cart-item:last-child {    border-bottom: none;}
.snn_mini_cart .remove_from_cart_button {    text-decoration: none;	font-size: 24px;}
.snn_mini_cart img.woocommerce-placeholder {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 8px;
}
.snn_mini_cart .quantity {    margin-left: auto;}
.snn_mini_cart .woocommerce-Price-currencySymbol {    font-weight: bold;}
.snn_mini_cart .woocommerce-mini-cart__total {    display: flex;    justify-content: space-between;}
.snn_mini_cart .woocommerce-mini-cart__total strong {    font-weight: 500;}
.snn_mini_cart .woocommerce-mini-cart__buttons {    display: flex;    gap: 10px;    margin-top: 10px;}
.snn_mini_cart .woocommerce-mini-cart__buttons .button {
    flex: 1;
    border: none;
    padding: 10px 0;
    cursor: pointer;
    text-align: center;
	background: #e0e0e0;
}
</style>