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.