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 > Shop > Mini Cart > Icon Type and select your preferred icon type

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

All code snippets in the following examples must be added to wp-content/themes/goya-child/functions.php

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 '<img src="https://full-path-to-your-cart.svg">';
add_filter( 'goya_minicart_icon', 'custom_header_minicart_icon', 10, 2 );Code language: JavaScript (javascript)

Instead of the <img> tag you can also embed the svg code:

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)

Or use any other content, for example an icon font. The icon library must be already 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)

All those options are possible with the filters to replace the header icons. For simplicity we show only the <img> tag method on the next examples.

Account icon

The account header icon can be replaced using a filter too

function custom_header_account_icon() {
 return '<img src="https://full-path-to-your-account.svg">';
add_filter( 'goya_account_icon', 'custom_header_account_icon', 10, 2 );Code language: JavaScript (javascript)

Wishlist icon

The wishlist icon in the header can be changed using a filter

function custom_header_wishlist_icon() {
 return '<img src="https://full-path-to-your-wishlist.svg">';
add_filter( 'goya_wishlist_icon', 'custom_header_wishlist_icon', 10, 2 );Code language: JavaScript (javascript)

Search icon

The search icon can be changed using a filter

function custom_header_search_icon() {
 return '<img src="https://full-path-to-your-search.svg">';
add_filter( 'goya_search_icon', 'custom_header_search_icon', 10, 2 );Code language: JavaScript (javascript)

The hamburger menu icon can be changed using a filter

function custom_header_menu_icon() {
 return '<img src="https://full-path-to-your-menu.svg">';
add_filter( 'goya_menu_icon', '<meta charset="utf-8">custom_header_menu_icon', 10, 2 );Code language: JavaScript (javascript)

Was this article helpful?

Related Articles