Merch Styling

WooCommerce

Tworzenie przekonujących witryn Woocommerce właśnie stało się jeszcze łatwiejsze dzięki GeneratePress Premium 1.8.

WooCommerce właśnie stało się jeszcze prostsze dzięki GeneratePress Premium 1.8 . Nie byłaby to oczywiście strona Flint Skin, gdyby nie było na niej odrobiny CSS i kilku funkcji niestandardowych. Jednak zdecydowana większość tego co widzisz jest stylizowana poprzez Customizer.

Strona sklepu Woo

Nowe funkcje GP Premium 1.8

  • Wyświetl podmenu mini wózka
    Nie ma już potrzeby stosowania wtyczki z tym pięknym min cart pokazanym po najechaniu na ikonę nav cart
  • Zawartość pozycji menu
    Wybór pomiędzy kwotą a liczbą pozycji. Ja wybrałem to drugie
  • Wyświetl panel koszyka przy dodawaniu do koszyka
    Zastąpienie standardowego powiadomienia o dodaniu do koszyka WooCommerce świetnym wysuwanym panelem.

Strona sklepu Produkt – dodaj do koszyka ( desktop )

Korzystanie z odrobiny CSS, aby stworzyć efekt show / hide na hover. Używa to trochę CSS, które można znaleźć w Customizerze > Additional CSS. Wygląda to tak:

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

Promieniste narożniki zostały dodane przy użyciu CSS przycisku, który jest omówiony w przewodniku stylizacji.

Odznaka sprzedaży

Aby dopełnić pozycjonowanie i zaokrąglone rogi koszyka użyłem tego CSS:

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

Paski boczne WooCommerce – wspólne

Strona wykorzystuje standardowy prawy sidebar, zapakowany w widżety WooCommerce. Jest oczywiście trochę CSS, aby dodać granice, dostosować padding i marginesy. Wygląda to tak:

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

Proszę zapoznać się z osobnymi uwagami dotyczącymi paska bocznego pojedynczego produktu

WooCommerce Pojedynczy produkt

Strona pojedynczego produktu doczekała się poważnych zmian w GP Premium 1.8. Oprócz elementów Hook i małych zaokrąglonych rogów na przyciskach, cała stylizacja jest kontrolowana z poziomu Customizera. Niesamowite. To właśnie dzięki tym nowym funkcjom oznacza, że w ogóle używa się bardzo mało Woo CSS. Więc najpierw sprawdź wszystkie nowe funkcje w Customizer > Layout > WooCommerce.

Nowe funkcje GP

  • Szerokość obszaru obrazuproduktu
    Ustaw na 65%, ponieważ ta strona powinna być w całości poświęcona obrazowi.
  • Wyświetlanie panelu dodawania do koszyka podczas przewijania
    Przesunięcie do widoku, gdy na stronie dodać do koszyka jest przewijany przeszłości utrzymując tę ważną funkcję zawsze w zasięgu wzroku
  • Przyciski wyświetlania ilości
    Nowe pola + / – qty naprawdę dodają odrobinę finezji

Następnie spójrz na kilka dostosowań wykonanych przy użyciu Hooks i trochę dodatkowego CSS.

Link do skoku – pełny opis

Używając elementu Hook: Single Product Jump to Description dodaliśmy prosty link skokowy, który przeniesie nas z podsumowania do pełnego opisu. Oto HTML do tego celu. Używa niestandardowej klasy loud-link na swoim kontenerze, aby zapewnić hover i strzałkę. Używa również klasy GP smooth-scroll, z tą opcją aktywną w Customizerze > Ogólne

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

Wariacje stylizacji tła

Dodanie odrobiny koloru tła i trochę paddingu, aby wyróżnić warianty produktów wymagało tego CSS:

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

Social Share

Używanie wtyczki Jon Mathers GP Social Sharing do wyświetlania linków społecznościowych na Woo było łatwe. W ramach ustawień GP Social Share wyłączyliśmy wbudowane haki. Następnie tworząc element Hook: Woo Social Sharing po prostu dodałem shortcode i z obszernej listy haków wybrałem dedykowany hak woocommerce_share.

Pasek boczny pojedynczego produktu

Duże zdjęcia i ostre podsumowanie to ważny element projektu. Oznaczało to, że musiałem poświęcić trochę miejsca bez utraty tego ważnego paska bocznego. Więc zamiast tego przeniosłem pasek boczny poniżej podsumowania. Zajęło to kilka kroków, ale wszystkie osiągalne w ramach GP i Customizera. Oto jak to się robi:

  • Usuń pasek boczny z pozycji domyślnej
    Customizer > Layout > WooCommerce –> Single Product > Sidebar Layout: Content / No Sidebar
  • Dodaj pasek boczny w nowej pozycji
    Hook Element: Woo Single Product Sidebar prosta funkcja do zaczepienia sidebara z powrotem tam gdzie chciałem.
  • Następnie trochę niestandardowego CSS, aby upewnić się, że pozycjonuje się poprawnie na Pulpicie

Pasek boczny pojedynczego produktu 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;
    }
}

Zdjęcia produktów Woocommerce

W najnowszej wersji Woo zmienili sposób, w jaki rozmiarujesz obrazy. W Customizerze > WooCommerce > Product Images masz teraz tylko dwie możliwości wyboru.

  • Szerokość obrazu głównego
    To jest obrazek użyty na Produkcie pojedynczym. Została ona ustawiona na 800px, aby dopasować szerokość obszaru pojedynczego obrazu produktu.
  • Szerokość miniatury
    Ustaw na 400px, co jest w sam raz dla układu 2 kolumn. Możesz być skłonny do zmniejszenia tego, jeśli używasz więcej kolumn. Ale ponieważ nie ma opcji mobilnej, zostawiam to w 400px, aby ładnie pasowało na te plusowe urządzenia mobilne.

Wspaniałą częścią nowych obrazów produktów Woo jest to, że automatycznie generują one rozmiary. Nie trzeba renegować miniatur i nie kolidują one z twoimi normalnymi rozmiarami miniatur WP.

Porady dotyczące obrazów

Aby Twoje zdjęcia wyglądały świetnie w Woo, potrzeba dużo pracy z góry. Jeśli oczekujesz, że Woo zrobi za ciebie magię to będziesz miał kłopoty. Zacznij od tej poręcznej listy kontrolnej:

  • Współczynnik kształtu
    Spójny współczynnik proporcji wyeliminuje nieprawidłowe rozmieszczenie obrazów w siatce lub nieestetyczny ruch w galerii produktów. Najlepiej trzymałbym się kwadratowych obrazów. Jeśli oznacza to edycję ich w ulubionym edytorze zdjęć i dodanie trochę białej przestrzeni, to zrób to.
  • Rozmiary obrazu
    Woo pozwala na ustawienie miniatury i obrazu głównego. Najlepiej, aby były one równo podzielone na oryginalny obraz np.
    Oryginał: 1600px , Główny: 800px , Miniatura: 400px.
    To, czego nie chcesz, to obrazy o dziwnych rozmiarach, które stają się rozmyte przy zmianie rozmiaru z powodu zabłąkanych ułamków piksela.
  • Ustawianie rozmiarów zdjęć
    Załaduj kilka ponadwymiarowych obrazów w swoich atrapach produktów. Ustaw Customizer > WooCommerce > Rozmiary obrazów produktów, aby wypełniały pojemnik. Teraz użyj inspektora przeglądarki, aby zobaczyć rozmiar, w jakim są wyświetlane w Twoim Sklepie i pojedynczym produkcie. Upewnij się, że zrobiłeś to po zakończeniu projektowania układu.
  • Mobile First
    Weź pod uwagę, że twój prawdopodobnie użyje pojedynczej kolumny dla mobilnych. Co może oznaczać, że potrzebuje szerszego obrazu niż te w kolumnach pulpitu. Użyj tego dla rozmiaru miniaturki. Nie jest wielkim problemem, że są one większe niż potrzebujesz na biurku.
  • Zoom
    Zoom i Lightbox Galerii Produktów użyje największego obrazu, jaki jest w stanie uzyskać. Upewnij się więc, że oryginalny obraz jest większy niż ustawiona szerokość obrazu głównego.
Click to rate this post!
[Total: 0 Average: 0]
Item added to cart.
0 items - 0,00