Minimalistická tabulka WooCommerce zboží. Přidané informace.

Text Mini tabulka WooCommerce zboží se týká komerční nástavby WordPress, návod zlepšuje čitelnost případně i prodej zboží. Software jako takový je určen pro malé i velké online obchodníky používající WordPress a právě jeho vysoká upravitelnost má na jeho oblíbenosti značný podíl. Zásuvný modul byl uveden 27. září 2011 a rychle si získal oblibu pro svou jednoduchost instalace a přizpůsobení a pro postavení základního produktu na trhu jako freeware (i když mnoho jeho volitelných rozšíření je placených a proprietárních).

Woo byl poprvé vyvinut vývojářem témat WordPress WooThemes, který najal Mikea Jolleyho a Jamese Kostera, vývojáře ze společnosti Jigowatt, aby pracovali na odnoži Jigoshopu, z níž se stal Woo. V lednu 2020 se odhadovalo, že jej používá přibližně 3,9 milionu webových stránek. V listopadu 2014 se v kalifornském San Franciscu konala první konference WooConf, zaměřená na elektronické obchodování.

Zúčastnilo se jí 300 účastníků. V květnu 2015 společnosti WooThemes a Woo koupila společnost Automattic, provozovatel webu WordPress.com a hlavní přispěvatel do softwaru WordPress. V prosinci 2020 společnost Woo získala MailPoet, populární plugin pro správu newsletterů ve WordPressu.

Vlastnosti WooCommerce zboží

CSS (viz pod screenshotem) je potřeba vkládat postupně a kontrolovat další části webu, které obsahují formátování Woo. Konkrétně .woocommerce-tabs Přidání CSS může ovlyvnit tabulku s cenou napravo od fotografie

Tak vypadá tabulka WooCommerce zboží (vlastnosti produktu) v původním stavu

Tak vypadá tabulka po úpravě

CSS kód

Oprava či úprava pozice hlavičky jména karty tabulky vůči buňce

.woocommerce div.product .woocommerce-tabs ul.tabs {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

Oprava či úprava hlavičky jména karty tabulky

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: 0;
  background: none;
  display: inline-block;
  position: relative;
  z-index: 0;
  border-radius: 4px 4px 0 0;
  margin: 0 1em 0 0;
  padding: 0;
  border-radius: 0;
}

/* Funguje pouze na některých šablonách */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 0.5em 0;
  font-weight: 700;
  color: #515151;
  text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  text-decoration: none;
  color: #6b6a6b;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  z-index: 2;
  border-bottom-color: #fff;
}

Barva textu a hoover zvýraznění aktivní karty

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: inherit;
  text-shadow: inherit;
  outline: none;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #13aff0;
}

/* <--- Od sem do viz konec funguje pouze u některých šablon vzhledu WooCommerce  --> */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before {
  content: ' ';
  position: absolute;
  width: 100%;
  height: 3px;
  box-shadow: none;
  top: 0;
  left: 0;
  border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
  border: none;
  box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  content: ' ';
  position: absolute;
  bottom: -1px;
  width: 5px;
  height: 5px;
  border: none;
  box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  position: absolute;
  content: ' ';
  width: 100%;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid #d3ced2;
  z-index: 1;
}
/* <-- Po sem viz začátek, funguje pouze u některých šablon vzhledu WooCommerce --> */

Odstranění původního pravého a levého horního ohraničení tabulky

.woocommerce div.product .woocommerce-tabs ul.tabs li::after, .woocommerce div.product .woocommerce-tabs ul.tabs.tabs::before {
  display: none;
  border: 0;
}

Úprava odsazení okolních elementů od hranice tabulky

.woocommerce div.product .woocommerce-tabs .panel {
margin: 0 0 1.2em;
padding: 0;
 }

Oprava pravé a levé horní ohraničení tabulky

.woocommerce div.product .woocommerce-tabs .shop_attributes {
border-style: solid;
}

Vyplň / uzamčeni textu .p tag – celá tabulka

.woocommerce div.product .woocommerce-tabs .shop_attributes p {
padding: 0;
}

Levé spodní ohraničení tabulky + levé boční ohraničení tabulky

.woocommerce div.product .woocommerce-tabs .shop_attributes th {
border-left-width: 1px;
border-style: solid;
padding-left: .9em;
text-align: left;
}

Oprava pravé spodní ohraničení tabulky

.woocommerce div.product .woocommerce-tabs .shop_attributes td {
padding: .5em .5em .5em .9em;
font-style: normal;
border-style: solid;
} 

CSS pro tabulku woocommerce zboží

Užitečné

Astra style WooCoommerce zboží
Dokumentace Woo