function custom_mini_cart() {
if ( function_exists('WC') && WC()->cart ) {
?>
<div class="custom-mini-cart">
<a class="cart-contents" href="#" title="<?php _e( 'View your shopping cart', 'text-domain' ); ?>">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512" aria-hidden="true" class="icon icon-cart">
<title>Your cart</title><path d="M16 0H0V32H16 67.2l77.2 339.5 2.8 12.5H160 496h16V352H496 172.8l-14.5-64H496L566 64l10-32H542.5 100L95.6 12.5 92.8 0H80 16zm91.3 64H532.5l-60 192H151L107.3 64zM184 432a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm0 80a56 56 0 1 0 0-112 56 56 0 1 0 0 112zm248-56a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm80 0a56 56 0 1 0 -112 0 56 56 0 1 0 112 0z"></path>
</svg>
<span class="cart-contents-count"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
</a>
</div>
<?php
} else {
echo '<p>' . __( 'Cart is empty.', 'text-domain' ) . '</p>';
}
}
add_shortcode('custom_mini_cart', 'custom_mini_cart');
function custom_mini_cart_content() {
if ( function_exists('WC') && WC()->cart ) {
?>
<div class="bg_minicart_show"></div>
<div class="minicart-wrap">
<div class="widget_shopping_cart_heading">
<h3>
Your Cart
</h3>
<button type="button" aria-label="Close Cart" class="mni-cart-close"><img src="<?php echo get_stylesheet_directory_uri(); ?>/close.png" alt="" /></button>
</div>
<div class="widget_shopping_cart_content">
<?php woocommerce_mini_cart(); ?>
</div>
</div>
<?php
} else {
echo '<p>' . __( 'Cart is empty.', 'text-domain' ) . '</p>';
}
}
add_shortcode('custom_mini_cart_content', 'custom_mini_cart_content');
function add_to_cart_fragment( $fragments ) {
if ( function_exists('WC') && WC()->cart ) {
ob_start();
?>
<span class="cart-contents-count"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
<?php
$fragments['.cart-contents-count'] = ob_get_clean();
}
return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'add_to_cart_fragment' );
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter