メニューへのアイコン設置について

#1 · 2024年10月10日, 9:43 AM

お世話になります。

メニューバーへwoocommerceのログインとカートのアイコン（個数も表示）を設置したいのですが、カスタマイザー等で設置は可能でしょうか。
また、カスタマイザーを利用できない場合、方法はあるでしょうか。

宜しくお願い致します。

アップロードファイル：

#2 · 2024年10月10日, 10:55 AM

左のアカウントアイコンは設置する事ができました。
外観→メニュー→項目（ナビゲーションラベル）　<i class="fa-solid fa-user"></i>

引き続き宜しくお願い致します。

#3 · 2024年10月11日, 10:14 AM

自己解決する事ができました。

// functions.php

<?php
function add_bag_icon_to_nav_label( $item_output, $item, $depth, $args ) {
$cart_slug = 'cart';
if ( strpos( $item->url, $cart_slug ) !== false ) {
$cart_count = WC()->cart->get_cart_contents_count();
$item_output = str_replace(
$item->title,
'<span class="cart-icon"><i class="fas fa-shopping-bag"></i></span>' .
'<span class="cart-count">' . $cart_count . '</span>',
$item_output
);
}
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'add_bag_icon_to_nav_label', 10, 4 );
add_action( 'wp_ajax_get_cart_count', 'update_cart_count' );
add_action( 'wp_ajax_nopriv_get_cart_count', 'update_cart_count' );
function update_cart_count() { echo WC()->cart->get_cart_contents_count(); wp_die(); }

// javascript.js

jQuery(function($){
  $(document.body).on('added_to_cart removed_from_cart', function(){
    $.ajax({
      url: wc_add_to_cart_params.ajax_url,
      type: 'POST',
      data: {
        action: 'get_cart_count'
      },
      success: function(response){
        $('.cart-count').text(response);
      }
    });
  });
});

// style.css

.menu-item .cart-icon {
  font-size: 18px;
  color: #ffffff;
  position: relative;
}
.menu-item a:hover .cart-icon {
  color: #000000;
}
.menu-item .cart-count {
  background-color: #8B4513;
  color: #ffffff;
  width: 18px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  font-size: 10px;
  position: absolute;
  top: 16px;
  right: 2px;
  border: 2px solid #8B4513;
  z-index: 10;
}
.menu-item a {
  display: inline-flex;
  align-items: center;
  position: relative;
  text-decoration: none;
}
.menu-item a:hover {
  color: #000000;
}

おかしなところがあればご指摘ください。

アップロードファイル：

#4 · 2024年10月11日, 10:17 AM

削除しました。

#5 · 2024年10月16日, 5:53 PM

コードを共有いただきありがとうございます。

フォーラム

メニューへのアイコン設置について