Warsztat #3: Wykorzystaj pełen potencjał Full Site Editing w WordPress i WooCommerce

1. Wstęp do Full Site Editing w WordPress i WooCommerce

Full Site Editing na dobre wkroczył w świat WordPressa oferując duże możliwości tworzenia i edycji szablonów. Na tym warsztacie dowiesz się jak w płynny sposób wykorzystać gotowe wzorce przy edycji szablonu kategorii produktów i produktów. Pokażę Ci też parę sztuczek, dzięki który przyda Ci się w edycji opisów produktów.

Chcę dotrzeć do osób, które chcą wykorzystać pełną edycję stron z użyciem FSE oraz WooCommerce. Chce by po szkoleniu każdy potrafił:

• utworzyć szablon strony kategorii i potrafić zmienić kolejność elementów na stronach kategorii produktów (np. poprzez dodanie krótkiego opisu kategorii produktów na górze strony, a dłuższy opis na dole strony),
• utworzyć dwa szablony dla stron produktowych, dzięki którym będzie potrafił do różnych typów produktów przyporządkować inny szablon,
• włączyć edytor Gutenberga dla produktów dzięki czemu edycja opisów będzie dla nich po prostu łatwiejsza
• jeżeli czasu starczy (a będę starać się mówić wolniej ) to przeszlibysmy do edycji koszyka który też można edytować z poziomu FSE

1.1 Dlaczego warto iść w Full Site Editing?

• Pozwala zachować spójność witryny,
• Pełną edytowalność każdego szablonu,
• Jest stosunkowo prosty w obsłudze i późniejszej edycji,
• Mała ilość kodu CSS, którą bardzo łatwo zoptymalizować.
• To po prostu przyszłość WordPressa.

1.2 Czego nienawidzę w FSE i Gutenbergu?

• Brak obsługi responsywności w 2024 roku (według mojej opinii powinna być to pierwsza rzecz to-do)
• Obsługi menu i nawigacji

2. Co dziś będziemy robić?

Zajmiemy się tworzeniem sklepu internetowego z odzieżą męską.

• Szablon dla kategorii zgodny pod SEO,
• Szablon dla strony produktowej zgodny pod SEO,
• Optymalizacja pod kątem sprzedaży

Na czym nam zależy?

• Maksymalnym pominięciu kodowania,
• Korzystaniu tylko z darmowych rozwiązań (na potrzeby warsztatu, by każdy mógł powtórzyć jego efekty)
• W pełni edytowalnym szablonie

2.1 Inspiracje

• Giacomo Conti
  https://giacomo.pl/garnitury.html
  • Podział na krótki opis i długi opis pod SEO
  • Paginacja na górze strony (pod wersje mobilne)
  • Dostęp do artykułów z inspiracjami pod listingiem
• Bytom
  https://bytom.com.pl/c-garnitury
  • Etykiety produktów „Nowość”, „Promocja”, Kwota rabatu etc.
  • Okruszki tzw. breadcrumbs
  • Nazwa produktu jest pod SEO, a nie nazwą modelu – więc… ogarniemy!
• Recman
  https://www.recman.pl/odziez/garnitury.html
  https://www.recman.pl/garnitur-tanwin-318-granatowy-slim-fit.html
  • Ciekawy szablon strony produktowej w WooCommerce
  • Widoczny producent na stronie kategorii i stronie produktowej lub np. kategoria
  • Ciekawy blok z galerią

2.2 Zestaw wtyczek, których potrzebujemy do projektu

• WooCommerce
  Oprogramowanie do obsługi sklepów internetowych
• Gutenberg
  Umożliwia dostęp do funkcjonalności, które są testowane dla Gutenberga
• Rank Math SEO
  Tak by ewentualnie nie duplikować dodatkowych pól
• Advanced Custom Fields (w wersji darmowej wystarczy!)
  Dzięki ACF dodamy bez problemu dodatkowe pole do WordPress
• Meta Field Block
  Wykorzystamy do wdrażania dynamicznej treści w WordPress – czyli do odczytania np. dodatkowego opisu dla SEO
• Advanced Woo Labels – Product Labels for WooCommerce
  Wzbogaćmy trochę stronę o etykiety dla produktów
• WPCode – Insert Headers and Footers + Custom Code Snippets – menedżer kodu do WordPressa
  Do dorzucania kodu PHP*
• Biblioteka z patternami do WordPressa
  https://wordpress.org/patterns/?curation=community

* Preferuję dodanie motywu potomnego dla twentytwentythree i dodawanie kodu poprzez functions.php. Na potrzeby warsztatu – będzie to wystarczające.

2.3 Materiały do wykorzystania na warsztacie

Logo

Plik CSV z produktami i kategoriami

Pobierz plik CSV z produktami domyślnymi

3. Do dzieła!

3.1 Strona kategorii

Lista zadań:

• Dodać dodatkowe pole (wysiwyg) w ACF dla długiego opisu SEO,
• Wygeneruj krótki opis na 250 znaków oraz 2500 znaków dla kategorii produktów „Garnitury”,
• Dodaj za pomocą „Advanced Woo Labels” etykietę dla kolekcji Wedding 2026,
• Dodaj za pomocą „Advanced Woo Labels” wartość procentową rabatu,
• Ukryj etykietę standardową WooCommerce o nazwie „PROMOCJA!”

add_filter('woocommerce_sale_flash', 'lw_hide_sale_flash');

function lw_hide_sale_flash() {
      return false;
}

• Przejdź do edycji szablonu kategorii produktu
  • Uruchom wyobraźnię i stwórz na samej górze strony za pomocą wzorców lub https://wordpress.org/patterns/?curation=community „header” z tytułem produktu oraz krótkim opisem SEO (opis terminu)
  • Dodaj na sam koniec strony długi opis SEO. Wykorzystaj do tego „Meta Field Block”

• Dostosuj kafelek produktowy. Spróbuj dodać producenta, kategorię, cenę – wszystkie konieczne elementy.

3.2 Strona produktowa

• Uruchom edytor Gutenberga dla produktów w WooCommerce

function lw_activate_gutenberg_product( $can_edit, $post_type ) {
        if ( $post_type == 'product' ) {
            $can_edit = true;
        }
        return $can_edit;
    }

add_filter( 'use_block_editor_for_post_type', 'lw_activate_gutenberg_product', 10, 2 );

• Dodaj dodatkowe pole na nazwę modelu w ACF dla produktu,
• Spróbuj uzyskać podobny efekt strony jak na przykładzie tutaj https://www.recman.pl/garnitur-tanwin-318-granatowy-slim-fit.html
• Dodaj do produktu
  • Blok z 4 zdjęciami,
  • Podział opisu produktu na kilka sekcji,
• Dodaj szablon dla produktów w WooCommerce
  • Zaktualizuj szablon,
  • Dodaj nazwę modelu dla garnituru,
  • Wrzuć sekcję promującą szycie garniturów na miarę

Jeżeli dotarłeś do tego miejsca to super! Jak czas pozwoli zajmiemy się edycją szablonu koszyka! 😀