Motyw WooCommerce z blokami dla każdego ekranu sklepu
Projektuj stronę produktu, siatkę sklepu, koszyk i realizację zamówienia za pomocą bloków w edytorze, który daje WordPress, a następnie zacznij od Dema, które przychodzi jako działający sklep. WooCommerce zarządza zamówieniami, a Canvas nadaje mu wygląd.
Zaktualizowano
24 bloki dla czterech ekranów sprzedażowych
Każdy element sklepu WooCommerce, który widzi klient, to blok z panelem ustawień, więc można go przenieść, zmienić jego styl lub pominąć bez edytowania pliku szablonu.
Strona produktu 11 bloków
Zbuduj układ pojedynczego produktu blok po bloku albo zacznij od jednego z gotowych szablonów i przesuwaj elementy.
Product Images Dostępne w każdym planie
Wyświetla główny obraz wyróżniający produktu WooCommerce oraz opcjonalne miniatury galerii.
Product Gallery Linker Dostępne w każdym planie
Pasek miniatur, który przenosi karuzelę galerii produktu do klikniętego obrazu.
Product Price Uwzględniony w każdym planie
Wyświetla cenę produktu WooCommerce wraz z ceną promocyjną i formatowaniem waluty.
Ocena produktu Dołączone w każdym planie
Wyświetla ocenę gwiazdkową i opcjonalną liczbę recenzji bieżącego produktu WooCommerce.
Product Meta Dostępne w każdym planie
Wyświetla kartę metadanych produktu: SKU, kategorie i tagi.
Product Short Description Dostępne w każdym planie
Wyświetla krótki opis produktu z zachowanym formatowaniem akapitów.
Variation Swatches Dostępne w każdym planie
Kolorowe kropki lub przyciski w formie pigułek, które służą do wyboru wariantu produktu zmiennego.
Add to Cart Dostępne w każdym planie
Wyświetla formularz dodawania do koszyka WooCommerce dla bieżącego produktu z opcjonalnym polem ilości.
Zakładki produktu Dostępne w każdym planie
Wyświetla zakładki danych produktu WooCommerce: Opis, Dodatkowe informacje i Recenzje.
Product Share Dostępne w każdym planie
Wyświetla kartę „Udostępnij:” z linkami do udostępniania w mediach społecznościowych dla bieżącego produktu WooCommerce.
Related Products Dostępne w każdym planie
Wyświetla siatkę produktów WooCommerce powiązanych z bieżącym produktem. Wyświetla się tylko w szablonach pojedynczego produktu.
Sklep i jego katalog 5 bloków
Siatki, karuzele, karty kategorii i filtr cen, z których każdy może pobierać treści z kategorii, tagu, wyszukiwania lub ręcznie wybranej listy.
Produkty dołączone do każdego planu
Wyświetla produkty WooCommerce w układzie siatki lub listy. Filtruje według źródła, kategorii, tagu i sortowania.
Product Categories Dołączone do każdego planu
Wyświetla kategorie produktów WooCommerce w responsywnej siatce kart z miniaturami, nazwami i liczbą produktów.
Product Carousel Dostępne w każdym planie
Wyświetla produkty WooCommerce w przewijanej karuzeli owl-carousel. Obsługuje autoodtwarzanie, strzałki nawigacji, kropki oraz punkty przełamania responsywności.
Store Price Filter Dostępny w każdym planie
Dwuuchwytowy suwak zakresu cen, który filtruje siatkę produktów na bieżącej stronie.
Conference Tickets Dostępne w każdym planie
Karty cenowe dla kategorii produktów biletowych, każda z listą wyboru ilości i aktywnym linkiem do koszyka.
Koszyk: 3 bloki
Strona koszyka, którą projektujesz, z upsellem, który klienci faktycznie widzą.
Cart Table Dostępny w każdym planie
Wyświetla tabelę koszyka WooCommerce z pozycjami, ilościami i sumami.
Cart Totals W każdym planie
Wyświetla panel podsumowania koszyka WooCommerce, w tym sumę częściową, wysyłkę i przycisk do kasy.
Cross-Sells Dostępne w każdym planie
Wyświetla produkty sprzedaży krzyżowej z aktualnego koszyka WooCommerce. Wyświetla się tylko wtedy, gdy koszyk jest aktywny i zawiera produkty sprzedaży krzyżowej.
3 bloki finalizacji zamówienia
Formularz płatności, podsumowanie zamówienia i komunikaty, które informują kupującego, co się właśnie stało.
Checkout Billing Zawarte w każdym planie
Wyświetl formularz adresu rozliczeniowego w finalizacji zamówienia WooCommerce.
Checkout Order Review Dostępny w każdym planie
Wyświetla podsumowanie przeglądu zamówienia WooCommerce na stronie kasy, z pozycjami i sumami.
WooCommerce Notices Dołączone do każdego planu
Wyświetla powiadomienia WooCommerce: błędy, komunikaty o powodzeniu lub informacyjne.
Gdzie indziej w sklepie 2 bloki
Bloki sklepu, które nie należą do czterech wymienionych wyżej ekranów.
Lista życzeń Dostępna w każdym planie
Produkty zapisane przez kupującego, wraz z ceną, stanem magazynowym i przyciskiem dodania do koszyka. Umieść go na stronie wybranej w Opcjach motywu, w sekcji Lista życzeń.
Wishlist Button Dostępny w każdym planie
Zapisuje bieżący produkt na liście życzeń kupującego. Stosowany w szablonach produktów i kartach produktów.
Sklep odzieżowy
Katalog mody ze stronami kolekcji, produktami wariantowymi i koszykiem w nagłówku, który na bieżąco pokazuje liczbę produktów.
Motywy e-commerce
Meble
Sprzedaż i wynajem w jednym katalogu, siatka produktów i pojedyncza strona produktu są złożone z bloków.
Motywy do projektowania wnętrz
Wino
Sklep winnicy, w którym projekt prezentuje zdjęcia produktów, a strony sklepu znajdują się za nimi.
Motywy dla restauracjiTrzy z 21 sklepów demo. Każdy element, który widzi kupujący na tych stronach, jest blokiem z panelem ustawień.
Co kupujący robią bez przeładowania strony
Trzy elementy zachowania sklepu, na które zwykle potrzeba osobnej wtyczki, są częścią integracji.
Próbki kolorów atrybutów
Nadaj terminowi atrybutu produktu kolor w panelu administracyjnym, a produkty wariantowe pokażą zamiast listy rozwijanej kolorowe kropki lub przyciski, dzięki czemu kupujący wybiera wariant wzrokowo.
Dodawanie do koszyka przez AJAX
Dodanie produktu z siatki, karuzeli lub nakładki karty aktualizuje koszyk na miejscu. Kupujący pozostaje na stronie, którą przegląda, a mini koszyk w nagłówku nadal pokazuje liczbę produktów.
Style kart produktów
Dopasuj każde zdjęcie z katalogu do jednego kształtu, aby karty były równe, wybierz, czy dodatkowe zdjęcia galerii mają się pokazywać po najechaniu kursorem, czy działać jako pokaz slajdów, i określ, co oferuje nakładka po najechaniu: zakup, szybki podgląd albo oba.
18 szablonów sklepu w Edytorze witryny
Każdy ekran sklepu to szablon blokowy, który otwierasz, edytujesz i resetujesz w Edytorze witryny, tak samo jak każdy inny szablon blokowy.
Układy pojedynczego produktu
Ułóż stronę produktu jako domyślną, z przylepnym podsumowaniem podążającym za galerią, jako listę, z projektem opartym na kolorze, w stylu sklepu, w jednym z dwóch układów galerii z niestandardowym linkowaniem albo z wariantem z lewym, prawym lub dwoma paskami bocznymi.
Układy stron sklepu
Ułóż sam sklep na pełną szerokość, z lewym paskiem bocznym, z prawym paskiem bocznym lub z paskami po obu stronach, tak aby filtry i kategorie znalazły się tam, gdzie wymaga tego katalog produktów.
Archiwa, koszyk i finalizacja zakupu
Archiwum sklepu, archiwa kategorii produktów, koszyk i finalizacja zamówienia są dostępne jako szablony, obok nadpisań szablonów WooCommerce dostarczanych przez motyw.
Szablony sklepu są wyświetlane w sekcji woocommerce w panelu Szablony w Edytorze witryny, obok szablonów Canvas, a zresetować je można z tego samego ekranu.
Przypisz układ do każdego produktu w edytorze lub ustaw domyślny dla całego sklepu w Opcjach motywu. Szablon dostosowany w Edytorze witryny pozostaje dostosowany po aktualizacjach, a Canvas informuje, które szablony zmieniły się po aktualizacji.
39 opcji sklepu, 5 zakładek
Domyślne ustawienia dla całego sklepu: katalogu, strony produktu, koszyka i kasy oraz mini koszyka w nagłówku, a także tryb katalogu dla sklepów przyjmujących zapytania. Liczba produktów na stronie, paginacja, kształt obrazów produktów, dodatkowe zdjęcia w galerii i nakładka na kartach są ustawiane właśnie tutaj, a blok ustawiający jedną z tych opcji sam dla siebie nadal ma pierwszeństwo na stronie, na której jest umieszczony.
- Katalog: liczba produktów w rzędzie na każdym rozmiarze ekranu, kształt obrazów, zachowanie po najechaniu kursorem, etykieta promocji
- Strona produktu: co pokazuje ekran pojedynczego produktu oraz przyklejony pasek Dodaj do koszyka
- Koszyk i kasa: pasek postępu darmowej dostawy oraz formularz zakupu, który niczym nie rozprasza
- Mini koszyk: co robi koszyk w nagłówku, gdy kupujący coś doda
- Tryb katalogu: ukryj ceny i przycisk kupowania, pokaż przycisk zapytania
Opcje sklepu, które pomagają sprzedawać Tryb katalogu Lista życzeń
Pięć przełączników WooCommerce
WooCommerce ładuje skrypty i arkusze stylów na każdej stronie witryny, także na tych, które nic nie sprzedają. Te pięć przełączników cofa to zachowanie, a każdy z nich można odwrócić.
- Usuwanie JavaScriptu WooCommerce na stronach, które nie wyświetlają treści sklepu
- Wyłącz śledzenie atrybucji zamówień, jeśli te raporty nie są potrzebne
- Zatrzymaj odpytywanie skryptu cart fragments przy każdym załadowaniu strony
- Wyłącz bibliotekę siły hasła poza stronami konta i finalizacji zamówienia
- Wyłącz dołączoną bibliotekę Select2 poza stronami finalizacji zakupu i konta
21 dem to działające sklepy WooCommerce
Produkty, kategorie, atrybuty, koszyk i finalizacja zakupu, zaimportowane i gotowe do złożenia testowego zamówienia. Podejrzyj dowolny z nich na żywo, zanim podejmiesz decyzję.
Demo Bag Store, podgląd na żywo (otwiera się w nowej karcie)
Sklep i e-commerce · 9 stron · Co zostanie zainstalowane: bloki i typy treści z dema Bag Store
Demo CanvasRoam, podgląd na żywo (otwiera się w nowej karcie)
Portfolio i strony osobiste · 10 stron · Co zostanie zainstalowane: bloki i typy treści dema CanvasRoam
Demo Christmas Store, podgląd na żywo (otwiera się w nowej karcie)
Sklep i e-commerce · 6 stron
Demo Conference, podgląd na żywo (otwiera się w nowej karcie)
Wydarzenia i śluby · 25 stron · Co zostanie zainstalowane: bloki i typy treści dema Conference
Demo Drone, podgląd na żywo (otwiera się w nowej karcie)
Sklep i e-commerce · 12 stron
Demo eBook, podgląd na żywo (otwiera się w nowej karcie)
Sklep i e-commerce · 9 stron
Demo Fashion Shop, podgląd na żywo (otwiera się w nowej karcie)
Sklep i e-commerce · 25 stron
Demo Fashion Store, podgląd na żywo (otwiera się w nowej karcie)
Sklep i e-commerce · 16 stron
Demo FORM 2026, podgląd na żywo (otwiera się w nowej karcie)
Wydarzenia i śluby · 14 stron · Co zostanie zainstalowane: bloki i typy treści dema FORM 2026
Demo Furniture, podgląd na żywo (otwiera się w nowej karcie)
Sklep i e-commerce · 12 stron
Demo Game of Canvas, podgląd na żywo (otwiera się w nowej karcie)
Rozrywka i społeczność · 12 stron · Co zostanie zainstalowane: bloki i typy treści dema Game of Canvas
Demo Illustrator, podgląd na żywo (otwiera się w nowej karcie)
Portfolio i strony osobiste · 7 stron · Co zostanie zainstalowane: bloki i typy treści dema Illustrator
Demo Jewelry Boutique, podgląd na żywo (otwiera się w nowej karcie)
Sklep i e-commerce · 17 stron
Demo Podcasts, podgląd na żywo (otwiera się w nowej karcie)
Blog i magazyn · 13 stron · Co instaluje: bloki i typy treści dema Podcasts
Demo Pottery Shop, podgląd na żywo (otwiera się w nowej karcie)
Sklep i e-commerce · 12 stron
Demo Speaker Store, podgląd na żywo (otwiera się w nowej karcie)
Sklep i e-commerce · 11 stron
Demo Supplement Store, podgląd na żywo (otwiera się w nowej karcie)
Sklep i e-commerce · 13 stron
Demo Wildroot Gear, podgląd na żywo (otwiera się w nowej karcie)
Sklep i e-commerce · 14 stron · Co zostanie zainstalowane: bloki i typy treści z dema Wildroot Gear
Demo Wine Estate, podgląd na żywo (otwiera się w nowej karcie)
Jedzenie i napoje · 10 stron · Co zostanie zainstalowane: bloki i typy treści dema Wine EstateStrony sklepu zostają przejęte, a nie powielane
Typowa obawa przy imporcie projektu sklepu to obudzenie się z dwiema stronami finalizacji zamówienia. Canvas dopasowuje strony WooCommerce z dema do tych, które Twoja witryna już ma.
Ekran importu, przez który trafia każde demo sklepu, wraz z wycofaniem, które cofa import.
Jeden sklep, jeden koszyk, jedna kasa
Importer znajduje istniejące strony WooCommerce i kieruje menu oraz linki dema bezpośrednio na nie.
Odwracalne
Wszystko, co utworzył import, jest zapisywane, dzięki czemu jeden ekran usuwa treści dema i przywraca opcje oraz menu sprzed importu.
Produkty w zestawie
Produkty dema, kategorie, atrybuty i kolory wariantów pojawiają się razem z projektem, dzięki czemu katalog wygląda poprawnie, dopóki nie podmienisz ich na własne.
Albo tylko strony
Wybierz import obejmujący tylko strony, a otrzymasz strony dema bez jego Opcji motywu, menu i strony głównej.
Sprzedaż z Canvas
Pierwsze pytania właścicieli sklepów. Dokumentacja szczegółowo opisuje każdy blok i opcję.
Czy nadal potrzebna jest wtyczka WooCommerce?
Tak, Canvas dodaje bloki, szablony i opcje do WooCommerce i niczego w nim nie zastępuje. Zamówienia, produkty, podatki, wysyłka i płatności pozostają w WooCommerce, gdzie oczekują ich inne wtyczki. Jeśli zaczynasz od dema sklepu, kreator konfiguracji zainstaluje i aktywuje WooCommerce przed uruchomieniem importu.
Czy import dema sklepu zastąpi moje strony sklepu i finalizacji zamówienia?
Nie, importer Canvas przejmuje strony WooCommerce już obecne w witrynie, więc żadna druga strona sklepu, koszyka, kasy ani konta się nie pojawia. Istniejące produkty i zamówienia pozostają nienaruszone.
Czy mogę łączyć je z własnymi blokami WooCommerce?
Tak, bloki sklepu Canvas to zwykłe zarejestrowane bloki, więc działają obok bloków WooCommerce i bloków podstawowych w tym samym szablonie i na tej samej stronie. Można wymieniać je pojedynczo, bez zobowiązania do całego układu.
Jak działają próbki kolorów?
Przypisz terminowi atrybutu produktu kolor w panelu administracyjnym WordPress, a blok Canvas Variation Swatches wyświetli ten atrybut jako kolorowe kropki lub przyciski zamiast listy rozwijanej, na stronie produktu i w szablonach, które go używają.
Czy bloki sklepu są uwzględnione w planie?
Tak: wszystkie bloki sklepu Canvas (24 bloki) to bloki premium, a każdy plan zawiera każdy blok premium. Nie ma dodatku do sklepu ani poziomu e-commerce. Inne motywy często to rozdzielają: szybki podgląd to funkcja Astra Pro, a OceanWP sprzedaje swoją wtyczkę eCommerce Pro jako osobny produkt.
Zbuduj sklep, a nie zaplecze techniczne
Każdy plan zawiera wszystkie 24 bloki sklepu, wszystkie 18 szablonów sklepu oraz wszystkie 21 gotowych sklepów demo. Nie ma osobnego poziomu e-commerce, na który trzeba by przejść.