-1

我正在尝试在 Woocommerce 我的帐户页面上的选项卡导航中添加一些图标。
像这样： https ://woocommerce.files.wordpress.com/2016/04/storefront-2-my-account.png?w=1224 我尝试了一些教程，但没有运气。使用 Divi 主题形成优雅主题。有没有人有解决方案？

4

3 回答 3

3

要将自定义 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; ?>

使用此方法，您可以将任何内容添加到选项卡

于 2021-01-16T17:06:27.687 回答
2

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

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--YOUR-PAGE a::before
于 2019-09-15T08:52:22.887 回答
0

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

更改选项卡链接的 -dashboard 和图标 Unicode，如 f4fe

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a:before {
    content: "\f4fe";
}
于 2020-08-19T11:01:09.143 回答