Wyświetlaj produkty w Elementorze za pomocą tabeli produktów WooCommerce

W tym poście pokażemy, jak połączyć Elementor i tabelę produktów WC, aby stworzyć bardziej dostosowaną witrynę WordPress, jednocześnie zwiększając sprzedaż Twojego sklepu WooCommerce.

WordPress upraszcza proces tworzenia strony internetowej i szybkiego jej uruchamiania. WooCommerce to plugin WordPress, która pozwala zamienić dowolną witrynę WordPress w w pełni działający sklep internetowy. Istnieje ryzyko, że stworzysz witrynę naśladowczą, jeśli jednak będziesz kontynuować korzystanie z ich domyślnych opcji i funkcji, może to nie być odpowiednie dla Twoich potrzeb biznesowych. Bardzo ważne jest, aby znaleźć najlepsze narzędzia do projektowania i dostosowywania witryny, dopóki nie będzie taka, jak chcesz.

Wiele WordPress i woocommerce plugin s są dostępne w celu zwiększenia funkcjonalności Twojego sklepu - Elementor dla ex amp le, jest najprostszym narzędziem do dostosowywania stronę produktu woocommerce. Chociaż jest to jedna z jego najważniejszych zalet, ma też pewne istotne wady. Dla ex amp le, kiedy łączą WordPress plugin s od różnych autorów, pojawia się szansa napotkania błędów kompatybilności i innych powikłań; To nie jest przypadek, gdy za pomocą Tabela produktów woocommerce i Elementor plugin s dla stron internetowych WordPress. Korzystając z jednej z tych plugin , będziesz mieć większą kontrolę nad wyglądem i funkcjonalnością swojej witryny , a można ich używać w połączeniu, aby uzyskać jeszcze lepsze wyniki.

Szybki przegląd tabeli produktów WooCommerce i ram Elementor

Jak wspomniano wcześniej, dostępny jest szeroki wybór plugin WordPress, które pomogą Ci w tworzeniu lepszej witryny WordPress, która jest dostosowana do Twoich konkretnych wymagań. Niektóre plugin są przeznaczone do użytku na dużą skalę, podczas gdy inne mają na celu dodanie określonego aspektu lub funkcji.

Elementor jest ex amp le pierwszego typu aplikacji:

Nasza plugin do tworzenia stron oferuje zupełnie nowy interfejs do tworzenia stron internetowych i tworzenia witryny WordPress. Zyskujesz dużą kontrolę nad sposobem tworzenia witryny, wybierając i dostosowując obszerną bibliotekę widżetów, bloków i układów.

Chociaż tabela produktów WooCommerce jest bardziej ogólnym rozwiązaniem, jest również bardziej ukierunkowana:

Ta plugin umożliwia tworzenie dynamicznych, w pełni konfigurowalnych tabel, które zawierają listę Twoich produktów i usług WooCommerce. Jednak ze względu na ich interakcję z WooCommerce, tabele te szczególnie dobrze nadają się do wyświetlania produktów i usług w przyjazny dla użytkownika i atrakcyjny wizualnie sposób dla kupujących online. plugin Posts Table Pro współdziała w równym stopniu z Elementorem i wyświetla dowolny typ treści WordPress w tabeli zamiast po prostu produktów WooCommerce (jeśli chcesz wyświetlać coś poza produktami – takimi jak posty, strony lub dokumenty), można zamiast tego użyć.

W połączeniu ze sobą, Elementor i Tabela produktów WooCommerce zapewniają znacznie zróżnicowane możliwości. Możesz je wykorzystać do uzyskania bardzo znaczących efektów, które pomogą zwiększyć liczbę sprzedaży w Twoim sklepie WooCommerce.

Teraz czas zabrać się do pracy. W kolejnych rozdziałach przyjrzymy się pewnym świecie rzeczywistym ex amp les, w jaki sposób można wykorzystać tabeli produktów woocommerce i Elementor tworzyć efekty podobne do tych przedstawionych powyżej.

Jeśli chodzi o połączenie tych dwóch plugin , możliwości są nieograniczone — a to tylko niektóre z możliwości. Przy odrobinie prób i błędów możesz zestawić różne strony, stosując to samo podstawowe podejście, które zademonstrujemy.

Przede wszystkim upewnij się, że obie plugin są poprawnie zainstalowane w Twojej witrynie. To dobrze, że instalacja Elementora i konfiguracja tabeli produktów WooCommerce jest bezbolesna i prosta. Sam WooCommerce musi być również zainstalowany i włączony, zanim będziesz mógł kontynuować ten krok. Wtedy będziesz gotowy do pracy nad swoim projektem.

Aby włączyć tabelę produktów WooCommerce do edytora tekstu lub widgetu shortcode, wykonaj następujące kroki:

Zacznijmy od najbardziej fundamentalnego i korzystnego zastosowania. Alternatywnie, jeśli chcesz po prostu użyć dynamicznej tabeli produktów w swojej witrynie Elementor, możesz dodać ją do widżetu i wyświetlić na interfejsie witryny.

Upewnij się, że używasz edytora Elementor podczas otwierania dowolnej strony lub postu, aby to osiągnąć. Jeśli widzisz znajomy interfejs WordPress, kliknij przycisk Edytuj za pomocą Elementora, aby przejść do interfejsu Elementora:

Jeśli po raz pierwszy pracujesz z Elementorem, zróbmy małą wycieczkę po platformie. Po prawej stronie pojawi się duży obszar, w którym będą wyświetlane Twoje treści, i będzie on aktualizowany w czasie rzeczywistym w miarę dodawania i zmieniania go. Po lewej stronie ekranu znajduje się lista „widżetów”, które możesz przeciągnąć do wyznaczonego obszaru, a następnie przeorganizować i skonfigurować według potrzeb:

Tabela produktów może być używana z wieloma różnymi widżetami Elementor. Jeśli jednak chcesz wyświetlić tylko jedną tabelę produktów na stronie, możesz to zrobić, umieszczając sekcję tekstu wprowadzającego w kodzie HTML strony. Podnieś widżet Edytor tekstu i przenieś go w puste miejsce w następujący sposób:

Następnie możesz kliknąć wewnątrz widżetu, aby usunąć domyślny tekst i zastąpić go dowolną treścią. Jeśli chodzi o samą tabelę produktów, możesz ją dołączyć, wklejając ten prosty shortcode:

[tabela produktów]

Po wstawieniu shortcode na swoją stronę tabela pojawi się w określonej przez Ciebie lokalizacji, którą możesz zweryfikować, wyświetlając ją w interfejsie użytkownika:

Jeśli chcesz użyć tylko elementu dla samego kodu, możesz użyć widżetu Shortcode.

Nigdy nie zapomnij zapisać strony po zakończeniu pozycjonowania stołu, bez względu na to, gdzie ją położysz. Następnie prawdopodobnie będziesz chciał wprowadzić pewne zmiany w wyglądzie i funkcjach tabeli.

Wróć do pulpitu WordPress i przejdź do zakładki WooCommerce > Ustawienia, aby wykonać to zadanie. Tabele produktów można znaleźć, wybierając Produkty u góry ekranu, a następnie Tabele produktów:

Dokładną listę opcji konfiguracji tabeli produktów WooCommerce można znaleźć tutaj. Masz pełną kontrolę nad informacjami wyświetlanymi w tabeli i możesz je dostosować, między innymi, dodając filtry i zmienne. Sprawdź dokumentację plugin , aby uzyskać więcej informacji na temat różnych opcji.

Będziesz mógł modyfikować właśnie utworzoną tabelę produktów za pomocą Elementora bez konieczności robienia czegokolwiek innego. Gdy skończysz dostosowywać stół do swoich specyfikacji, po prostu zapisz zmiany i gotowe!

Akordeony, zakładki i przełączniki mogą służyć do organizowania kilku tabel produktów.

Powyższe rozwiązanie sprawdza się dobrze, jeśli chcesz zaprezentować jedną tabelę ze swoimi produktami WooCommerce. Jeśli zamierzasz konstruować wiele tabel, z których każda ma inną kategorię obiektów, nie jest to najlepsza opcja.

Istnieje kilka różnych sposobów na osiągnięcie tego w Elementorze. Widget Akordeon, dla ex amp le, mogą być wykorzystane do wygenerowania tego samego efektu, który widzieliśmy w ostatnim studium przypadku. Zaczynając od prawego obszaru edycyjnego, przenieś widżet Akordeon do lewego obszaru edycyjnego.

Możesz utworzyć tyle oddzielnych kart, ile chcesz, klikając znaki plus, a także możesz dostosować nagłówki i tekst w każdej z nich. Dodatkowo możesz dodać tabelę produktów do jednej lub więcej kart, używając tego samego skrótu, jak wspomniano wcześniej.

Oczywiście samo dodanie podstawowego shortcode spowoduje powstanie serii podobnych tabel produktów, co najprawdopodobniej nie jest tym, czego szukałeś w pierwszej kolejności. Zamiast tego trzeba dostosować każdy shortcode wyświetlać tylko określone produkty - dla ex amp le pozycje z kategorii konkretnego - zamiast wszystkich produktów.

Metoda, której użyjesz, zostanie określona przez produkty, które chcesz uwzględnić i pominąć w każdej tabeli, o której mowa. Aby uzyskać dodatkowe informacje, zapoznaj się z kompletnym przewodnikiem dotyczącym dostosowywania skrótów do tabeli produktów WooCommerce.

Warto zauważyć, że możesz osiągnąć podobny efekt za pomocą innych pomocnych widżetów Elementora; obejmuje to między innymi widżet Toggle i widżet Tabs. Jeśli chodzi o prezentację kilku tabel produktów WooCommerce w atrakcyjny i dobrze zorganizowany sposób, Elementor jest Twoim podstawowym narzędziem.

Pozbądź się niechlujnych znaczników dzięki darmowym internetowym organizatorom HTML, CSS i JavaScript!

Zastanów się nad projektem swojej witryny e-commerce, jeśli chcesz, aby Twoja firma wyróżniała się na tle konkurencji. Dla ex amp le, będziemy chcieli, aby określić najbardziej skuteczny sposób zaprezentować swoje produkty, najlepiej w stylu, który jest zarówno łatwy w obsłudze i wizualnie atrakcyjne dla oka.

Na szczęście użycie plugin WooCommerce Product Table z Elementorem sprawia, że ​​jest to proste zadanie. Skrócony kod tabeli produktów może być używany do wyświetlania wszystkiego, co ma do zaoferowania Twoja witryna (lub tylko wybranych) w naprawdę dynamiczny sposób.

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Pola wymagane są oznaczone *