Back to Documentation

WooCommerce Account Icon block for WordPress

The WooCommerce Account icon block is a simple icon block to re-direct your viewers to their WooCommerce account page.


Overview of the WooCommerce Account Icon Block

The WooCommerce Account Icon Block is a convenient and stylish way to display an account icon on your WooCommerce site for users to easily navigate to their account pages.

This block not only provides a recognizable icon for user accounts but also offers an optional dropdown menu with links to various account sections of your choice.

Built for the core editor, this block enhances user experience by making account navigation simple and intuitive.

WooCommerce Account Icon Block: Example:

For the WooCommerce Account Icon you can change the account url, icon, all colors and select which items are displayed in the drop down menu.

*When a user is logged in they will see a dropdown with account links

Adding the WooCommerce Account Icon

To add the WooCommerce Account Icon block to your page in the WordPress block editor, you can simply click the Add New block icon and type in either “woocommerce”, “account”, “icon” or “blockons” and then you should see the block appear for you to click and add it to the page.

Adding the WooCommerce Account Icon Block from the WP editor
Adding the WC Account Icon Block to your page

Or, you can also open the left sidebar and then do a search there, or scroll to the “Blockons Blocks” category to click and add it to the page.

Add the WooCommerce Account Icon Block from the sidebar
Add the Account Icon Block from the sidebar

Editing the WooCommerce Account Icon

Once you’ve added the WooCommerce Account Icon block to the page and you have the block selected, you should then see all the setting available in the right-hand sidebar panels.

There you can adjust select to add a drop down menu which will display all the Account page links, and you can select which account links you want to display in the drop down.

WooCommerce Account Icon block Settings
WC Account Icon Settings

For editing purposes, we’ve added the extra setting to “Always show the drop down”. This is only for editing the block and will not change anything on the block frontend.

Always display the drop down while editing
Always display the drop down while editing

There are also a bunch of design settings available for the WooCommerce Account Icon block where you can change the icon to an icon we’ve provided or add your own custom icon that will be displayed for the block, as well as the icon sizing, padding and colors.

WooCommerce Account Icon block Design Settings
WC Account Icon Design Settings

You can also edit the drop down background color and font colors for the Icon block.

If there is anything else you may need added to this block or if you can think of some nice extra features then please let us know.


Benefits of Using the WooCommerce Account Icon Block

Using the WooCommerce Account Icon Block offers several advantages:

  • Improved User Navigation: Provides easy access to account sections, enhancing the overall user experience.
  • Stylish and Functional: Adds a professional touch to your site with a customizable icon and dropdown menu.
  • Increased User Engagement: Simplifies account management, encouraging users to interact more with your site.
  • Enhanced Mobile Experience: Ensures seamless navigation on both desktop and mobile devices.
  • SEO Benefits: Improves site structure and usability, potentially boosting your search engine rankings.

Blockons WC Account Icon Block: Key Features

The WooCommerce Account Icon Block comes with a range of features to enhance your site:

  • Customizable Icon: Choose from various icon styles to match your site’s design.
  • Optional Dropdown Menu: Include links to account all sections such as orders, addresses, account details, etc.
  • Responsive Design: Ensure the icon and dropdown menu look great on all devices.
  • Easy Integration: Works seamlessly with WooCommerce and other Gutenberg blocks.
  • User-Friendly Settings: Simple to configure and customize, even for beginners.