Here are the solution to add WooCommerce Cart icon in to your S3Framework or any other theme the solution is really simple all you need to follow the steps below and you will have the Cart Icon in your theme.

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.

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:

Add the following to your functions. This ensures the cart will be updated immediately as items are added to the cart.

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.

That’s it. Preview your store and add items to the cart to see this in action.

One thought on “How to Add WooCommerce Cart Icon With Cart Count To Your Theme”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: