WooCommerce Pokladna upravená šablona pro checkout

WooCommerce je open-source plugin pro elektronické obchodování ve WordPressu. Je určen pro malé až velké online obchodníky používající WordPress. 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).

Eshop byl napsán 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 WooCommerce. V lednu 2020 se odhadovalo, že WooCommerce 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 koupila společnost Automattic, provozovatel webu WordPress.com a hlavní přispěvatel do softwaru WordPress. V prosinci 2020 společnost WooCommerce získala MailPoet, populární plugin pro správu newsletterů ve WordPressu.

Pokladna a Objednávky CSS

Jeden z mála kompletních použitelných stylů na úpravu vzhledu WooCommerce Pokladny. Všechny atributy jsou nadepsány.

/* Přídat ikonu do Hlavičky a Notifikace */
.woocommerce-billing-fields h3:before, h3#order_review_heading:before, h3#phoen_order_review_heading:before {
 font-family: "Material Icons";
 font-size: 30px;
 content: '\E88F'; /* sets default icon to a circled "i" */
 color: #7ed026;
 padding-right: 10px;
 vertical-align: bottom;
}

h3#order_review_heading:before { content: '\E8CC'; } /* changes the icon set above to a shopping cart for the order */


/* Fancy přihlašovací tlačítko odběru novinek */
#place_order {
  background-image: linear-gradient(25deg,#00aeef 0%,#7ed026 100%)!important;
  border: transparent;
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.28) 0px 2px 8px 0px;
}

#place_order:hover { background-image: linear-gradient(25deg,#7ed026 0%,#00aeef 100%)!important; }

/* 2 sloupce */
@media (min-width: 981px) {
  .woo-checkout .woo { overflow: hidden;}
  .woo-checkout .woo:after { clear: both; }
  .woo-checkout .woo .col2-set .col-1, .woo-checkout .col2-set .col-1 { width: 100%; }
  .woo-checkout .woo .col2-set .col-2, .woo-checkout 
 .woo-page .col2-set .col-2 { display: none; }
 .woo-checkout .woo .col2-set, .woo-checkout .woo-page .col2-set { float:left; width: 44%; }
  .woo-checkout #order_review_heading, .woo-checkout .woo #order_review, .woo-checkout .woo-page #order_review { 
    float: left; 
    width:50%; 
  }
}

/* Zaoblené rohy Upozornení */
.woo-error, .woo-info, .woo-message { border-radius: 3px; }

/* Styl pole šablony Divi */
input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea {
  border: none;
  background-color: #eee;
}
.select2-container .select2-selection--single { height: 49px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { 
  line-height: 49px;
  color: #4e4e4e;
  font-weight: bold;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b { margin-top: 8px; }
.select2-container--default .select2-selection--single { 
  background-color: #eee; 
  border: none; 
}

/* Úpravy na zjednodušení oblasti platební metody */
.woo-checkout #payment { background: none!important; }
.woo-checkout #payment ul.payment_methods { border: none; }

Můj ůčet

Úprava oblasti oznámení přihlášení do obchodu

CSS lze vložit pomocí menu Přizpůsobit nebo přímo do .css souboru child_theme ve složce šablony kterou používáte

Užitečné

Domovská stránka Woo.
Menu Můj účet Woo.