Question

我正在尝试在Woocommerce的“我的帐户”页面的标签导航中添加一些图标。
赞！ https://woocommerce.files.wordpress.com/2016/04/storefront-2-my-account.png?w=1224 我尝试过一些教程，但是没有运气。使用Divi主题形成elegantthemes。有人有解决方案吗？

Answer 1

要将自定义 HTML 添加到选项卡标题，您可以从图标创建一个数组，并在 woocommerce 模板文件夹 中更改 nvaigation.php，如下所示：

$icons = [
    'dashboard' => '<i class="icon-dashboard"></i>',
    'orders' => '<i class="icon-orders"></i>',
    'edit-account' => '<i class="icon-edit-account"></i>',
    'customer-logout' => '<i class="icon-customer-logout"></i>',
    'downloads' => '<i class="icon-downloads"></i>',
    'edit-address' => '<i class="icon-edit-address"></i>'
];

并且在呈现标签的 foreach 中与 $endpoint 相呼应，如下所示：

<?php foreach ( wc_get_account_menu_items() as $endpoint => $label ) : ?>
  <a class="<?php echo wc_get_account_menu_item_classes( $endpoint ); ?>" href="<?php echo esc_url( wc_get_account_endpoint_url( $endpoint ) ); ?>">
    <?php echo $icons[$endpoint] ?>
    <?php echo esc_html( $label ); ?>
  </a>
<?php endforeach; ?>

使用此方法，您可以向标签中添加任何内容

Answer 2

在WooCommerce我的帐户页面上，标签导航图标已通过CSS伪元素添加。

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--YOUR-PAGE a::before

Answer 3

您可以使用以下代码作为示例来更改帐户图标。

更改标签链接的-dashboard和图标Unicode，如f4fe

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a:before {
    content: "\f4fe";
}

如何在我的帐户页面的woocommerce选项卡上添加图标？

3 个答案: