WP Desk Care - zadbaj o swój biznes online!

Sprawdzona opieka techniczna dla Twojego sklepu.

WooCommerce edycja strony sklepu – co możesz osiągnąć

Będąc jedną ze standardowych stron WooCommerce, strona sklepu może mieć dodatkowe ustawienia. W tym artykule możesz przeczytać o podstawach edycji strony sklepu WooCommerce, funkcjach ustawień, opcjach, skrótach, zaawansowanym dostosowywaniu i sposobie zmiany strony.

Spis treści

Edycja strony sklepu WooCommerce (podstawy)

Domyślnie WooCommerce używa strony sklepu do wyświetlania produktów.

Układ strony sklepu oparty na personalizacji motywu

Łatwo jest ustawić układ strony (liczba produktów, kolumny), co może również zależeć od motywu.

Ustawienia katalogu produktów WooCommerce

Na przykład, Storefront daje stronie sklepu WooCommerce następujące opcje projektowania strony.

Opcje wyświetlania strony sklepu i kategorii

Przejdźmy przez proces i miejsca ustawiania strony sklepu WooCommerce.

  1. Wybór strony

    Najpierw możesz sprawdzić zakładkę WooCommerce → Ustawienia → Produkty. Tam znajdują się ustawienia strony sklepu WooCommerce, w tym niektóre, o których pisałem wcześniej.
    Podstawowe ustawienia strony sklepu WooCommerce

    💡 Jeśli nie widzisz żadnych stron, prawdopodobnie będziesz musiał dodać jedną w menu Strony lub mogło dojść do błędu przy pobieraniu stron z bazy danych.

    Strona sklepu WooCommerce

    Jeśli używasz istniejącej strony z treścią, katalog produktów pojawi się po treści.

    Strona sklepu z istniejącą treścią

  2. Ustawienia katalogu produktów

    Następnie możesz przejść do Wygląd → Dostosuj i kliknąć WooCommerce → Katalog produktów. Może to również zależeć od motywu (i jego zgodności z WooCommerce).
    Ustawienia katalogu produktów WooCommerce
    Zasadniczo ustawienia te odpowiadają za układ strony sklepu, liczbę produktów do wyświetlenia, kategorie, sortowanie, stronicowanie, kolejność produktów i kolumny.
    Opcje wyświetlania strony sklepu i kategorii
    Personalizacja wpłynie na ostateczny kształt strony sklepu WooCommerce.
    Układ strony sklepu oparty na personalizacji motywu

  3. Menu

    WordPress pozwala nam budować niestandardowe struktury menu. Aby dodać link do strony sklepu do menu, możesz przejść do Wygląd → Menu. Istnieje również opcja zmiany tytułu w menu lub dodania ikony/favikony.
    Menu WordPress - dostosowywanie struktury menu i stron

  4. Strona sklepu jako strona główna

    Możliwe jest wybranie strony sklepu WooCommerce jako strony głównej. W takim przypadku jeden link w menu prawdopodobnie wystarczy.
    Ustawienia czytania w WordPress

  5. URL strony sklepu

    Każda strona lub wpis w WordPressie ma unikalny URL, korzystając z slug strony. Możesz to zmienić w ekranie edycji produktu lub szybko edytując stronę.
    Zmiana URL strony sklepu

    💡 Jeśli ustawisz stronę sklepu jako stronę główną, URL zostanie przepisany na główną domenę (bez slugu).
  6. Permalinki

    Kiedy klikniesz niektóre produkty WooCommerce w katalogu strony sklepu, zostaniesz przekierowany na ich URL-e. Możliwe jest również ustawienie struktury dla linków do produktów.
    Permalinki produktów w WooCommerce

  7. CSS

    Możliwe jest również użycie CSS do edycji strony produktu i wyglądu strony sklepu. Niezbędny kod można umieścić w pliku style.css motywu lub przez Wygląd → Dostosuj i wprowadzić Dodatkowy CSS.
    Niestandardowy CSS dla strony sklepu WooCommerce

    Mogłam również zmienić szerokość kolumn za pomocą CSS, ale myślę, że WooCommerce radzi sobie z układem strony produktu (kolumny/produkty), więc lepiej użyć skrótów (więcej o tym później w poście).

  8. Widgety

    Opcje motywu mogą dawać więcej opcji układu, na przykład paski boczne, w których można używać widgetów i niestandardowego kodu. W artykule używam układu pełnej szerokości Storefront.
    Szablon strony

Ok, zobaczmy, jak ulepszyć standardową stronę sklepu WooCommerce za pomocą skrótów.

Wyświetlanie produktów i dodawanie skrótów

Domyślne opcje mogą być wystarczające, ale można edytować stronę sklepu WooCommerce za pomocą dodatkowych produktów, opcji i kategorii. Najszybszą opcją jest użycie opcji edytora strony (niektóre mogą pochodzić z motywu) i skrótów WooCommerce.

Przykład skrótów WooCommerce dla strony produktu

Dostosowywanie układu i danych strony sklepu WooCommerce

Jak widać, strona sklepu WooCommerce wyświetli dodatkowe produkty i sekcje przed swoją treścią.

Niestandardowa strona sklepu WooCommerce

Również możliwe jest zmienienie standardowej strony sklepu WooCommerce za pomocą dodatkowych bloków WooCommerce i motywu.

Strona sklepu WooCommerce z niestandardowymi elementami

Oczywiście, warto pamiętać, że niektóre produkty mogą pojawić się kilka razy.

Personalizacja strony sklepu (więcej opcji)

Odsuńmy się od widocznych produktów i zajmijmy się funkcjonalną stroną strony sklepu WooCommerce.

Produkty pojawiają się z obrazem, tytułem, ceną, recenzjami i przyciskami dodaj do koszyka.

  1. Przekierowanie, AJAX, placeholder

    Wróćmy do WooCommerce → Ustawienia → Produkty. Jak widać, są tam 3 ważne opcje do wykorzystania:
    Zachowanie przycisku dodaj do koszyka i placeholder obrazu produktu w WooCommerce

    • Przekierowanie do koszyka – ta opcja może być również użyta dla strony sklepu WooCommerce.
    • Włącz AJAX dla przycisku dodaj do koszyka – ta opcja zapobiega przeładowaniu strony po dodaniu produktu do koszyka. Nie zadziała z poprzednią opcją.
    • Obraz placeholdera – wybór ID dla domyślnego obrazu produktu, jeśli produkt go nie posiada (widoczne w URL obrazu w menu Media).
  2. Dostosowywanie tytułów produktów

    Jak pokazałam powyżej, możliwe jest zmienienie koloru tytułów produktów. Można również dostosować tytuły na frontendzie bez zmieniania każdego produktu w backendzie za pomocą filtra the_title lub niestandardowego kodu zmieniającego zmienną $title. Edycja stron internetowych nigdy nie była łatwiejsza!

  3. Recenzje produktów

    Możliwe jest wyświetlenie gwiazdek poniżej tytułów produktów – odpowiadają one średniej ocenie dla produktu.

    Ocena na stronie sklepu w WooCommerce

    Ustawienia recenzji produktów znajdują się w WooCommerce → Ustawienia → Produkty.

    Recenzje produktów w WooCommerce

  4. Cena produktu

    Domyślnie WooCommerce wyświetla regularną i promocyjną cenę poniżej tytułu produktu.

    Ceny produktów na stronie sklepu WooCommerce

    Dla produktów zmiennych pojawi się zakres cenowy.

    Ceny produktów zmiennych

    Istnieje również opcja, jak pokazać ceny.

    Wyświetlanie cen w sklepie

    Istnieją również dodatkowe wtyczki, które mogą zmienić ceny produktów.

    Pokazywanie najniższej ceny

    Na przykład WP Desk stworzył wtyczkę oferującą rozwiązanie dla dyrektywy Omnibus.

    WP Desk Omnibus dla WooCommerce - elastyczne użycie

    Omnibus WooCommerce 149  (183,27  z VAT)

    Pokaż najniższe ceny produktów WooCommerce zgodnie z nową dyrektywą Omnibus. Przestrzegaj prawa i uniknij kary. Edytuj komunikat pojawiający się przy najniższej cenie w ciągu ostatnich 30 dni. Ustaw wtyczkę raz i nie rób nic więcej.

    Dodaj do koszyka lub Zobacz szczegóły
    Ponad 251 643 klientów WP Desk
    Ostatnia aktualizacja: 2024-11-18
    Działa z WooCommerce 9.0 - 9.4

    Zniżki cenowe

    Możliwe jest również ustawienie zniżek na produkty, które wpłyną na cenę na stronie produktu WooCommerce. Na przykład, Flexible Pricing może ustawić zniżkę typu Kup jeden, dostaniesz jeden gratis ✅ lub zniżki dla całych kategorii, ról użytkowników czy łącznej wartości zamówienia.

    Flexible Pricing WooCommerce 229  (281,67  z VAT)

    Najbardziej elastyczna wtyczka do tworzenia promocji w WooCommerce. Stwórz promocje i rabaty dla produktów, kategorii lub grup klientów dynamicznie z Flexible Pricing WooCommerce.

    Dodaj do koszyka lub Zobacz szczegóły
    Ponad 251 643 klientów WP Desk
    Ostatnia aktualizacja: 2024-11-25
    Działa z WooCommerce 9.1 - 9.5
  5. Przycisk dodaj do koszyka

    WooCommerce ma domyślny tytuł dla przycisku Dodaj do koszyka. Jak zmienić tekst przycisku? Możesz:

    Niestandardowa cena dla WooCommerce - ustawienia i zmiana tekstu przycisku dodaj do koszyka

    Własna Cena Produktu WooCommerce PRO 99  (121,77  z VAT)

    Pozwól klientom na definiowanie własnych cen produktów, darowizn lub napiwków w WooCommerce. Wykorzystaj je do obsługi kampanii marketingowych!

    Dodaj do koszyka lub Zobacz szczegóły
    Ponad 3 000 aktywnych instalacji
    Ostatnia aktualizacja: 2024-11-21
    Działa z WooCommerce 9.1 - 9.5
  6. Wybór ilości z poziomu strony sklepu

    Można dodać tylko jeden produkt na kliknięcie na standardowej stronie sklepu WooCommerce. Ale możliwe jest pokazanie selektora ilości za pomocą niestandardowego kodu.

Jak widać, istnieje wiele opcji konfigurowania strony sklepu WooCommerce. Możliwości są liczne, w tym wyświetlanie większej ilości danych, niestandardowych meta lub elementów graficznych. Ale myślę, że ważniejsze jest oferowanie dobrych produktów. Sprzedawanie czegoś złego lub bez wartości nie może być zamaskowane żadnymi opcjami, sztuczkami CSS ani atrakcyjnym wyglądem.

Podsumowanie

Masz jakieś pytania dotyczące zmiany strony sklepu WooCommerce? Jeśli potrzebujesz edycji strony produktu WooCommerce, na przykład pola strony produktu lub strony zamówienia, możesz zajrzeć na darmowe wtyczki WP Desk.

 

Zobacz inne artykuły

Dołącz do ponad 10 000 czytelników

Poradniki WooCommerce i nowości –
wprost na Twój e-mail.

Preferencje plików cookies

Inne

Inne niekategoryzowane pliki cookie to te, które są analizowane i nie zostały jeszcze przypisane do żadnej z kategorii.

Niezbędne

Niezbędne
Niezbędne pliki cookie są absolutnie niezbędne do prawidłowego funkcjonowania strony. Te pliki cookie zapewniają działanie podstawowych funkcji i zabezpieczeń witryny. Anonimowo.

Reklamowe

Reklamowe pliki cookie są stosowane, by wyświetlać użytkownikom odpowiednie reklamy i kampanie marketingowe. Te pliki śledzą użytkowników na stronach i zbierają informacje w celu dostarczania dostosowanych reklam.

Analityczne

Analityczne pliki cookie są stosowane, by zrozumieć, w jaki sposób odwiedzający wchodzą w interakcję ze stroną internetową. Te pliki pomagają zbierać informacje o wskaźnikach dot. liczby odwiedzających, współczynniku odrzuceń, źródle ruchu itp.

Funkcjonalne

Funkcjonalne pliki cookie wspierają niektóre funkcje tj. udostępnianie zawartości strony w mediach społecznościowych, zbieranie informacji zwrotnych i inne funkcjonalności podmiotów trzecich.

Wydajnościowe

Wydajnościowe pliki cookie pomagają zrozumieć i analizować kluczowe wskaźniki wydajności strony, co pomaga zapewnić lepsze wrażenia dla użytkowników.