Woocommerce Košík (mobilní verze) – ODMĚNA!

[radek1403Participant]

Dobrý den, mám problém s aktuální verzí Woocommerce. Dnes jsem aktualizoval na novou verzi a u mobilní verze se zobrazuje divně košík (pouze napůl obrazovky). Na PC je vše v pořádku. Před aktualizací vše fungovalo. Používám šablonu Divi. Adresa eshopu je: http://smartomat.cz . Nabízím 500 Kč tomu, kdo mi problém pomůže vyřešit.

Kontakt:
nisev@seznam.cz
720 510 702

Děkuji

[AzifaralParticipant Web]

Když se podíváte do souboru style.css tak na řádku 833 máte definovaný style toho košíku a tam je max-width: 100px …stačí odmazat. Nevím jak se to tam dostalo, možná chybička v nové verzi. takže buď to smáznete přímo v tom style.css, což ale není úplně optimální, protože při dalším update se Vám to může vrátit a nebo vložte do custom style bez toho omezení na šířku. Ono, dokonce si myslím, že by tam mělo být min-width a ne max-width

Toto je tak jak to tam teď máte:
table.cart th, #main-content table.cart th, table.cart td, #main-content table.cart td, table.cart tr, #main-content table.cart tr, #content-area table tr, #content-area table td, #content-area table th { padding: .857em 0.587em; max-width: 100px; }

[radek1403Participant]

Dobrý den, mockrát Vám děkuji za odpověď. Mohu se pouze zeptat kde tento soubor najdu? V editoru pluginů jsou u Woocommerce pouze php soubory. Děkuji

[AzifaralParticipant Web]

Předpokládám, že jste pouze běžný uživatel WordPress. Problém s editací style.css je ten, že nikde ve WordPressu jako takovém není jeho editor. Takže jsou zde pouze 2 možnosti.

1. Přihlásíte se pomocí FTP klienta k vašemu serveru a tam potom ten soubor style.css najdete v adresáři /wp-content/themes/Divi/. Ale nevím jestli máte možnost přístupu k FTP.

2. Druhá varianta je ta a pro Vás bude asi jednodušší, že si nainstalujete plugin pro Custom style např. Simple custom CSS, kde po jeho instalaci, si můžete jeho prostřednictvím modifikovat ten stávající style.css bez nutnosti zásahu do toho souboru. A vy tam jenom vložíte toto:

table.cart th, #main-content table.cart th, table.cart td, #main-content table.cart td, table.cart tr, #main-content table.cart tr, #content-area table tr, #content-area table td, #content-area table th { padding: .857em 0.587em; min-width: 100px; }

A potom dělá to, že načte tu Vaši úpravu až po načtení style.css a tím pádem dojde k modifikaci toho řádku a jeho úpravě.

[radek1403Participant]

Ok, děkuji. Přístup k FTP mám, takže večer až se dostanu k PC to zkusím editovat, případně to udělám přes ten plugin. Pokud to bude fungovat tak Vám pak samozřejmě zašlu odměnu :). Ještě jednou děkuji.

[AzifaralParticipant Web]

A ještě drobnost vy nemusíte nic instalovat, protože ta šablona Divi má custom css v sobě http://www.elegantthemes.com/gallery/divi/

[radek1403Participant]

Tak jsem nejdřív zkusil smazat max-width a nic se nedělo a když jsem to přepsal na min-width tak už to vypadá líp :). Pouze je tam problém, že sice to na tom mobilu už zabere celou šířku, ale pořád se tam nevejdou celý tlačítka Použít kupón a Aktualizovat (je tam pouze Použít kupó a Aktualizova). Nevíte náhodou co s tím? Děkuji

[radek1403Participant]

Všiml jsem si že se to tam nevejde jen pokud je mobil na výšku, pokud dám mobil na šířku tak už se tam ty tlačítka vlezou. Nešlo by to nějak přizpůsobit podle aktuální šířky obrazovky?

[AzifaralParticipant Web]

No jak jsem se na to koukal, tak těch chyb v tom css je v tom nějak moc. A nejhorší je, že to není jenom otázka úpravy css stylů. Tady už by bylo dobré napsat přímo vývojářům, protože oni to budou muset řešit obecně. Jinak to co popisujete vy (na šířku / na výšku) je právě ten problém, že ty bloky tam plavou trochu nedobře.

Jediné čím to trochu můžete vylepšit je to, že tady, což je style přímo od woocommerce

media="only screen and (max-width: 768px)"
.woocommerce #content table.cart td.actions .button.alt, .woocommerce #content table.cart td.actions .input-text+.button, .woocommerce table.cart td.actions .button.alt, .woocommerce table.cart td.actions .input-text+.button, .woocommerce-page #content table.cart td.actions .button.alt, .woocommerce-page #content table.cart td.actions .input-text+.button, .woocommerce-page table.cart td.actions .button.alt, .woocommerce-page table.cart td.actions .input-text+.button {
    float: right;
}

přidáte min-width: 160px

Pořád se to tam bude sice trochu nehezky zalamovat, ale alespoň budou ty buttony celé. Jinak pro Vaše info, ten problém je jenom v Google, v Safari (na iPhone i OSX – mám Maca) je to bez chyby.

[radek1403Participant]

Ok, moc Vám děkuji za pomoc. Pokud chcete tak mi na email: nisev@seznam.cz pošlete číslo Vašeho bankovního účtu a rád Vám pošlu odměnu. Zkusím ještě použít ten kód s tím 160 px a uvidíme.

[Autor]

Příspěvky