Back to Documentation

WooCommerce Account Icon block

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


Designed originally for the Full Site Editing features coming to WordPress, the WooCommerce Account Icon block lets you ass a customizable icon with a link to the WooCommerce account page.

The WooCommerce Account icon block can be added to anywhere on the page, and is fully customizable with sizing settings, padding, customizable colors and you are able to select from a few different icons.

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 WC Account Icon Block to your page
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 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.

WC Account Icon 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.

WC Account Icon 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.