Change icon top bar

[kintanei]

Hi,

I would like to change the icons that are in the top bar on the right; “my account, wish list, magnifying glass …” by font icon icons. How could I change them?

Best regards

[Harry]

Hi,

Now our theme used this font icon http://themes-pixeden.com/font-demos/7-stroke/

Could you tell us which font icon you want to change?

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[kintanei]

Hi,

I want to change the icons top bar for font icon.

magnifying glass: <i class=”fa fa-search” aria-hidden=”true”></I>

my account: <i class=”fa fa-user-circle” aria-hidden=”true”></I>

wishlist: <i class=”fa fa-heart” aria-hidden=”true”></I>

Cart: <i class=”fa fa-shopping-cart” aria-hidden=”true”></i>

http://www.miussa.es/es/wp-content/uploads/2017/11/Captura-de-pantalla-2017-11-27-a-las-8.45.27.png

Best regards.

[kintanei]

Could you tell me where you change this? In what file.

Thanks again.

[Harry]

Hi,

1. To change “user icon and cart icon” please add code below code to functions.php in claue-child

/**
 * my account.
 *
 * @since 1.0.0
 */
if ( ! function_exists( 'jas_claue_wc_my_account' ) ) {
	function jas_claue_wc_my_account() {
		$output = '';

		if ( cs_get_option( 'header-my-account-icon' ) ) {
			$output .= '<div class="jas-my-account hidden-xs ts__05 pr">';
				$output .= '<a class="cb chp db" href="' . esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ) . '"><i class="pe-7s-user"></i></a>';
				$output .= '<ul class="pa tc">';
					if ( is_user_logged_in() ) {
						$output .= '<li><a class="db cg chp" href="' . esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ) . '">' . esc_html__( 'Dashboard', 'claue' ) . '</a></li>';
						$output .= '<li><a class="db cg chp" href="' . esc_url( home_url( '/orders-tracking/' ) ) . '">' . esc_html__( 'Order Tracking', 'claue' ) . '</a></li>';
						$output .= '<li><a class="db cg chp" href="' . esc_url( wp_logout_url() ) . '">' . esc_html__( 'Logout', 'claue' ) . '</a></li>';
					} else {
						$output .= '<li><a class="db cg chp" href="' . esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ) . '">' . esc_html__( 'Login / Register', 'claue' ) . '</a></li>';
					}
				$output .= '</ul>';
			$output .= '</div>';
		}

		return apply_filters( 'jas_claue_wc_my_account', $output );
	}
}

/**
 * Shopping cart in header.
 *
 * @since 1.0.0
 */
if ( ! function_exists( 'jas_claue_wc_shopping_cart' ) ) {
	function jas_claue_wc_shopping_cart() {
		global $woocommerce;
		
		// Catalog mode
		$catalog_mode = cs_get_option( 'wc-catalog' );

		if ( $catalog_mode ) return;

		$output = '';
		$output .= '<div class="jas-icon-cart pr">';
			$output .= '<a class="cart-contents pr cb chp db" href="#" title="' . esc_html( 'View your shopping cart', 'claue' ) . '">';
				$output .= '<i class="pe-7s-shopbag"></i>';
				$output .= '<span class="pa count bgb br__50 cw tc">' . esc_html( $woocommerce->cart->get_cart_contents_count() ) . '</span>';
			$output .= '</a>';
		$output .= '</div>';
		return apply_filters( 'jas_claue_wc_shopping_cart', $output );
	}
}

And change “pe-7s-user” and “pe-7s-shopbag” with your icons class

2. To change icon search and icon wishlist

– create new folder “views” in claue-child
– create new folder “header” in claue-child/views
– copy file layout-x.php in claue/views/header to claue-child/views/header as the header layout you running on your site and change “pe-7s-search” “pe-7s-like” with your icons class.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts