Merch styling

WooCommerce

Å lage overbevisende Woocommerce-nettsteder ble akkurat enda enklere med GeneratePress Premium 1.8.

WooCommerce ble nettopp enda enklere med GeneratePress Premium 1.8. Det ville selvfølgelig ikke vært et Flint Skin-nettsted hvis det ikke var litt CSS og noen tilpassede funksjoner. Men det store flertallet av det du ser er stylet gjennom Customizer.

Woo butikkside

Nye GP Premium 1.8-funksjoner

  • Vis undermeny for minivogn
    Ikke lenger behov for en plugin med denne vakre min-vognen vist når du svever nav-vogn-ikonet
  • Menyelement innhold
    Valg mellom antall og antall varer. Jeg har valgt det siste
  • Vis handlekurvpanel på legg i handlekurv
    Ved å erstatte standard WooCommerce-varsling for legg i handlekurven med et flott uttrekkspanel.

Butikksideprodukt – legg i handlekurv (skrivebord)

Bruke litt CSS for å lage en show/hide on hover-effekt. Dette bruker noe CSS som du kan finne i Customizer > Ekstra CSS. Det ser slik ut:

.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ørnene er lagt til ved hjelp av Button CSS som er dekket i Styling Guide.

Salgsmerke

For å komplimentere plasseringen og de avrundede hjørnene på legge til i handlekurven brukte jeg denne CSS:

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

WooCommerce-sidepaneler – Vanlige

Nettstedet bruker standard sidefelt til høyre, fullpakket med WooCommerce-widgets. Det er selvfølgelig noe CSS for å legge til kantlinjer, justere polstring og marginer. Det ser slik ut:

@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 de separate merknadene på sidepanelet for enkeltprodukter

WooCommerce enkeltprodukt

Enkeltproduktsiden hadde en seriøs kjærlighet brukt med GP Premium 1.8. Bortsett fra krokelementene som spilles og de små avrundede hjørnene på knappene, styres hele stylingen fra Customizer. Råkult. Det er i kraft av disse nye funksjonene som betyr at det er veldig lite Woo CSS som brukes i det hele tatt. Så først sjekk ut alle de nye funksjonene i Customizer > Layout > WooCommerce.

Nye GP-funksjoner

  • Produktbildeområdets bredde _
    Sett til 65 % siden dette nettstedet skal handle om bildet.
  • Vis legg i handlekurv-panelet på rulling
    Skyves til syne når legg til i handlekurv på siden rulles forbi, slik at denne viktige funksjonen alltid er synlig
  • Vis mengdeknapper
    De nye nye + / – antall felter gir virkelig et snev av finesse

Ta så en titt på de få tilpasningene som er gjort med Hooks og den lille ekstra CSS

Jump Link – Full beskrivelse

Ved å bruke et krokelement: Enkelt produkt Hopp til beskrivelse har vi lagt til en enkel koblingskobling for å ta oss fra sammendraget til den fullstendige beskrivelsen. Her er HTML for det. Den bruker den egendefinerte høytkoblingsklassen på beholderen for å gi sveve og pil. Den bruker også GP smooth-scroll- klassen, med dette alternativet aktivt i Customizer> generell

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

Variasjoner bakgrunnsstyling

Å legge til litt bakgrunnsfarge og litt polstring for å få produktvariasjoner til å skille seg ut krevde denne CSS:

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

Sosial andel

Det var enkelt å bruke Jon Mathers GP Social Sharing-plugin for å vise sosiale delingslenker på Woo. Innenfor GP Social Share-innstillingene har vi deaktivert de innebygde Hooks. Deretter opprettet jeg et Hook Element: Woo Social Sharing. Jeg la ganske enkelt til kortkoden og valgte den dedikerte woocommerce_share- kroken fra den omfattende listen over kroker.

Enkelt produktsidefelt

Store bilder og skarp oppsummering er en viktig del av designet. Dette betydde at jeg måtte ofre litt plass uten å miste det viktige sidefeltet. Så i stedet flyttet jeg sidefeltet under sammendraget. Det tok noen få skritt, men alt var oppnåelig innen GP og Customizer. Slik gjøres det:

  • Fjern sidepanelet fra standardposisjonen
    tilpassere> oppsett> WooCommerce –> enkelt produkt> Sidefeltoppsett: Innhold / Ingen sidefelt
  • Legg til sidefeltet i en ny posisjon
    Hook Element: Woo Single Product Sidebar en enkel funksjon for å hekte sidebaren tilbake der jeg ville ha den.
  • Deretter litt tilpasset CSS for å sikre at den plasseres riktig på skrivebordet

Enkeltprodukts sidefelt CSS

@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 produktbilder

I den nyeste versjonen av Woo endret de måten du størrelser bildene på. I Customizer > WooCommerce > Produktbilder har du nå bare to valg.

  • Hovedbildebredde
    Dette er bildet som brukes på enkeltproduktet. Den er satt til 800px for å matche bredden på enkeltproduktbildeområdet.
  • Miniatyrbildebredde
    Sett til 400px som er helt riktig for 2-kolonnens layout. Du kan være tilbøyelig til å redusere dette hvis du bruker flere kolonner. Men siden det ikke er noe mobilalternativ, lar jeg dette være på 400px, så det passer fint på de store mobile enhetene.

Den store delen med de nye Woo-produktbildene er at de automatisk genererer størrelsene. Du trenger ikke å gjenskape miniatyrbilder, og de forstyrrer ikke de vanlige WP-miniatyrbildene dine.

Bilderåd

Å få bildene dine til å se flotte ut i Woo krever mye forhåndsarbeid. Hvis du forventer at Woo skal gjøre magien for deg, kommer du til å få problemer. Start med denne praktiske sjekklisten:

  • størrelsesforholdet
    Konsekvent sideforhold vil eliminere feiljustering av bilder i rutenettet eller skjemmende bevegelser i produktgalleriet ditt. Helst ville jeg holdt meg til firkantede bilder. Hvis det betyr at du redigerer dem i favorittbilderedigeringsprogrammet ditt og legger til litt mellomrom enn å gjøre det.
  • Bildestørrelser
    Woo lar deg angi miniatyrbildet og hovedbildet. Ideelt sett bør de være like delbare i originalbildet ditt, f.eks
    Original: 1600px , Hoved: 800px , Miniatyrbilde: 400px.
    Det du ikke vil ha er bilder i ulik størrelse der de blir uskarpe ved endring av størrelse på grunn av bortkommen brøkdeler av en piksel.
  • Angi bildestørrelser
    Last inn noen overdimensjonerte bilder i dummy-produktene dine. Still inn Customizer> WooCommerce> Produktbildestørrelser slik at de fyller beholderen. Bruk nå nettleserinspektøren for å se størrelsen de vises i butikken og enkeltproduktet ditt. Pass på at du gjør dette etter at du er ferdig med layoutdesignet.
  • mobil først
    Tenk på at du sannsynligvis kommer til å bruke en enkelt kolonne for mobil. Noe som kan bety at den trenger et bredere bilde enn de i skrivebordskolonnene. Bruk denne for størrelsen på miniatyrbildet. Det er ikke noe stort problem at de er større enn du trenger på skrivebordet.
  • zoom
    Produktgalleriets zoom og lysboks vil bruke det største bildet det kan få tak i. Så sørg for at originalbildet er større enn hovedbildets bredde du har angitt.
Click to rate this post!
[Total: 0 Average: 0]
Item added to cart.
0 items - 0,00