Opracowanie wtyczki do pełnej personalizacji Checkout w Woocommerce
W ramach zadania przeprowadzono głęboką personalizację procesu składania zamówienia. Główny nacisk położono na zachowanie wzorcowego układu przy rozszerzaniu funkcjonalności koszyka.
1. Obsługa zamówień wielopozycyjnych
Cykliczne wyświetlanie: Zamiast wyświetlania tylko jednego (pierwszego) produktu, zrealizowano cykl foreach po całej tablicy $cart. Teraz w górnej części Checkout wyświetlane są wszystkie dodane pozycje.
Indykacja ilości: Dodano wyświetlanie ilości dla każdej pozycji. Format: × [ilość]. Styl: pogrubione, kolor #1A2E58 (odpowiada głównemu tekstowi).
Obliczenie kosztów: Pod każdym produktem wyświetlany jest poprawny subtotal dla tej pozycji (z uwzględnieniem jej ilości).
2. Optymalizacja bloku podsumowania (Summary)
Blok z całkową kwotą i przyciskiem „Zmień skład” wizualnie oddzielony od listy produktów, ale zachowuje ogólną stylistykę kart.
Poprawiono duplikację cen: całkowity koszt koszyka teraz wyświetlany jest tylko raz na końcu listy.
3. Poprawki UI i „czyszczenie” interfejsu
Usunięcie duplikatów kuponów: Całkowicie ukryto standardowy komunikat WooCommerce ("Masz kupon?"). Niestandardowa forma kodu promocyjnego jest teraz jedyna i dostępna od razu bez zbędnych kliknięć.
Blokowanie zbędnych elementów: Poprzez CSS ukryto standardowe tabele i nagłówki WC, które przeciążały interfejs i powodowały duplikację produktów w bloku dostawy.
Poprawka checkboxa: Zachowano metodę pozycjonowania poprzez float: left. Gwarantuje to, że checkbox zawsze będzie po lewej stronie tekstu polityki prywatności, nie „odlatując” w górę na urządzeniach mobilnych.
4. Układ i responsywność
Zachowanie standardu: Wszystkie style (cienie, zaokrąglenia 3px, marginesy 20px) ściśle odpowiadają temu standardowi v3.6.7.
Mobile Friendly: Poprawiona mobilna siatka dla bloku kodu promocyjnego. Na wąskich ekranach nagłówek i forma ustawiają się pionowo, nie łamiąc granic kontenera.
Rezultat: Czysty, konwersyjny checkout, który wygląda jak jedność z designem strony i poprawnie działa z dowolną ilością produktów.
1. Obsługa zamówień wielopozycyjnych
Cykliczne wyświetlanie: Zamiast wyświetlania tylko jednego (pierwszego) produktu, zrealizowano cykl foreach po całej tablicy $cart. Teraz w górnej części Checkout wyświetlane są wszystkie dodane pozycje.
Indykacja ilości: Dodano wyświetlanie ilości dla każdej pozycji. Format: × [ilość]. Styl: pogrubione, kolor #1A2E58 (odpowiada głównemu tekstowi).
Obliczenie kosztów: Pod każdym produktem wyświetlany jest poprawny subtotal dla tej pozycji (z uwzględnieniem jej ilości).
2. Optymalizacja bloku podsumowania (Summary)
Blok z całkową kwotą i przyciskiem „Zmień skład” wizualnie oddzielony od listy produktów, ale zachowuje ogólną stylistykę kart.
Poprawiono duplikację cen: całkowity koszt koszyka teraz wyświetlany jest tylko raz na końcu listy.
3. Poprawki UI i „czyszczenie” interfejsu
Usunięcie duplikatów kuponów: Całkowicie ukryto standardowy komunikat WooCommerce ("Masz kupon?"). Niestandardowa forma kodu promocyjnego jest teraz jedyna i dostępna od razu bez zbędnych kliknięć.
Blokowanie zbędnych elementów: Poprzez CSS ukryto standardowe tabele i nagłówki WC, które przeciążały interfejs i powodowały duplikację produktów w bloku dostawy.
Poprawka checkboxa: Zachowano metodę pozycjonowania poprzez float: left. Gwarantuje to, że checkbox zawsze będzie po lewej stronie tekstu polityki prywatności, nie „odlatując” w górę na urządzeniach mobilnych.
4. Układ i responsywność
Zachowanie standardu: Wszystkie style (cienie, zaokrąglenia 3px, marginesy 20px) ściśle odpowiadają temu standardowi v3.6.7.
Mobile Friendly: Poprawiona mobilna siatka dla bloku kodu promocyjnego. Na wąskich ekranach nagłówek i forma ustawiają się pionowo, nie łamiąc granic kontenera.
Rezultat: Czysty, konwersyjny checkout, który wygląda jak jedność z designem strony i poprawnie działa z dowolną ilością produktów.