Kod, który pokaże poniżej powtórzę jeszcze za jakiś czas podczas kiedy będę omawiać szablon, który stworzyłam na potrzeby budowanego przez zemnie sklepu w Woocommerce.

Inne części

• Instalacja WooCommerce – budujemy nasz własny sklep z WordPress
• Budujemy sklep internetowy z WooCommerce
• Dodawanie nowego produktu w WooCommerce cz. 1
• Dodawanie nowego produktu w WooCommerce cz. 2
• Dodawanie nowego produktu w WooCommerce cz. 3
• Dodawanie nowego produktu w WooCommerce cz. 4
• Zmiana orientacji tabów w sklepie Woocommerce na pionową
• Dodawanie nowych atrybutów do sklepu WooCommerce
• Zmieniamy wygląd wariantów z WooCommerce Variation Swatches

Domyślne ustawienie informacji o produkcie

W domyślnym szablonie, ale nie tylko tabsy wyglądają mniej więcej tak jak na załączonym poniżej obrazku. Czyli posiadamy jak gdyby dwie kolumny. W pierwszej jest coś w rodzaj małego menu z przyciskami takimi jak:

• opis
• dodatkowe informacje
• Opinie

Zawartość drugiej kolumny z kolei ulega zmianie w zależności od tego, jaką opcję wybierzemy w prawej kolumnie. Domyślnie jest to opis produktu – taką zawartość ma bowiem pierwsza karta. W przypadku dodatkowych informacji – można tam znaleźć informacje o produkcie np. jakie posiada atrybuty.

Jak przesunąć menu tabów na górę a opis umieścić pod spodem?

Tak aby szerokość pola z opisem się rozciągnęła się na całą szerokość. Czyli zamiast pionowych, uzyskać poziome! Coś podobnego do tego poniżej:

Układ ten wraz z kolorystyką uzyskać można bardzo łatwo z pomocą CSS.

@media screen and (min-width: 768px) {
  .woocommerce-tabs ul.tabs {
    width: 100%;
  }
  .woocommerce-tabs ul.tabs li {
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.05);
  }
  .woocommerce-tabs ul.tabs li a {
    padding: 1em 1.5em;
  }
  .woocommerce-tabs ul.tabs li:after {
    display: none;
  }

}
  .woocommerce-tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li:hover a {
    color: #fff;
    background-color: #11abc2;
  }

@media screen and (min-width: 768px) {
  .woocommerce-tabs .panel {
    width: 100%;
    padding: 0 11px;
  }
}

Powyższy kod posiada ustawiony warunek, powoduje on że zawarty w nim kod obsługiwany jest do momentu kiedy ekran ma szerokość powyżej 768px; Poniżej tej szerokości nie miałam w moim szablonie nie miałam potrzeby wprowadzać istotnych zmian.

Jak zawsze warto pamiętać, że kodu nie należy dokładnie kopiować. Po jego wprowadzeniu do pliku z stylami CSS warto go dostosować do swoich potrzeb. Kod w tym konkretnym przykładzie jest dostosowany do szablonu, który ja buduje na potrzeby sklepu.

Artykuł Zmiana orientacji tabów w sklepie Woocommerce na pionową pochodzi z serwisu Kurs WordPress od podstaw.

Dlaczego zwykła paginacja jest problematyczna

Rozwiązanie to jest bardzo proste ma jednak bardzo dużo wad:

• użytkownik witryny nie wie ile jest podstron,
• przejście do starszych artykułów (umieszczonych na dalszych kartach) jest utrudnione,
• nie można wejść od tak na dowolną podstronę.

Rozwiązaniem tego problemu jest zastąpienie tego typu paginacji (stronicowania) numerowaniem stron co ułatwi poruszanie się po stronie. Rozwiązanie tego typu można samodzielnie zaimplementować w szablonie WordPress, przy niewielkim wysiłku.

Wykonanie paginacji (numerowania stron)

Na oficjalnej stronie WordPress można znaleźć rozwiązanie problemu w języku angielskim.

Nie jest to jedyna metoda jakiej można w tym wypadku użyć. Standardową funkcję paginate_links() można przedstawić nieco inaczej. Z pomocą samej funkcji paginate_links() możemy jedynie uzyskać listę stron. Dlatego by spełniał nasze wymagania trzeba go zmodyfikować.

Przykład:

function pagination() {
    
    global $wp_query;
    
    if ($wp_query->max_num_pages > 1) { echo '<p class="pages" role="navigation">' . paginate_links( array(
        'base' => @add_query_arg('paged','%#%'),
        'format' => '?paged=%#%',
        'current' => max( 1, get_query_var('paged') ),
        'total' => $wp_query->max_num_pages,
        'prev_text' => __('« '),
        'next_text'    => __(' »'),
    ) ) . '</p>'; }
}

Powyższy kod należy dodać do pliku function.php szablonu, w którym chcemy wprowadzić modyfikację.

Teraz musimy jedynie wywołać kod naszej funkcji po jej nazwie:

<?php pagination(); /*wyświetlamy paginację*/ ?>

Umieszczamy go oczywiście w miejscu gdzie ma znajdować się paginacja naszej witryny.

Paginacja obecnie będzie wyglądała np. tak:

« 1 2 3 4 »

Zmiana wyglądu

Jeżeli nie chcemy mieć tak prostej numeracji stron możemy zmodyfikować ją z pomocą CSS np.:

W celu uzyskania takiego efektu umieściłam paginację strony w elemencie blokwym DIV z odpowiednią klasą.

<div class="numerstrony"><?php pagination(); /*wyświetlamy paginację*/ ?></div>

Następnie przygotowałam skrypt CSS:

.numerstrony {
    text-align: center;
}

.numerstrony .page-numbers {
    border: 1px solid #ccc;
    padding: 5px;
}
.numerstrony a.page-numbers{
    outline: none;
    color: #FF9700;
}

.numerstrony .page-numbers.dots, 
.numerstrony .page-numbers.next, 
.numerstrony .page-numbers.prev {
    border: none;
}

Jak widać zamiana ta jest bardzo prosta i nie wymaga dużej specjalistycznej wiedzy.

Źródło:http://strefakodera.pl/poradniki/wordpress/paginacja-numeryczna-w-wordpressie

Artykuł Tworzenie Paginacji w WordPress pochodzi z serwisu Kurs WordPress od podstaw.