Adding User and Cart Widgets to the Header

On any website, it's recommended you give users a way to log in, manage their account, and checkout no matter where on your website they roam. Fortunately, Elevent's set of header widgets accomplishes exactly that without much effort.

Overview of the Header Widgets

The set of Elevent header widgets creates a small pseudo-menu that can be placed either in an above-header or header area, and should be included in whatever header template you use on all pages on your website.

Like all widgets, they become part of your website and match the styles and layout of the site you place them on. They'll end up looking something like this:  or this  or your own take.

There are 4 distinct Elevent Widgets that comprise the header widgets:

1. Sign-in
2. Sign-out
3. Account
4. Cart

Full documentation on these widgets can be found in the Elevent Back Office here.

Here you'll find a speedier way to get them up on your own site with the WordPress plug-in.

Adding Header Widgets to Your Header

Installing the WordPress plugin takes care of most of the steps--all you need to do is paste this snippet of code somewhere in your header, and make any style/content tweaks you want till it looks right.

Wherever your Header is managed (theme, page builder, elsewhere), edit it and add the Custom HTML in the attached elevent.header.txt file.

Using Elementor

Edit your main header from the WordPress admin bar or Theme Builder:

Add the Elevent Account Login element to the header.

This block includes the cart widget as well.

There are some custom settings you can use to modify this block:

• Welcome text: What displays before the person's first name when logged in.
• Sign In Message Text: A personalized greeting that will display when a returning member logs in again
• Membership Link: A like to a webpage where existing members can renew or upgrade their existing membership
• Hide Membership Link: toggle to "Show" to show an option in the menu for logged-in members--where they can navigate to a page to see their existing membership and potentially renew or upgrade it.

Using Gutenberg

Add the Elevent Account Login block to your header

Custom block settings can also modify the behavior of the sign-in/account block.