Each block has a shortcode twin with the same options. In the block editor you set them in the sidebar and pick products, courses and badges from a list. A shortcode takes the same options as attributes, and items by their UUID. Where to copy a UUID is explained at the end of this page.
An attribute you leave out takes the default from the table. An empty text attribute also falls back to the default wording.
Checkout Button
A button that opens the memberarea checkout for one product.
The sidebar panel Checkout has two fields: Product and Button label. Without a label the button reads Buy now.
Until a product is picked, the editor shows a placeholder with the product list and the page shows nothing. If the product is later removed in your memberarea, the editor warns you to pick another one.
[memberarea_checkout]
| Attribute | Values | Default |
|---|---|---|
product |
UUID of a product | none, required |
label |
any text | Buy now |
class |
your own CSS classes | none |
Product
Shows one product with an add-to-cart button, compact or with full details.
The sidebar panel Product has the Product picker and Layout, with Compact. Quantity and add to cart. (the default) or Full. Image, price and options.
Until a product is picked, the editor shows a placeholder and the page shows nothing.
[memberarea_product]
| Attribute | Values | Default |
|---|---|---|
product |
UUID of a product | none, required |
layout |
compact, full |
compact |
class |
your own CSS classes | none |
Any layout other than full gives the compact layout.
Cart
A cart button with a dropdown that shows what the visitor added and takes them to the checkout.
The block has no options. While the site is not connected, the editor shows a hint where to connect it, and the page shows nothing.
[memberarea_cart]
| Attribute | Values | Default |
|---|---|---|
class |
your own CSS classes | none |
Course Catalogue
Lists the courses you sell, each with its price and a checkout button. Members see a link into the courses they already hold.
- Layout: Columns (1 to 4, default 3), How many courses at most (0 to 24, zero shows every course), Show the course image, Show the description and Show the price, all three on by default.
- Which courses: Only courses that can be bought, off by default. When on, courses without a product are left out.
- Wording: Buy button (default Buy now) and Button for a course the member already has (default Open course).
- When there is nothing to show: When no course is on sale, Where the button leads and Button wording.
When no course is left to show, the block shows "No courses are on sale right now." or your own text, plus a button to the page you entered, labelled Learn more unless you word it yourself. When the course list cannot be loaded from your memberarea, the block shows nothing.
[memberarea_course_catalogue]
| Attribute | Values | Default |
|---|---|---|
columns |
1 to 4 | 3 |
limit |
a number, 0 for every course |
0 |
purchasable |
yes or no | no |
image |
yes or no | yes |
description |
yes or no | yes |
price |
yes or no | yes |
button |
any text | Buy now |
owned |
any text | Open course |
empty |
any text | No courses are on sale right now. |
link |
address of a page | none |
linklabel |
any text | Learn more |
class |
your own CSS classes | none |
Verified Badge
Shows the verified badge of one of your courses, with participants and lesson count.
The sidebar panel Badge has the Badge picker and four choices:
- Design: Wide (the default), Large, Compact, Single row.
- Style: Standard (the default), Light, Transparent.
- Corners: Square, Slightly rounded, Rounded (the default), Very rounded.
- Alignment: Centered (the default), Left.
The picker lists only badges that are switched on. If a picked badge is switched off later, the editor says so and visitors see nothing. Without a badge the page shows nothing.
[memberarea_badge]
| Attribute | Values | Default |
|---|---|---|
badge |
UUID of a badge | none, required |
design |
long (Wide), large, compact, row (Single row) |
long |
style |
standard, light, transparent |
standard |
radius |
none (Square), small, medium, large |
medium |
align |
center, left |
center |
class |
your own CSS classes | none |
A value the list does not know falls back to the default.
Member Login
Shows a sign-in button to visitors, and name, picture and a sign-out button to signed-in members.
- Labels: Sign-in button (default Sign in) and Sign-out button (default Sign out).
- Signed in: Show the profile picture, Show the name and Offer a sign-out button, all on by default.
- Layout: Alignment, with Left (the default), Centered or Right.
While member login is not set up, the editor shows a warning and visitors see nothing.
[memberarea_login]
| Attribute | Values | Default |
|---|---|---|
sign_in |
any text | Sign in |
sign_out |
any text | Sign out |
avatar |
yes or no | yes |
name |
yes or no | yes |
logout |
yes or no | yes |
align |
left, center, right |
left |
class |
your own CSS classes | none |
My Courses
Shows the signed-in member the courses they hold, each linking straight into your memberarea.
- Layout: Columns (1 to 4, default 2), Show the course image and Show progress, both on by default.
- When there is nothing to show: Member without courses, Visitor who is not signed in, Where the button leads and Button wording.
A visitor who is not signed in sees "Sign in to see your courses." or your own text, with a Sign in button. A member without courses sees "You have no courses yet." or your own text. Both get a button to the page you entered, labelled Browse courses unless you word it yourself. A course that waits for a required course shows "Available once you finish the required course." instead of its progress. Under the progress bar a course reads, for example, "40% done", and Completed once it is finished. While member login is not set up, the block shows nothing.
[memberarea_my_courses]
| Attribute | Values | Default |
|---|---|---|
columns |
1 to 4 | 2 |
image |
yes or no | yes |
progress |
yes or no | yes |
empty |
any text | You have no courses yet. |
signedout |
any text | Sign in to see your courses. |
link |
address of a page | none |
linklabel |
any text | Browse courses |
class |
your own CSS classes | none |
Course Progress
Shows the signed-in member how far along they are, in one course or across all of them.
- What to measure: Progress of, with All courses of the member (the default) or One course. For one course, pick it under Course.
- Appearance: Shape (Bar or Ring), Show the title, Show the percentage and, for all courses, Show how many courses are finished. Screen readers hear the percentage either way.
- When there is nothing to show: Member without courses (for one course: Member without this course), Visitor who is not signed in, Where the button leads and Button wording.
A visitor who is not signed in sees "Sign in to see your progress." or your own text, with a Sign in button. A member without courses sees "You have no courses yet.", a member without the picked course "You do not have this course yet.", each replaceable by your own text and followed by your button. With One course but no course picked, the block stays empty.
[memberarea_progress]
| Attribute | Values | Default |
|---|---|---|
scope |
overall, course |
course if course is set, otherwise overall |
course |
UUID of a course | none |
display |
bar, ring |
bar |
label |
yes or no | yes |
percent |
yes or no | yes |
count |
yes or no | yes |
empty |
any text | You have no courses yet. (one course: You do not have this course yet.) |
signedout |
any text | Sign in to see your progress. |
link |
address of a page | none |
linklabel |
any text | Browse courses |
class |
your own CSS classes | none |
count only shows for the overall progress.
Rules for every shortcode
Yes and no
no, false, 0 and off switch an option off. Any other value counts as
yes.
Upper and lower case
Attribute names and the values from the tables work in any case, so
Layout="FULL" is the same as layout="full". Your own texts appear exactly as
you type them.
One line each
Put every shortcode on its own line, so it does not end up in the middle of a
paragraph. The one exception is [memberarea_checkout]: it renders inline and
can sit inside a sentence.
Button links
link takes an address starting with https:// or a path starting with /,
such as /courses. Anything else, such as www.example.com/courses, is dropped
and the button does not appear.
One course or all
[memberarea_progress course="…"] shows that course. Add scope="overall" to
show the progress across all courses instead.
Widget languages
The checkout, the product, the cart and the badge take their wording from your memberarea, also when the checkout opens from a button in the Course Catalogue. They follow the language of the WordPress site when it is German, English, Spanish, French, Italian, Hungarian, Dutch, Polish or Portuguese. Any other site language shows them in English.
Finding the UUIDs
-
Product: in your memberarea go to Payments > Settings > Widgets, open the Widgets tab, pick the product under Snippet configurator and press Copy next to Product ID.
The snippet configurator with a product picked and the Copy button next to Product ID -
Course: under Courses, use Copy course link on a published course. The link ends in the course UUID, as in
https://your-domain/user/courses/<UUID>. -
Badge: open the course, then Settings > Marketing Badge, press Customize on a design and then Generate badge. In the Badge code window, the value after
data-badge=is the badge UUID.
