Woo & LD: Custom My Account Page

by

Ein Projekt (charlymahr.com/my-account) habe ich mit WooCommerce, LearnDash und Groundhogg aufgesetzt. Theoretisch würde es auch nur mit GH gehen, aber das ist ein anderes Thema. Das LD-Profil soll auf der My-Account Page dargestellt und diese gestyled werden.

Endpoints

Um das LD-Profile als Endpoint einzubinden, bin ich folgendermaßen vorgegangen:

  1. Page “Your Profile” erstellen (mit Slug tuts & ld_profile Block) und “My Account” als Parent-Page zuweisen.
  2. “WooCommerce Account Pages by Iconic” Plugin installieren – hiermit werden die unterhalb von “My Account” angelegte Pages automatisch als Custom Endpoint erzeugt.
  3. Snippets, um “Dashboard” Endpoint zu entfernen und auf einen der Custom Endpoints (hier: mit Slug /tuts/) umleiten:
// Remove dashboard endpoint and redirect to /tuts/
add_action( 'woocommerce_account_dashboard', 'remove_dashboard_endpoint_redirect_to_tuts' );
function remove_dashboard_endpoint_redirect_to_tuts() {
    wp_redirect( wc_get_account_endpoint_url( 'tuts' ) );
    exit;
}

// Remove dashboard endpoint from menu
add_filter( 'woocommerce_account_menu_items', 'remove_dashboard_menu_item', 10, 1 );
function remove_dashboard_menu_item( $items ) {
    unset( $items['dashboard'] );
    return $items;
}

// Move /tuts/ endpoint to top of menu
add_filter( 'woocommerce_account_menu_items', function( $items ) { return ['tuts' => $items['tuts']] + $items; } );

Styling

/* Style WOO Account Endpoint Links */
/* All endpoints */
.woocommerce-MyAccount-navigation a {
  padding-left: 15px !important;
  border-radius: 5px;
	margin-bottom:5px;
	text-decoration:none;
	background-color:var(--cm-cards03);
	color:var(--base-2);
}
/* Hover endpoint */
.woocommerce-MyAccount-navigation li a:hover {
    background-color: var(--accent);
}
/* Active endpoint */
.woocommerce-MyAccount-navigation li.is-active a {
    background-color: var(--accent);
	color:var(--base-2);
}

/* Woo Message 1 Orders */
.woocommerce-message {
border-radius:5px;
}
/* Woo Message 2 Payment */
.inside-article p{
	border-radius:5px;
}

/* LD Your Profile Endpoint */
#ld-profile .ld-course-list .ld-section-heading{
	display: none;
}
#ld-profile{
	margin-top:-35px;	
}
/* LD LearnDash Buttons */
/* Expand button */
.ld-section-heading .ld-item-list-actions .ld-expand-button{
	border-radius:5px;
	font-weight:400;
	font-size:14px;
}
/* Item list item */
#ld-main-course-list .ld-item-list-item{
	margin-bottom:-12px;
}
/* Item list item preview */
#ld-main-course-list .ld-item-list-item .ld-item-list-item-preview{
	padding-top:14px;
	padding-bottom:14px;
}

Formulare

Groundhogg

Im Customizer habe ich zudem für die Groundhogg-Formulare die Felder und Buttons per CSS gestyled. Ginge auch per GP-Elements.

Fluent Forms

Setze ich meist über GP-Elements ein.