Endpoints tab

You can find all endpoints that are visible the “My Account” page, in the “Endpoints” section. All WooCommerce endpoints are already available in the plugin.
Go to YITH > Customize My Account Page and click on the ‘Endpoints‘ tab to start configuring your endpoints.

Endpoints

You can customize every endpoint in the list, by changing a variety of options. Like slug, label, icon, content and the user role to whom this endpoint is visible.

endpoint options

By hovering over the different endpoints a ‘moving’ simbol appears, so you can change the sorting order. Simply drag and drop the elements.

move and enable

To (temporarily) disable the visibility of the endpoint on the my account page, use the ‘yes/no’ toggle.

How to create a new endpoint

Click on the “Add new” button, to create a new endpoint.

add endpoint

A new empty endpoint opens and you can start customizing it:

Endpoint creation

  • Endpoint label: The label shown on the ‘My account’ page menu.
  • Endpoint slug: The slug that is shown in the link.
  • Endpoint icon: There are 3 options:
    • Don’t show an icon
    • Show a default icon (select a pres-set icon from a list).
    • Upload a custom icon (upload an image of your choice).

Endpoint creation 2

  • Show endpoint to: Either all users, or users with a specific role.
  • User roles: Only the user roles you select here, will be able to see this endpoint.
  • Content: The content you wish to show in the endpoint. You can add text, shortcodes, images, banners etc. Check out this page on how to edit and add banners. Below an example of content with images:

content with images

  • Place content: Where to show the content:
    • Before the default content
    • After the default content
    • Overriding the default content
  • CSS class: Add additional CSS classes to this eindpoint container.
Frontent example:

Example endpoint1

Frontent example with images:

images frontent

How to link a custom URL

You can add a new menu item in My Account with a custom URL.

add new link

To create it, just go to YITH > Customize My Account Page > ‘Endpoints’ and click on the ‘+ Add link’ button.

link creation

  • Link url: Clicking on this endpoint will redirect you to this link.
  • Link label:  Name of the endpoint
  • Link icon: There are 3 options:
    • Don’t show an icon
    • Show a default icon (select a pres-set icon from a list).
    • Upload a custom icon (upload an image of your choice).
  • Show link to: Either all users, or users with a specific role.
  • User roles: Only the user roles you select here, will be able to see this endpoint.
  • Open link in new tab: Decide if the link will open in a new tab or on the same page.

link my account

Once you click on the endpoint in the my account page, you will be redirected to the linked page immediately.

How to create a new Group

Endpoints or custom links on My Account page can be grouped to keep your page usable and easy to navigate. To create a new group go to YITH > Customize My Account Page > ‘Endpoints’ and click on the + Add group button.

add group

For every group, you can edit the following information:

  • Group label: Name of the endpoint.
  • Show open: Group is open by default (only for vertical style).
  • Group icon: There are 3 options:
    • Don’t show an icon
    • Show a default icon (select a pres-set icon from a list).
    • Upload a custom icon (upload an image of your choice).
  • Show group to: Either all users, or users with a specific role.
  • User roles: Only the user roles you select here, will be able to see this endpoint.

new group creation

After that, you can create all the endpoints or links you want to include or simply move the ones that you’ve previously created.

You can order items by dragging and dropping them. Make sure you indent the item to include it in the group, so they become subitems of the group.

group and subendpoints

The my account page will now have a more organized outlook.

group frontend

 

How to reset an endpoint

You can reset to default values for your endpoints, just click on the button “Reset Defaults” on the bottom of the ‘Endpoints‘ page.

reset default

If you want to reset the content of WooCommerce endpoints to its default value, leave the content text area empty.

General settings

In the ‘General settings’ you can find all settings related to the users avatar.

general settings

  • Default user avatar: Either use the default avatar, or choose a default avatar of your choice for your users.
  • Upload default avatar: Upload the avatar of your choice to use as default.
  • Avatar size: Avatar size in px (by default 120 px)
  • Avatar border radius: Set to 0 for square, set to 10 for circle.
  • Allow users to upload avatar: Users are able to upload their own image to replace the default avatar.
  • Default endpoint: Default endpoint for the my account page.

avatar edit

Users are able to change their avatar from the my account page, in case you enabled the before mentioned option.

Style options

From YITH > Customize My Account Page > ‘Style options’ you will be able to choose among 3 different menu positions, and 3 different menu layouts.

Examples are shown at the end of the page, or by clicking on the options above.

style options 1

You can customize colors of “My Account” section using the specific options available in plugin settings panel. You can edit button colors, text size, border and background colors.

style options 2

Every layout has its own color and border options, depending on the layout you choose, you will see different options.

Examples:

Vertical left – Simple tabs

1. vertical simple

Banners tab

From the ‘Banners’ tab you can manage your banners.

banners tab

You can create your banners from the ‘Banners’ tab and you can insert the banner into the endpoints of your choice. If you want to know how to add a banner to your endpoint content, we explain it here.

banner - order example

  • Banner name: Name of the banner
  • Banner icon: There are 3 options:
    • Don’t show an icon
    • Show a default icon (select a pres-set icon from a list).
    • Upload a custom icon (upload an image of your choice).
  • Icon width: Widt of the icon (100 px by default)
  • Widget width: Width of the widget shown (250 px by default)
  • Widget text: Text that is displayed within the widget, below the icon.

banner - order example 2

  • Banner colors: Set text, background and border colors of the banner.
  • Show badge with dynamic count of items: There are 3 options to choose from:
    • Orders
    • Downloads
  • Badge colors: Color of the count badge.
  • Banner links: Decide if the banner links to an endpoint, external url or no link.
  • Banner links to: Add the endpoint or external url.

If you are using the plugin in combination with one of the integrated YITH plugins, other dynamic count badges appear:

 

      • YITH WooCommerce Wishlist -> Items in wishlist, it counts the number of items in the wishlist of the customer.
      • YITH WooCoomerce Waiting List -> Items in waiting list, it counts the number of items in the waiting list of the user.
      • YITH WooCommerce Request a Quote -> Number of the quote lists, it counts the number of quotes sent by customers.
      • YITH WooCommerce Gift Cards -> Gift cards, it counts the gift cards owned by the customer.
      • YITH WooCommerce Points and Rewards -> Customer points, it counts the available points of the customer.

frontend example orders banner

How to add a banner to your endpoint content?

In this example we will add banners to the “Dashboard” endpoint. You can either add a banner by using the ‘Add banner’ button, or by using the shortcode.

You can insert the shortcode [yith_wcmap_banner ids=”…..”] add the banner id’s you want to show, like downloads, orders etc. which you have created in before in the “Banners” tab.

add banner

If you don’t know how to use the shortcode, you can also choose for the ‘Add banner‘ button. This button creates the shortcode for you.

add banner button

A popup will appear where you can select the pre-set banners (created in the “Banners” tab) click on ‘add’ to create the shortcode that will be added automatically.

Security options

The ‘Security options‘ tab allows you to set certain safety checks for your customers, in order for them to create an account.

Security options

  • Show reCaptcha in registration form: Enable reCaptcha on registration, the customer has to prove he is not a robot before creating an account.
  • Send a verification email new users: After registering an email will be send to the customer with a verification link. In order to complete the account they will have to verify their email address.
  • Without a verified account:  If a user doesn’t verify the account:
    • The user can’t login in the site
    • The user can login but not purchase
  • Block email domains: prevent that certain email addresses will be used to register an account, by blocking them. Example, if you want to block all emails ending with @hotmail.com, you give in “hotmail.com”.

How to get the reCaptcha Keys

reCaptcha system refers to Google “No CAPTCHA reCAPTCHA”. In order to work correctly, it requires two data: reCaptcha site key and reCaptcha secret key. Follow these instructions to configure the reCaptcha correctly.

First register an account on Google, in case you did not have one yet, go to Google reCaptcha page and click on the button Get reCAPTCHA.

recaptcha step 1

Once logged into your Google account, register a new site for the application and add the required data.

recaptcha step 2

  • Label: Identify the label of the reCaptcha you are activating.
  • Domains: List of all domains where the Google reCaptcha system has been activated.
  • Owners: Email addresses of all users, except yours, that can access the reCaptcha system settings that you are now registering.

Once entered all data and clicked on “Register”, you will be redirected to a new page, where you will find all data required for the plugin.

recaptcha step 3

Enable the ‘Show reCapcha in registration form‘ option and enter “Site Key” and “Secret Key”.  From now on, whoever wants to create a new account on your site, will have to prove they are no robot.

YITH WooCommerce Account Funds

YITH WooCommerce Account Funds allows all users to have a virtual wallet for their purchases. Users can make a deposit and their sum gets converted into virtual funds that they can use to purchase from your store, avoiding any kind of transaction before purchase.

The plugin adds two sections to the “My Account” page:

  • Make a Deposit
  • Income/Expenditure History

After activating both plugins, you will see the ‘Funds endpoints’ tab in grey and the warning which redirects you to the endpoint settings.

funds endpoints integration

By using the two plugins, you can edit the details in both sections (label, slug, icon and content) form the YITH WooCommerce Customize My Account Page admin panel without having to edit the code.

account funds endpoints