Merch Styling

WooCommerce

Det har blivit ännu enklare att skapa övertygande Woocommerce-webbplatser med GeneratePress Premium 1.8.

WooCommerce har just blivit ännu enklare med GeneratePress Premium 1.8 . Det skulle naturligtvis inte vara en Flint Skin-webbplats om det inte fanns lite CSS och några anpassade funktioner. Men den stora majoriteten av det du ser är stylat med hjälp av Customizer.

Woo Shop-sida

Nya GP Premium 1.8-funktioner

  • Visa undermenyn för minivagn
    Inget behov av ett plugin längre med denna vackra min-vagn som visas när du svävar över nav-vagnsikonen.
  • Innehåll i menyalternativet
    Du kan välja mellan belopp och antal artiklar. Jag har valt det sistnämnda.
  • Visa panelen för kundvagnen när du lägger till i kundvagnen
    Ersätt standardmeddelandet om att lägga till i varukorgen i WooCommerce med en fantastisk utskjutbar panel.

Butikssida Produkt – lägg i varukorgen ( skrivbord )

Med hjälp av lite CSS kan du skapa en effekt för att visa och dölja vid svävning. Detta använder CSS som du hittar i Anpassningsverktyg > Ytterligare CSS. Det ser ut så här:

.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;
    }
}

Radiehörnen har lagts till med hjälp av CSS för knappar som beskrivs i stilguiden.

Försäljningsmärke

För att komplettera positioneringen och de avrundade hörnen på tillägget till varukorgen använde jag den här CSS:en:

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

WooCommerce Sidebars – Gemensamt

Webbplatsen använder den vanliga högra sidofältet, fullt av WooCommerce-widgetar. Det finns naturligtvis CSS för att lägga till ramar, justera utfyllnad och marginaler. Det ser ut så här:

@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 separata anteckningarna om sidofältet för enskilda produkter.

WooCommerce enstaka produkt

Sidan för en enskild produkt har fått en hel del kärlek med GP Premium 1.8. Bortsett från Hook Elements och de små rundade hörnen på knapparna styrs all styling från Customizer. Jäkligt häftigt. Det är tack vare dessa nya funktioner som mycket lite Woo CSS används alls. Så kolla först in alla de nya funktionerna i Customizer > Layout > WooCommerce.

Nya GP-funktioner

  • Bredd för produktbildens område
    Ställ in 65 % eftersom den här webbplatsen ska handla om bilden.
  • Visa panelen Lägg till i kundvagnen vid rullning
    Den glider in i bilden när man rullar förbi sidan Lägg till i kundvagnen, så att denna viktiga funktion alltid är synlig.
  • Knappar för visningsmängd
    De nya fälten + / – qty ger verkligen en finess.

Ta sedan en titt på de få anpassningar som gjorts med hjälp av Hooks och lite extra CSS.

Jump Link – Fullständig beskrivning

Med hjälp av ett Hook Element: Single Product Jump to Description har vi lagt till en enkel hopplänk för att ta oss från sammanfattningen till den fullständiga beskrivningen. Här är HTML-koden för detta. Den använder den anpassade loud-link-klassen på sin behållare för att tillhandahålla hover och pilen. Den använder också GP:s klass för jämn rullning, med detta alternativ aktivt i Anpassningsverktyg > Allmänt

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

Variationer av bakgrundsformat

För att lägga till lite bakgrundsfärg och lite utfyllnad för att få produktvariationer att sticka ut krävs denna CSS:

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

Sociala andelar

Det var enkelt att använda Jon Mathers GP Social Sharing-plugin för att visa länkar för sociala delningar på Woo. I inställningarna för GP Social Share har vi inaktiverat de inbyggda krokarna. När jag sedan skapade ett Hook Element: Woo Social Sharing lade jag helt enkelt till kortkoden och valde den dedikerade woocommerce_share hook från den omfattande listan över hooks.

Sidebar med en enda produkt

Stora bilder och skarpa sammanfattningar är en viktig del av designen. Detta innebar att jag var tvungen att offra lite utrymme utan att förlora den viktiga sidofältet. I stället flyttade jag sidofältet under sammanfattningen. Det tog några steg, men allt gick att uppnå med GP och Customizer. Så här går det till:

  • Ta bort sidofältet från standardpositionen
    Customizer > Layout > WooCommerce –> Single Product > Sidebar Layout: Content / No Sidebar
  • Lägg till sidofältet i en ny position
    Hook Element: Woo Single Product Sidebar en enkel funktion som gör att sidofältet kan kopplas in där jag ville ha det.
  • Därefter lite anpassad CSS för att se till att den placeras korrekt på skrivbordet.

Sidebar för en enda produkt 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 senaste versionen av Woo har de ändrat sättet att storleksanpassa bilderna. I Anpassningsverktyg > WooCommerce > Produktbilder har du nu bara två valmöjligheter.

  • Huvudbildens bredd
    Detta är den bild som används på den enskilda produkten. Den har ställts in till 800px för att matcha bredden på området för den enskilda produktbilden.
  • Bredd för miniatyrbilder
    Ställ in 400px, vilket är lagom för tvåspalterslayouten. Om du använder fler kolumner kan du vara benägen att minska detta värde. Men eftersom det inte finns något mobilalternativ låter jag det vara 400px så att det passar bra på mobila enheter i större storlek.

Det bästa med de nya Woo Product Images är att de automatiskt genererar storlekarna. Du behöver inte ändra miniatyrbilderna och de stör inte dina normala WP-storlekar för miniatyrbilder.

Bildrådgivning

Att få dina bilder att se bra ut i Woo kräver mycket arbete i förväg. Om du förväntar dig att Woo ska trolla åt dig kommer du att få problem. Börja med den här praktiska checklistan:

  • Bildförhållande
    Ett konsekvent bildförhållande gör att bilderna inte längre är feljusterade i rutnätet och att det inte finns några fula rörelser i produktgalleriet. Jag skulle helst hålla mig till fyrkantiga bilder. Om det innebär att du måste redigera dem i ditt favoritprogram och lägga till lite vitrymd, gör det.
  • Bildstorlekar
    Med Woo kan du ställa in miniatyrbilden och huvudbilden. Helst ska de vara lika delbara i din ursprungliga bild, t.ex.
    Original: 1600px , Huvudbild: 800px , Miniatyrbild: 400px.
    Vad du inte vill ha är bilder i ojämna storlekar där de blir suddiga när du ändrar storleken på grund av felande fraktioner av en pixel.
  • Ställa in bildstorlekar
    Ladda in några överdimensionerade bilder i dina dummyprodukter. Ställ in storleken på Customizer > WooCommerce > Product Image så att de fyller behållaren. Använd nu webbläsarinspektorn för att se i vilken storlek de visas i din butik och enskilda produkt. Se till att du gör detta när du är klar med layoutdesignen.
  • Mobiltelefonen först
    Tänk på att du förmodligen kommer att använda en enda kolumn för mobiler. Det kan betyda att den behöver en bredare bild än de som finns i skrivbordskolumnerna. Använd den här storleken för din miniatyrbild. Det är inget stort problem att de är större än vad du behöver på skrivbordet.
  • Zoom
    Produktgalleriet Zoom och Lightbox använder den största bilden som den kan få tag på. Se därför till att originalbilden är större än huvudbildens bredd som du har ställt in.
Click to rate this post!
[Total: 0 Average: 0]
Item added to cart.
0 items - 0,00