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.

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)

Menu icon

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)