Dzisiaj pokażę wam jak zmienić sposób wyświetlenia tabów (tabs produktów) w sklepie WooCommerce.
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.
