Merch Styling

WooCommerce

Det er lige blevet endnu nemmere at skabe overbevisende Woocommerce-websteder med GeneratePress Premium 1.8.

WooCommerce er lige blevet endnu enklere med GeneratePress Premium 1.8 . Det ville selvfølgelig ikke være et Flint Skin-websted, hvis der ikke var lidt CSS og nogle brugerdefinerede funktioner. Men langt størstedelen af det, du ser, er stilet via Tilpasningsprogrammet.

Woo Shop-side

Nye GP Premium 1.8-funktioner

  • Vis undermenuen Minivogn
    Du behøver ikke længere et plugin med denne smukke min-vogn, der vises, når du svæver over nav-vognsikonet
  • Menupunktets indhold
    Valg mellem Beløb og Antal varer. Jeg har valgt det sidste
  • Vis kurvpanel ved tilføjelse til indkøbskurv
    Udskiftning af standard WooCommerce tilføj til indkøbskurv-meddelelsen med et fantastisk udskydeligt panel.

Butiksside Produkt – tilføj til indkøbskurv ( desktop )

Brug lidt CSS til at skabe en vis/skjul-effekt ved hover. Dette bruger noget CSS, som du kan finde i Tilpasningsværktøj > Yderligere CSS. Det ser således ud:

.woocommerce ul.products li.product {
    overflow: hidden;
}

.woocommerce ul.products li.product:hover .button {
    -webkit-transform: translatey(0) !important;
    transform: translatey(0) !important;
}

.woocommerce ul.products li.product .button {
    font-size: 12px;
    line-height: 15px;
    padding: 8px 12px;
    min-height: 15px;
    font-weight: bold;
    text-transform: uppercase;
}

@media (min-width: 1024px) {
    .woocommerce ul.products li.product .button {
        position: absolute;
        top: 0;
        -webkit-transform: translatey(-150%);
        transform: translatey(-150%);
        -webkit-transition: 0.35s;
        transition: 0.35s;
        margin-top: 10px;
        margin-left: 10px !important;
    }
}

Radiushjørnerne er blevet tilføjet ved hjælp af CSS-knappen, som er beskrevet i stiliseringsvejledningen.

Salgsmærke

For at komplimentere placeringen og de afrundede hjørner i tilføj til indkøbskurven brugte jeg denne CSS:

.woocommerce span.onsale {
    position: absolute;
    margin: 10px !important;
    border-radius: 4px !important;
}

WooCommerce sidebjælker – Fælles

Webstedet bruger standard højre sidebar, der er fyldt med WooCommerce-widgets. Der er selvfølgelig noget CSS til at tilføje grænser, justere padding og marginer. Det ser således ud:

@media (min-width: 768px) {
    #right-sidebar {
        border-left: 1px solid #d6d7d8;
    }

    #right-sidebar .widget {
        margin-bottom: 0;
    }

    #right-sidebar aside:first-child {
        padding-top: 0;
    }

    #right-sidebar aside:not(:first-child) {
        border-top: 1px solid #d6d7d8;
    }
}

Se venligst de separate bemærkninger om den enkelte produktsidebar

WooCommerce enkeltprodukt

Siden for enkeltprodukter har fået en del seriøs kærlighed med GP Premium 1.8. Bortset fra Hook Elements på spil og de små afrundede hjørner på knapperne styres al styling fra Customizer. Forrygende fantastisk. Det er i kraft af disse nye funktioner, at der kun bruges meget lidt Woo CSS. Så først og fremmest skal du se alle de nye funktioner i Tilpasning > Layout > WooCommerce.

Nye GP-funktioner

  • Bredde af produktbilledernes område
    Indstilles til 65 %, da dette websted skal handle om billedet.
  • Vis tilføj til kurv-panel ved rulning
    Glimmer ind i visningen, når siden tilføj til indkøbskurven rulles forbi, så denne vigtige funktion altid er synlig
  • Knapper til visning af antal
    De nye + / – qty felter tilføjer virkelig en finesse

Så tag et kig på de få tilpasninger, der er foretaget ved hjælp af Hooks og lidt ekstra CSS

Jump Link – fuld beskrivelse

Ved hjælp af et Hook Element: Single Product Jump to Description har vi tilføjet et simpelt springlink, som fører os fra resuméet til den fulde beskrivelse. Her er HTML-koden til dette. Den bruger den brugerdefinerede loud-link-klasse på sin container til at levere hover og pilen. Den bruger også GP-klassen til glat rulning, og denne indstilling er aktiv i Customizer > Generelt

<p class="loud-link">
	<a class="smooth-scroll" href="#tab-title-description">Full description</a>
</p>

Variationer baggrund styling

Tilføjelsen af en lille baggrundsfarve og lidt padding for at få produktvariationer til at skille sig ud krævede denne CSS:

.woocommerce.single-product div.product form.cart .variations {
    background-color: #f2f3f4;
    padding: 30px 40px;
}

Social deling

Det var nemt at bruge Jon Mathers GP Social Sharing plugin til at vise sociale delingslinks på Woo. I indstillingerne for GP Social Share har vi deaktiveret de indbyggede kroge. Derefter oprettede jeg et Hook Element: Woo Social Sharing og tilføjede blot shortcode og valgte den dedikerede woocommerce_share hook fra den omfattende liste af hooks.

Sidebar med et enkelt produkt

Store billeder og et skarpt resumé er en vigtig del af designet. Det betød, at jeg måtte ofre noget plads uden at miste den vigtige sidebar. Så i stedet flyttede jeg sidebaren under oversigten. Det tog nogle få skridt, men det kunne alt sammen opnås i GP og Customizer. Sådan gør du:

  • Fjern sidebar fra standardpositionen
    Customizer > Layout > WooCommerce –> Single Product > Sidebar Layout: Content / No Sidebar
  • Tilføj sidebaren i en ny position
    Hook Element: Woo Single Product Sidebar en simpel funktion til at hænge sidebaren tilbage hvor jeg ville have den.
  • Derefter noget tilpasset CSS for at sikre, at den placeres korrekt på skrivebordet

CSS til sidebar med et enkelt produkt

@media (min-width: 768px) {
    .single-product #right-sidebar {
        float: right;
    }

    .single-product div.product .woocommerce-tabs,
    .single-product div.product .related.products,
    .single-product div.product .upsells.products {
        width: 66%;
        display: inline-block;
    }
}

Woocommerce produktbilleder

I den seneste version af Woo har de ændret den måde, hvorpå du kan størrelsesbestemme billederne. I Customizer > WooCommerce > Produktbilleder har du nu kun to valgmuligheder.

  • Hovedbillede bredde
    Dette er det billede, der anvendes på det enkelte produkt. Den er sat til 800px for at matche bredden på det enkelte produktbilledområde.
  • Bredde af miniaturebilleder
    Indstilles til 400px, hvilket er lige tilpas til 2-kolonne-layoutet. Du kan være tilbøjelig til at reducere denne værdi, hvis du bruger flere kolonner. Men da der ikke er nogen mobilindstilling, lader jeg den være på 400px, så den passer fint på de store mobile enheder.

Det gode ved de nye Woo Product Images er, at de automatisk genererer størrelserne. Det er ikke nødvendigt at ændre miniaturebillederne, og de forstyrrer ikke dine normale WP-miniaturebilleder.

Rådgivning om billeder

Det kræver en masse arbejde at få dine billeder til at se godt ud i Woo. Hvis du forventer, at Woo skal trylle for dig, så får du problemer. Begynd med denne praktiske tjekliste:

  • Aspektforhold
    Et konsistent formatforhold eliminerer fejljustering af billeder i dit gitter eller grimme bevægelser i dit produktgalleri. Jeg ville helst holde mig til firkantede billeder. Hvis det betyder, at du skal redigere dem i dit foretrukne billedredigeringsprogram og tilføje noget hvidt mellemrum, så gør det.
  • Billedstørrelser
    Woo giver dig mulighed for at indstille miniaturebilledet og hovedbilledet. Ideelt set skal de kunne deles ligeligt i dit originale billede, f.eks.
    Original: 1600px , Hovedbillede: 800px , Miniaturebillede: 400px.
    Du vil ikke have billeder i ulige størrelser, hvor de bliver slørede ved ændring af størrelsen på grund af forvildede brudstykker af en pixel.
  • Indstilling af billedstørrelser
    Indlæs nogle overdimensionerede billeder i dine dummy-produkter. Indstil størrelsen på Customizer > WooCommerce > Produktbilleder, så de fylder beholderen. Brug nu browserinspektøren til at se, i hvilken størrelse de vises i din butik og i dit enkeltprodukt. Sørg for at gøre dette, når du er færdig med dit layoutdesign.
  • Mobil først
    Tænk på, at du sandsynligvis vil bruge en enkelt kolonne til mobilen. Det kan betyde, at der er brug for et bredere billede end dem i skrivebordsspalterne. Brug dette til størrelsen på din miniaturebillede. Det er ikke noget stort problem, at de er større, end du har brug for på skrivebordet.
  • Zoom
    Produktgalleriet Zoom og Lightbox bruger det største billede, som det kan få fat i. Så sørg for, at dit originale billede er større end den bredde, du har indstillet for hovedbilledet.
Click to rate this post!
[Total: 0 Average: 0]
Item added to cart.
0 items - 0,00