Custom my account page woocommerce

En skreddersydd «Min konto»-side i WooCommerce, gir nettbutikken din en unik og sømløs opplevelse. I denneguiden så vil jeg vise deg hvordan du kan lage din egen min konto side og hvordan du kan designe kontrollpanelet til min konto ved bruk av UX builder som er inkludert i Flatsome temaet.

1. Først må du sjekke om du har installert et «child» tema for Flatsome, dette kan du enkelt gjøre ved å gå igjennom setup-wizard som du finner ved å holde musepekeren over Flatsome menyen i admin-baren i WordPress.

2. Så må vi finne hvilket filer vi må overskrive i mappen til Flatsome temaet. Disse filene bruker vi i denne guiden: page-my-account.php, woocommerce/myaccount/dashboard.php, woocommerce/myaccount/dashboard-links.php, woocommerce/myaccount/account-links.php

Last ned WooCommerce filene her
Last ned page-my-account.php her

3. Last opp filene til ditt child tema under Flatsome wp-content/themes/ditt-child-tema. Last opp zip arkivene og pakk de ut i child temaets root mappe.

4. Så må vi inkludere disse filene vi nettopp har opprettet i child temaets function.php

include_once get_stylesheet_directory() . '/woocommerce/netto-custom/last-user-orders.php';
include_once get_stylesheet_directory() . '/woocommerce/netto-custom/user-name-shortcode.php';
include_once get_stylesheet_directory() . '/woocommerce/netto-custom/netto-account-links.php';
include_once get_stylesheet_directory() . '/woocommerce/netto-custom/netto-account-avatar.php';

5. Opprett to nye UX blocks som heter «netto-my-account». Kopier UX builder koden og lagre.

netto-my-account:

[row style="collapse"]

[col span="3" span__sm="12" padding="0px 20px 0px 0px" margin="20px 0px 0px 0px" class="round-corners" visibility="hidden"]

[row_inner style="collapse" v_align="middle" h_align="center"]

[col_inner span__sm="12" padding="0px 0px 0px 0px" margin="0px 0px 0px 0px" class="netto-account-content"]

[gap]

[/col_inner]

[/row_inner]

[/col]
[col span__sm="12" padding="40px 40px 40px 40px" class="netto-account-content"]

[row_inner style="collapse" v_align="middle" h_align="center"]

[col_inner span__sm="12"]

[row_inner_1 style="collapse" v_align="middle" h_align="center"]

[col_inner_1 span="9" span__sm="12" span__md="9" align="left"]

[ux_text font_size__sm="1.2" text_align="left" text_align__sm="center" text_color="#31bcbf"]

Velkommen [netto-user-name],

[/ux_text]
[ux_text font_size="1.4" text_align="left" text_align__sm="center" class="lead"]

Her vil du finne all relevant informasjon.
[/ux_text]

[/col_inner_1]
[col_inner_1 span="3" span__sm="12" span__md="3" align="center" visibility="hide-for-small"]



[ux_html]

[netto-avatar]
[/ux_html]
[ux_image id="162" width="56" width__md="80"]






[/col_inner_1]

[/row_inner_1]
[gap]

[row_inner_1 style="collapse"]

[col_inner_1 span__sm="12" span__md="12" padding="20px 20px 20px 20px" align="left" class="netto-woocommerce-MyAccount-content-inner"]

[ux_text text_align="left" text_align__sm="center"]

Siste bestillinger

[/ux_text]
[ux_html]

[netto-last-user-orders]
[/ux_html]

[/col_inner_1]

[/row_inner_1]

[/col_inner]

[/row_inner]

[/col]

[/row]

Så legger du til css koden i Flatsome > Advance > Custom CSS:

.netto-account-content, .woocommerce-MyAccount-content, .woocommerce-ResetPassword {
    background: #fff;
    margin-top: 2%;
    margin-bottom: 2%;
padding: 2.5em;
    border-radius: 10px;
}

.col-netto {
  margin-bottom:2%;
}

.nav li.has-icon-left>a>i, .nav li.has-icon-left>a>img, .nav li.has-icon-left>a>svg {
    margin-right: 5px;
    width: 20px;
}

.nav-vertical.nav-line>li>a:before {
  height: 100%;
    border: 1px solid var(--primary-color);;
    background: #fff0;
    border-radius: 10px;
    width: 100%;
left:50%;
}

.my-account .account-nav {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: space-between;
}

#my-account-nav {
    display: flex;
    flex-wrap: nowrap; /* Hindrer elementene i å bryte til en ny linje */
    list-style-type: none; /* Fjerner standard punkttegn for listen */
    padding: 0; /* Fjerner standard padding */
    margin: 0; /* Fjerner standard margin */
    overflow-x: auto; /* Legger til horisontal scrollbar hvis nødvendig */
    scrollbar-width: none; /* Skjuler scrollbar for Firefox */
    -ms-overflow-style: none; /* Skjuler scrollbar for Internet Explorer og Edge */
}

#my-account-nav::-webkit-scrollbar {
    display: none; /* Skjuler scrollbar for Webkit-baserte nettlesere som Chrome og Safari */
}

#my-account-nav li {
    margin-right: 10px;
    background: #fff;
    padding: 0px 14px 0px 14px;
    border-radius: 10px;
}
.netto-woocommerce-MyAccount-content {
    padding: 20px 20px 5px 20px;
    border-radius: 5px;
}

.netto-woocommerce-MyAccount-content-inner {
border: 1px solid #eee;
border-radius:10px;
}

.netto-account .account-user.circle {
    text-align: right;  /* Justerer innholdet til høyre */
}

.netto-account .account-user .image {
    display: inline-block;  /* Sørger for at avataren beholder sin blokk-egenskap */
    float: right;  /* Flytter avataren til høyre */
    margin-left: 10px;  /* Gir litt plass mellom avataren og teksten/elementene til venstre (om nødvendig) */
}

/* Tilpass for mindre skjermer */
@media (max-width: 768px) {
    .netto-account .account-user.circle {
        text-align: center;  /* Sentrerer innholdet på små skjermer */
    }

    .netto-account .account-user .image {
        float: none;  /* Fjerner flyting på små skjermer */
        margin: 0 auto;  /* Sentrerer avataren */
    }
}



.account-nav.nav>li>a {
    text-transform: inherit;
    font-size: .95em;
    font-weight: 500;
    letter-spacing: 0;
    width: 125px;
}

.netto-account {
    background: #fff;
    padding: 1.5em;
    margin: 0;
}