Labels

Put Custom cart icon with the cart count to your theme (on Header)



These are 3 steps to add a WooCommerce cart icon with the cart count to your theme. The number of items will be updated automatically with AJAX as items are added to cart.
To avoid errors, this will first check if WooCommerce is active. That way, it doesn’t hurt to add this to any theme regardless of whether WooCommerce plugin is active or not.


  1. Add the HTML to your theme’s template file where you want the cart icon to appear. The cart icon will only appear if WooCommerce is active.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <?php if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
        $count = WC()->cart->cart_contents_count;
        ?><a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php
        if ( $count > 0 ) {
            ?>
            <span class="cart-contents-count"><?php echo esc_html( $count ); ?></span>
            <?php
        }
            ?></a>
    <?php } ?>
    You can either add the above directly into your theme template, or you can add it with one of your theme’s template hooks. For example, if your theme’s header has a hook like, do_action( 'your_theme_header_top' );, then you can add the above code to your functions file like this:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    /**
     * Add Cart icon and count to header if WC is active
     */
    function my_wc_cart_count() {
        if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
            $count = WC()->cart->cart_contents_count;
            ?><a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php
            if ( $count > 0 ) {
                ?>
                <span class="cart-contents-count"><?php echo esc_html( $count ); ?></span>
                <?php
            }
                    ?></a><?php
        }
    }
    add_action( 'your_theme_header_top', 'my_wc_cart_count' );
  2. Add the following to your functions. This ensures the cart will be updated immediately as items are added to the cart.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    /**
     * Ensure cart contents update when products are added to the cart via AJAX
     */
    function my_header_add_to_cart_fragment( $fragments ) {
        ob_start();
        $count = WC()->cart->cart_contents_count;
        ?><a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php
        if ( $count > 0 ) {
            ?>
            <span class="cart-contents-count"><?php echo esc_html( $count ); ?></span>
            <?php           
        }
            ?></a><?php
        $fragments['a.cart-contents'] = ob_get_clean();
         
        return $fragments;
    }
    add_filter( 'woocommerce_add_to_cart_fragments', 'my_header_add_to_cart_fragment' );
  3. Add this CSS to use WooCommerce’s native shopping cart icon. Adjust as needed to fit nicely into your theme. You can also use your own icon from a custom icon font. To use a different icon, change ‘WooCommerce’ to the name of your icon font, and change the e01d on line 3 to your icon’s Unicode. For example, if you already use Font Awesome, change line 2 to font-family:FontAwesome;, and line 3 to content: "\f07a"; to use Font Awesome’s cart icon. Also, you may want to edit line 15 and 16 below to change the color of the cart count and background color of the bubble.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    .cart-contents:before {
        font-family:WooCommerce;
        content: "\e01d";
        font-size:28px;
        margin-top:10px;
        font-style:normal;
        font-weight:400;
        padding-right:5px;
        vertical-align: bottom;
    }
    .cart-contents:hover {
        text-decoration: none;
    }
    .cart-contents-count {
        color: #fff;
        background-color: #2ecc71;
        font-weight: bold;
        border-radius: 10px;
        padding: 1px 6px;
        line-height: 1;
        font-family: Arial, Helvetica, sans-serif;
        vertical-align: top;
    }
That’s it. Preview your store and add items to the cart to see this in action.

https://isabelcastillo.com/woocommerce-cart-icon-count-theme-header#comment-46509
Labels:

Comments

Post a Comment

Popular Posts