1. Home
  2. Help Center
  3. WooCommerce
  4. Customization
  5. Change header icons

It’s possible to change the default Wishlist and Cart icons from the header.

Add to Cart/Bag

There is an option in the customizer where you can switch between a cart and bag icons.

Switching the icon from the customizer

Go to Appearance > Customize > Header > Header Icons and select your preferred icon type

This options changes both the header icon and all the add to cart icons on the shop.

Using a filter (header icon only)

If you want to use your own icon there is a filter to do it.

function custom_header_minicart_icon() { return '<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>'; } add_filter( 'goya_minicart_icon', 'custom_header_minicart_icon', 10, 2 );
Code language: HTML, XML (xml)

The example returns a svg as the original. But you can use any other content, for example a icon font. The library must be enqueued:

function custom_header_minicart_icon() { return '<i class="et-icon et-star"></i>'; } add_filter( 'goya_minicart_icon', 'custom_header_minicart_icon', 10, 2 );
Code language: JavaScript (javascript)

Wishlist icon

The wishlist header icon can be changed with a filter too

function custom_header_wishlist_icon() { return '<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>'; } add_filter( 'goya_wishlist_icon', 'custom_header_wishlist_icon', 10, 2 );
Code language: HTML, XML (xml)

Was this article helpful?

Related Articles