Question posted in
The full documentation can be found here.

Divi theme – How do i add icons on the woocommerce tabs in the my account page?

I’m trying to add in the Woocommerce my account page on the tab navigation some icons.
Like this: https://woocommerce.files.wordpress.com/2016/04/storefront-2-my-account.png?w=1224
I’ve tried some tutorials but no luck. Using the Divi theme form elegantthemes. Does anyone have the solution?

Tags:

3

Answers


  1. 0

    On WooCommerce My Account page on the tab navigation icons has been added through CSS pseudo-element.

    .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--YOUR-PAGE a::before
    Login or Signup to reply.
  2. 0

    You can use the below code as an example to change the account icon.

    Change the -dashboard for the tab link and icon Unicode like f4fe

    .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a:before {
    content: "f4fe";
}
    Login or Signup to reply.
  3. 0

    To add custom HTML to the tab title you can create an array from your icons and change nvaigation.php in the woocommerce template folder like below:

    $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>'
];

    and in the foreach of rendering tabs echo with $endpoint like below:

    <?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; ?>

    with this method, you can add any content to your tabs

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search