Widżet Zakładki produktów to jednostronicowy widżet szablonu. Służy do wyświetlania opisów produktów, recenzji produktów, a także zapewnia formularz do przesłania nowej recenzji.

Dowiedzmy się, jak korzystać z widżetów kart produktów w witrynie wooCommerce:

Krok 1: Włącz widżet zakładek produktów #

Aby włączyć widżet,

• Iść do ShopEngine > Widżety > Zakładki produktów
• Włączyć coś 
• Ratować zmiany

Notatka: Możesz także włączyć karty produktów z ustawieniem globalnym włącza wszystkie widżety ShopEngine.

Krok 2: Dodaj widżet zakładek produktów #

Zanim będziesz mógł dodać widżet, musisz najpierw utworzyć Szablon Pojedynczego Produktu. Sprawdź dokumentację dot jak utworzyć szablon pojedynczego produktu.

Dodać Zakładki produktów:

• Iść do ShopEngine > Szablony > Szablon pojedynczej strony
• Kliknij Edytuj za pomocą Elementora

• Szukaj Do Zakładki produktów w opcji wyszukiwania elementów
• Przeciągnij i upuść ton widget 
• Kliknij Aktualizacja aby zapisać zmiany.

Krok 3: Ustawienia widżetu zakładek produktów #

Możesz dostosować następujące ustawienia w sekcji Styl Patka:

Styl nawigacji: #

• Typografia: Tutaj możesz zmienić rozmiar czcionki dla opcji menu.
• Kolor menu: Zmień kolor menu.
• Kolor menu aktywnego/najechanego: Wybierz kolor dla trybu aktywnego/najechania wybranego menu.
• Kolor wskaźnika nawigacji: Wybierz kolor wskaźnika aktywnego menu.
• Obramowanie wskaźnika nawigacji (px): Wybierz górną i dolną wartość obramowania wskaźnika nawigacyjnego.
• Odstępy w menu (px): Podaj odstępy pomiędzy obydwoma menu w pikselach.
• Cień pudełka: Kliknij opcję edycji, aby wybrać kolor cienia, wartość poziomą, pionową, rozmycie i rozproszenie. Można także ustawić pozycję jako kontur lub wstawkę.
• Typ obramowania: możesz wybrać typ obramowania: pełny, kropkowany, podwójnie przerywany, rowkowany lub żaden.
• Typografia: Tutaj możesz zmienić rozmiar czcionki dla opcji menu.
• Kolor menu: Zmień kolor menu.
• Kolor menu aktywnego/najechanego: Wybierz kolor dla trybu aktywnego/najechania wybranego menu.
• Kolor wskaźnika nawigacji: Wybierz kolor wskaźnika aktywnego menu.
• Obramowanie wskaźnika nawigacji (px): Wybierz górną i dolną wartość obramowania wskaźnika nawigacyjnego.
• Odstępy w menu (px): Podaj odstępy pomiędzy obydwoma menu w pikselach.
• Cień pudełka: Kliknij opcję edycji, aby wybrać kolor cienia, wartość poziomą, pionową, rozmycie i rozproszenie. Można także ustawić pozycję jako kontur lub wstawkę.
• Typ obramowania: możesz wybrać typ obramowania: pełny, kropkowany, podwójnie przerywany, rowkowany lub żaden.

Zawartość zakładki: #

• Tytuł zawartości karty
  • Pokaż Tytuł: Włącz tę opcję, aby tytuł był wyświetlany w treści zakładki.
  • Kolor: Wybierz kolor tytułu obszaru karty.
  • Wyściółka: Dostosuj górne, lewe, prawe i dolne wypełnienie wokół tytułu.
• Zawijanie zawartości karty
  • Wypełnienie (px): Dostosuj górne, lewe, prawe i dolne wypełnienie zawartości karty.

Dodatkowe informacje: #

• Typografia: Tutaj możesz zmienić rozmiar czcionki, aby uzyskać dodatkowe informacje.
• Kolor separatora komórek tabeli: Wybierz kolor separatora komórek tabeli.
• Wypełnienie komórek tabeli:  Dostosuj dopełnienie górne, lewe, prawe i dolne.
• Etykieta:
  • Kolor: Wybierz kolor etykiety.
  • Tło: Wybierz kolor tła.
  • Szerokość: Możesz wybrać szerokość w pikselach lub procentach.

• Wartość:
  • Kolor: Wybierz kolor dla wartości
  • Tło: Wybierz kolor tła dla wartości

Średnia ocena: #

• Tytuł oceny:
  • Kolor: Zmień kolor tytułu oceny.
  • Typografia: Możesz zmienić rozmiar czcionki tytułu oceny.

• Tytuł oceny:
  • Kolor: Zmień kolor tytułu oceny.
  • Typografia: Możesz zmienić rozmiar czcionki tytułu oceny.

• Tytuł oceny:
  • Kolor: Zmień kolor tytułu oceny.
  • Typografia: Możesz zmienić rozmiar czcionki tytułu oceny.

Nagłówek recenzji: #

• Kolor: Zmień kolor średniej oceny.
• Typografia: Możesz zmienić rozmiar czcionki dla średniej oceny.
• Margines: Dostosuj marginesy górny, lewy, prawy i dolny.

Styl recenzji: #

• Kolor: Wybierz kolor ocen.
• Data, autor i opis Kolor: Tutaj możesz wybrać kolor daty, autora i opisu.
• Kolor separatora komentarzy: Wybierz kolor separatora komentarza.
• Typografia autora: Wybierz rozmiar czcionki dla autora.
• Typografia daty: Wybierz rozmiar czcionki dla daty.
• Opis Typografia: Tutaj możesz wybrać rozmiar czcionki opisu.
• Rozstaw pojedynczych recenzji (px): Wybierz wartość odstępu między recenzjami.

Formularz recenzji: #

• Etykieta wejściowa:
  • Kolor: wybierz kolor etykiety wejściowej.
  • Wymagany kolor: Swybierz kolor wymaganego symbolu.
  • Typografia: Wybierz rozmiar czcionki dla etykiety wejściowej
• Dane wejściowe formularza:
  • Kolor: Pick kolor dla danych wejściowych formularza.
  • Kolor ramki: Wybierz kolor obramowania.
  • Kolor obramowania ostrości: Wybierz kolor obramowania fokusu.
  • Typografia: Wybierz rozmiar czcionki dla danych wejściowych formularza.

• Odstępy między polami (px):  Wybierz, ile odstępu chcesz pomiędzy polem wejściowym.
• Wejścia Promień granicy (px): Wybierz wartość promienia obramowania dla pola wejściowego.
• Wypełnienie wejść (px): Dostosuj górne, lewe, prawe i dolne wypełnienie pola wejściowego.

Przycisk Prześlij: #

• Typografia przycisku: Tutaj możesz zmienić rodzinę czcionek, rozmiar czcionki, grubość czcionki, transformację i wysokość linii.
• Wyrównanie: Ustaw wyrównanie do lewej, prawej lub środkowej.
• Normalny/Najechany: Wybierz kolor i kolor tła zarówno dla widoku normalnego, jak i widoku aktywowanego.
• Typ obramowania: możesz wybrać typ obramowania: pełny, kropkowany, podwójnie przerywany, rowkowany lub żaden.
• Szerokość: Wybierz górną, lewą, prawą i dolną szerokość obramowania.
• Kolor: Wybierz kolor obramowania.
• Promień granicy: Wybierz górną, lewą, prawą i dolną wartość promienia obramowania.
• Wyściółka: Dostosuj dopełnienie górne, lewe, prawe i dolne.

Czcionka globalna: #

• Rodzina czcionek: Tutaj możesz zmienić rodzinę czcionek dla całego widgetu.

Kliknij na Aktualizacja przycisk do ratować wszystkie zmiany.

Oto podgląd wyglądu widżetu zakładki Produkt: