WooCommerce shortcodes pozwala wyświetlać informacje ze sklepu w nowy i ekscytujący sposób. WooCommerce jest fabrycznie zbudowany z shortcodes i możesz zainstalować wtyczki, aby dodać więcej. Niezależnie od tego, czy chcesz wyświetlić listę produktów w tabeli, wyświetlić koszyk w dowolnym miejscu na swojej stronie, czy coś innego – trafiłeś we właściwe miejsce!
prawdopodobnie już natknąłeś się na skróty, niezależnie od tego, czy jesteś nowy w WordPressie, czy używasz go od jakiegoś czasu. Shortcodes to, jak sama nazwa wskazuje, krótkie fragmenty kodu, które pełnią jakąś funkcję. Na przykład krótkie kody WooCommerce pozwalają dodawać schludne funkcje związane z WooCommerce do stron, postów, pasków bocznych i widgetów w witrynie.
Jeśli szukasz sposobu na uproszczenie zakupów, możesz to zrobić za pomocą shortcodes WooCommerce. Mogą pomóc Ci poprawić przepływ kupujących użytkowników i zoptymalizować twój sklep internetowy pod kątem konwersji.
możesz na przykład użyć skrótów WooCommerce, aby:
- wyświetlić listę najlepiej ocenianych produktów na stronie głównej.
- zaprezentuj powiązane produkty, gdy klient wyrazi zainteresowanie produktem.
- Wyróżnij wyróżnione produkty w blokach Gutenberga, paskach bocznych, innych widgetyzowanych obszarach.
Mając to na uwadze, w tym kompletnym przewodniku wyjaśnimy, w jaki sposób możesz używać skrótów WooCommerce, aby zapewnić lepsze wrażenia użytkownika i zwiększyć zyski. Po drodze wyjaśnimy również, kiedy (i dlaczego) powinieneś używać każdego shortcode. Przyjrzymy się skróconym kodom dostarczanym z samym WooCommerce i skróconym kodom, które możesz dodać za pomocą innych wtyczek.
jak używać skrótów WooCommerce
skróty wyglądają i brzmią trochę technicznie, ale są zaprojektowane dla każdego. Nie potrzebujesz żadnych umiejętności kodowania.
Po prostu wstaw shortcode do dowolnego edytora tekstu w WordPress lub do bloku”Shortcode”, jeśli używasz Gutenberga lub programu do tworzenia stron, takiego jak Elementor lub Visual Composer:
możesz łączyć skróty i wyświetlać wiele skrótów na jednej stronie. Na przykład możesz połączyć kod skrócony śledzenia zamówień z kodem skróconym konta użytkownika. Wszystko, co musisz zrobić, to wstawić oba skróty na tej samej stronie. Wyglądałoby to mniej więcej tak:
lista produktów WooCommerce skróty
istnieją również skróty do wyświetlania produktów na różne sposoby w twoim sklepie. Zapewniają one dodatkową elastyczność, dzięki czemu nie utkniesz z ograniczonymi widokami na stronach sklepu i kategorii. Zamiast tego możesz użyć skrótów WooCommerce, aby wyświetlić listę jednego lub więcej produktów dosłownie w dowolnym miejscu w witrynie WordPress – w widoku listy siatki lub tabeli.
WooCommerce products shortcode
WooCommerce ma shortcode, który pozwala wyświetlać określone produkty w układzie siatki:
. Możesz również dodać do niego inne parametry (takie jak orderby i kolumny), aby dostosować wygląd interfejsu.
Możesz wybrać liczbę produktów do wyświetlenia w wierszu. Na przykład, jeśli chcesz wyświetlić sześć produktów w trzech kolumnach uporządkowanych według daty w kolejności rosnącej, użyjesz krótkiego kodu: . Podobnie, w przypadku wyświetlania produktów w kolejności malejącej, po prostu zastąpisz ASC DESC.
WooCommerce quick view shortcode
shortcode działa bezproblemowo z wtyczką WooCommerce Quick View Pro. Dodaje to przyciski szybkiego podglądu do listy produktów, aby umożliwić ludziom dokonanie zakupu bez opuszczania bieżącej strony:
wszystko, co musisz zrobić, to zainstalować wtyczkę WooCommerce Quick View Pro na swojej stronie WordPress i automatycznie doda przyciski szybkiego wyświetlania do interfejsu. W ten sposób klienci mogą zobaczyć atrybuty i odmiany produktów oraz dodawać produkty do koszyka bez przechodzenia do pojedynczej strony produktu.
przeczytaj nasz kompletny przewodnik do krótkiego kodu WooCommerce Quick View Pro.
shortcode tabeli produktów WooCommerce
wbudowany shortcode produktów WooCommerce jest dość elastyczny, pozwala wyświetlać je tylko w układzie siatki. Nie jest to idealne rozwiązanie dla sklepów, które chcą wyświetlać więcej produktów na stronie, na przykład jeśli tworzysz szybki jednostronicowy formularz zamówienia lub hurtownię. W takim przypadku może być lepiej z shortcode tabeli produktów.
chociaż sam WooCommerce nie ma skrótu tabeli produktów, możesz go łatwo dodać za pomocą wtyczki WooCommerce Product Table. Podstawowy shortcode to I możesz to skonfigurować za pomocą ponad 50 opcji shortcode.
Zobacz pełną listę opcji skrótów, które otrzymasz w tabeli produktów WooCommerce.
WooCommerce Dodaj do koszyka shortcode
WooCommerce jest wyposażony we wbudowany shortcode, który pozwala wstawić przycisk Dodaj do koszyka dla określonego produktu w dowolnym miejscu. Po prostu dodaj ID i / lub SKU produktu, dla którego chcesz wyświetlić przycisk Dodaj do koszyka:
Jeśli chcesz podać cenę produktu, użyj:
w przypadku prostych produktów wyświetli się przycisk Dodaj do koszyka.
dla zmiennych produktów wyświetli się przycisk”Wybierz opcje”:
osobiście nie podoba mi się to, ponieważ klienci muszą odwiedzić stronę pojedynczego produktu, aby wybrać swoje odmiany. Lepiej jest użyć tabeli produktów WooCommerce, aby wyświetlić listę jednego lub więcej zmiennych produktów w tabeli, wraz z rozwijanymi wariacjami:
w ten sposób klienci mogą wybierać opcje i dodawać do koszyka ze strony, na której aktualnie się znajdują.
Kategoria produktu shortcode
Kategoria produktu shortcode zawiera listę Produktów z określonej kategorii w standardowym układzie siatki.
jest to skrót do niego:
Jeśli nie podoba Ci się układ siatki lub chcesz mieć większą kontrolę nad wyświetlanymi informacjami każdy produkt, a następnie można użyć shortcode tabeli produktów WooCommerce zamiast. Wtyczka tabeli produktów WooCommerce zawiera opcję skrótu kategorii, której możesz użyć do wyświetlenia listy produktów tylko z określonych kategorii:
w przeciwieństwie do wbudowanego kodu shortcode, który jest dostarczany z WooCommerce, możesz wybrać kolumny informacji do wyświetlenia na temat każdego produktu i pozwolić klientom wybrać odmiany i wybrać ilości bezpośrednio z tabeli produktów. To sprawia, że zakupy są znacznie szybsze i zwiększa współczynnik konwersji.
kategorie produktów WooCommerce shortcode
kategorie produktów shortcodes zawierają listę kategorii produktów, zamiast produktów w nich zawartych. Na przykład:
wyświetli 4 dowolne kategorie WooCommerce, uporządkowane według nazwy.
przyjrzyjmy się niektórym atrybutom i skróconym kodom, które dotyczą kategorii produktów:
- limit kontroluje liczbę wyświetlanych kategorii.
- orderby kontroluje kolejność sortowania; „nazwa” i „data” są poprawnymi opcjami.
- zamówienie oznacza kolejność kategorii produktów, tj. „ASC” lub „DESC”.
- kolumny pokazują liczbę kolumn, w których są ułożone kategorie.
- hide_empty służy do ukrywania kategorii produktów bez produktów.
- parent pozwala Ci prezentować tylko najlepsze kategorie produktów.
- IDS reprezentują, że ID kategorii można ustawić zgodnie z tylko określonymi wynikami wyjściowymi.
Najnowsze produkty
krótki kod produktów WooCommerce wyświetla produkty, które ostatnio dodałeś do swojego sklepu internetowego.
jest to skrót dla ostatnich produktów:
jednak, jeśli chcesz wyświetlić rzeczywistą datę dodania produktu do twojego sklepu internetowego, lub jeśli chcesz więcej kontroli, możesz zamiast tego użyć wtyczki tabeli produktów WooCommerce.
Po prostu zamów tabelę produktów według daty w porządku malejącym i użyj numeru limitu produktu, aby kontrolować, ile produktów ma zawierać:
Jeśli w tabeli znajduje się kolumna z datą, klienci mogą łatwo zobaczyć, które produkty zostały ostatnio dodane do sklepu.
Polecane produkty
shortcode polecanych produktów dla WooCommerce pozwala wyświetlać Polecane produkty oddzielnie od reszty sklepu. Użyj go, aby wyświetlić listę polecanych produktów w dowolnym miejscu, na przykład w postach na blogu lub na innych stronach.
Polecane produkty to produkty WooCommerce, które mają niebieską ikonę gwiazdy obok nich na stronie Wszystkich Produktów:
jest to skrót do prezentacji polecanych produktów: . Wyjście powinno wyglądać mniej więcej tak:
ponownie, jeśli nie podoba Ci się siatka obrazów, możesz wymienić Polecane produkty za pomocą skrótu wtyczki WooCommerce Product Table:
lista polecanych produktów w układzie tabeli, z dowolnymi kolumnami informacji wybranymi na stronie ustawienia wtyczki.
WooCommerce sprzedaż produktów shortcode
sprzedaż produktów shortcode pozwala zaprezentować produkty obecnie w sprzedaży. Możesz je łatwo wyświetlić za pomocą krótkiego kodu:
bestsellerowe produkty shortcode
użyj poniższego krótkiego kodu WooCommerce, aby wyświetlić najlepiej sprzedające się produkty w sieci lista najlepiej sprzedających się produktów przy użyciu skrótów WooCommerce
przyciski szybkiego podglądu pojawiają się na interfejsie, jeśli masz zainstalowaną wtyczkę WooCommerce Quick View Pro na swojej stronie WordPress.
Jeśli wolisz układ tabeli, Możesz również wyświetlić listę bestsellerów lub popularnych produktów za pomocą krótkiego kodu tabeli produktów WooCommerce:
przeczytaj nasz pełny samouczek na temat listy popularnych produktów za pomocą tabeli produktów WooCommerce.
Najwyżej oceniane produkty
możesz użyć najlepiej ocenianych produktów shortcode wraz z wbudowaną funkcją recenzji i ocen WooCommerce, aby zaprezentować swoje najlepiej oceniane produkty. Użyj krótkiego kodu:
Możesz również wyświetlić listę najwyżej ocenianych produktów w widoku tabeli za pomocą tabeli produktów WooCommerce shortcode:
powiązane produkty shortcode
powiązane produkty to lista produktów podobnych do produktu, który przegląda klient. Pojawią się one bezpośrednio pod głównym produktem na stronie pojedynczego produktu, ale możesz użyć skrótu produktów powiązanych WooCommerce, aby wyświetlić listę powiązanych produktów w innym miejscu.
użyj krótkiego kodu, aby wyświetlić powiązane produkty w dowolnym miejscu w witrynie WordPress.
Dodaj do Koszyka przycisk shortcode
WooCommerce shortcode pozwala pokazać cenę i przycisk Dodaj do koszyka dla pojedynczego produktu na podstawie jego identyfikatora. Oto jak to wygląda na front-end:
możesz rozważyć dodanie tego do widgetyzowanego obszaru w swoim sklepie internetowym lub poście na blogu.
ten skrót działa z wtyczką WooCommerce Quick View Pro. Gdy używasz obu wtyczek razem, obok przycisków Dodaj do koszyka pojawią się przyciski szybkiego podglądu. Jest to idealne rozwiązanie, jeśli wyświetlasz zmienne produkty lub chcesz, aby klienci mogli zmienić ilość przed dodaniem do koszyka. Klienci mogą przeglądać dodatkowe informacje o produkcie, wybierać ilości i odmiany oraz dodawać do koszyka z szybkiego podglądu lightbox. To utrzymuje je na oryginalnej stronie zamiast przenoszenia ich na osobną stronę produktu.
jeśli wolisz wyświetlać przyciski Dodaj do koszyka dla wielu produktów lub jeśli nie podoba Ci się domyślny format z dużym obrazem, możesz zamiast tego użyć tabeli produktów WooCommerce.
Wybierz kolumny, które chcesz uwzględnić w tabeli produktów (upewnij się, że dodałeś kolumnę Dodaj do koszyka!) i użyj skrótu, aby wstawić go w dowolne miejsce. Użyj opcji Dołącz, aby wybrać, które produkty mają zostać dołączone, na przykład:
Czy mogę pokazać shortcodes w shortcodes?
czasami możesz chcieć zagnieżdżać skróty – na przykład, aby dodać krótki kod odtwarzacza audio WordPress, aby dodać wbudowany odtwarzacz muzyki do listy produktów.
zwykle nie można zagnieżdżać skrótów WooCommerce. Można to jednak osiągnąć za pomocą skrótu w tabeli produktów WooCommerce do wyświetlania produktów i dodawania innych skrótów do pól wyświetlanych w tabeli produktów.
na przykład, załóżmy, że chcesz wymienić 8 produktów, z wbudowanym odtwarzaczem audio dla każdego z nich. Możesz dodać odtwarzacz audio do krótkich lub długich pól opisu produktu i wyświetlić je jako kolumny w tabeli. Następnie użyj krótkiego kodu tabeli produktów WooCommerce, aby wyświetlić listę tych konkretnych produktów, w tym krótką lub długą kolumnę opisu zawierającą odtwarzacze audio.
aby skróty z innych wtyczek działały w tabeli produktów, upewnij się, że włączyłeś opcję „skróty” na stronie ustawień tabeli produktów WooCommerce:
skróty stron WooCommerce
zacznijmy od przyjrzenia się niektórym z najczęstszych skrótów stron WooCommerce. Te automatycznie tworzą całe strony, takie jak koszyk lub kasa.
koszyk na zakupy WooCommerce
koszyk na zakupy WooCommerce shortcode – – pozwala wyświetlić koszyk klienta na front-end Twojej witryny WordPress. Możesz dodać go do stron lub postów WordPress lub wyświetlić go w widgetyzowanych obszarach (takich jak pasek boczny).
To będzie wyglądać mniej więcej tak na front-end:
Po zainstalowaniu i aktywacji WooCommerce na swojej stronie WordPress, automatycznie tworzy dla Ciebie kilka stron – w tym Stronę koszyka, która używa tego krótkiego kodu. Możesz użyć krótkiego kodu, aby dodać koszyk do dodatkowych części witryny.
strona kasy WooCommerce
możesz użyć krótkiego kodu kasy WooCommerce – – aby wygenerować pełną stronę kasy na swojej stronie e-commerce. Ta strona jest również automatycznie tworzona dla Ciebie podczas instalacji WooCommerce. Możesz również użyć krótkiego kodu, aby wstawić zamówienie w innym miejscu (na przykład pod tabelą produktów, aby utworzyć jednostronicowe zakupy).
krótki kod kasy WooCommerce zawiera dane rozliczeniowe, szczegóły zamówienia i opcję wysyłki na inny adres.
śledzenie zamówień WooCommerce
WooCommerce pozwala właścicielom sklepów utworzyć stronę śledzenia zamówień za pomocą krótkiego kodu. Chociaż ta strona nie jest dostarczana z WooCommerce po wyjęciu z pudełka, możesz po prostu utworzyć nową stronę i wstawić krótki kod w edytorze tekstu, aby utworzyć własny. Powinno to wyglądać mniej więcej tak:
Strona konta użytkownika WooCommerce
WooCommerce automatycznie tworzy stronę Moje Konto podczas pierwszej instalacji na swojej stronie. Odbywa się to za pomocą skrótu . Możesz użyć krótkiego kodu, aby wstawić obszar konta w dodatkowych lokalizacjach w całej witrynie.
Skrót Moje Konto służy jako formularz logowania i rejestracji dla wylogowanych użytkowników. W rezultacie możesz również użyć tego jako krótkiego kodu logowania WooCommerce.
Dodaj skróty WooCommerce Łatwiej Za pomocą przycisku paska narzędzi
chociaż możesz znaleźć wszystkie rodzaje wtyczek do krótkiego kodu WooCommerce w Internecie, zalecamy korzystanie z bezpłatnej wtyczki WooCommerce shortcodes przez WooThemes. Po zainstalowaniu i aktywacji ta wtyczka dodaje przycisk rozwijany TinyMCE do edytora tekstu WordPress, aby zapewnić łatwy dostęp do wszystkich wbudowanych skrótów WooCommerce. Oszczędza to konieczności kopiowania i wklejania skrótów.
Po aktywacji wtyczki Shortcodes WooCommerce zobaczysz nowy przycisk shortcode w edytorze tekstu WordPress. Po kliknięciu tego przycisku pojawi się lista rozwijana zawierająca wszystkie standardowe skróty WooCommerce:
Rozwiązywanie problemów z krótkimi kodami WooCommerce
czasami wklejasz poprawny kod WooCommerce shortcode do edytora tekstu, ale nie wyświetla poprawnego wyniku. W takim przypadku upewnij się, że nie osadzono przypadkowo skróconego kodu w znacznikach <pre>. Możesz usunąć te znaczniki, przechodząc do edytora tekstu HTML.
Best WooCommerce shortcodes for Product Table
zanim skończymy, oto szybki podział najbardziej przydatnych wbudowanych skrótów WooCommerce, których można używać z wtyczką WooCommerce Product Table i wtyczkami WooCommerce Quick View Pro:
| Plugin Required | Shortcode name | WooCommerce shortcode | Description | ||
| None | Shopping Cart | Displays a shopping cart on the front-end of the website | |||
| None | Checkout Page | Displays a complete checkout page. | |||
| None | Order Tracking | Displays an order tracking form for your e-commerce website. | |||
| brak | Strona konta użytkownika | wyświetla stronę „Moje Konto” dla użytkowników | |||
| tabela produktów WooCommerce | przycisk ceny produktu/koszyka | dodaje przycisk ceny produktu (lub Dodaj do koszyka) do tabeli produktów. | |||
| WooCommerce Quick View Pro | wiele produktów Shortcode | wyświetla wiele (wybranych) produktów na stronie lub poście za pomocą przycisków szybkiego podglądu. | |||
| WooCommerce Quick View Pro | Product Category | wyświetla określone kategorie produktów na stronie internetowej. | |||
| WooCommerce Quick View Pro | Product Category by Slug | wyświetla produkty z określonej kategorii produktu wraz z przyciskami quick view. | |||
| WooCommerce Quick View Pro | Najnowsze produkty | Wyświetla listę najnowszych produktów dodanych do sklepu internetowego wraz z przyciskami quick view. | |||
| WooCommerce Quick View Pro | Polecane produkty | Wyświetla listę polecanych produktów z przyciskami quick view. | |||
| WooCommerce Quick View Pro | Sale Product | Wyświetla listę wszystkich produktów w sprzedaży za pomocą przycisków quick view. | |||
| WooCommerce Quick View Pro | najlepiej sprzedający się produkt | Wyświetla listę najlepiej sprzedających się produktów z przyciskami quick view. | |||
| WooCommerce Quick View Pro | Najwyżej oceniane produkty | Wyświetla listę najlepiej ocenianych produktów za pomocą przycisków quick view. | |||
| WooCommerce Quick View Pro | powiązany produkt | Wyświetla listę powiązanych produktów z przyciskami szybkiego podglądu na stronach pojedynczych produktów. | |||
| WooCommerce Quick View Pro | wyświetla przycisk”Dodaj do koszyka”na pojedynczym produkcie, używając ID Produktu |
doładowanie twój sklep WooCommerce z shortcodes!
WooCommerce shortcodes to małe fragmenty kodu, które pozwalają dodać schludne funkcje do twojego sklepu internetowego. Możesz dodać je do stron sklepu, postów lub widgetyzowanych obszarów w witrynie (takich jak pasek boczny). Niektóre skróty WooCommerce obsługują również parametry, których można użyć do dostosowania wyjścia.
jednak nie wszystkie skróty WooCommerce zapewniają dobre wrażenia użytkownika. Zamiast wklejać je tak, jak są, możesz rozważyć użycie ich wraz z wtyczką WooCommerce Product Table lub wtyczką WooCommerce Quick View Pro.
na przykład jest to jedyny sposób, aby umożliwić klientom wybór ilości i odmian poza stroną produktu, a także pozwala pokazać dodatkowe informacje o każdym produkcie i kontrolować Rozmiar obrazu. Jeśli chcesz dodatkowej elastyczności, możesz zainstalować tabelę produktów WooCommerce i zacząć eksperymentować z opcjami 50+ shortcode. Zapewni to bardziej schludny i zorganizowany wygląd interfejsu, zapewniając jednocześnie, że witryna poprawia wrażenia zakupowe klienta.
podsumowując, skróty WooCommerce pozwalają ulepszyć podróż kupującego, zobaczyć więcej produktów naraz i ułatwiają klientom szybką nawigację po procesie realizacji zakupu. Możesz również wypróbować inne wtyczki WooCommerce shortcode (takie jak WooCommerce Coupon Shortcodes), które pozwalają wykorzystać zaawansowane funkcje, takie jak dodawanie kodów kuponów do sklepu internetowego.