V tomto texte sa dozviete, ako vytvoriť svoj internetový obchod pomocou doplnku Elementor Pro a témy Ocean WP. Prvá vec, ktorú potrebujete, je upgradovať Elementor na verziu Pro, pretože má všetky možnosti, ktoré potrebujeme na vytvorenie obchodu WooCommerce, a tiež potrebujete tému Ocean WP, ktorá je zadarmo, ako aj doplnok WooCommerce.
Internetový obchod - tvorba
Musíte vytvoriť novú stránku a pomenovať ju obchod alebo akokoľvek chcete, v tomto príklade sa bude volať Môj obchod, potom v nastaveniach témy v možnostiach Rozloženie obsahu treba to nastaviť na 100% Plná šírka, ako aj vypnúť okraje a kliknúť na Upravte pomocou Elementor.
Keď sa v Elementore otvorí editor stránky, začneme vytvárať stránku. Začneme pridaním nadpisu, ktorý naštylizujeme pod možnosť štýl, zmenou jeho farby, veľkosti písma a všetkého ostatného podľa želania, pridaním medzier a textového editora a získaním nadpisovej časti, ktorú si môžeme uložiť ako šablónu a momentálne vyzerá ako na obrázku nižšie.
Keď to urobíme, je čas začať pridávať prvky WooCommerce. Poďme nájsť kód prvku. Woo produkty prvok a pridajte ho na stránku. Štandardne sú v 4 stĺpcoch 4 produkty a budeme to meniť podľa toho, koľko produktov máme a koľko stĺpcov (možno nastaviť od 1 do 6) chceme.
Aby sme nastavili, ktoré produkty chceme zobrazovať ako posledné, meníme veci pod voľbou Obsah, v práci Dopyt. Posledné produkty si môžeme vybrať štandardne alebo ich vybrať ručne, potom si môžeme vybrať pod autorom, v tomto príklade konkrétne preto, že ide o hudbu, ale autorom môže byť napríklad producent. potom podľa kategórií produktov, podľa tagov, podľa filtrov a podobne. Je len na vás, čo si vyberiete. Pod možnosťou Pokročilé môžete zmeniť okraje, medzery, pozadie, okraje a ďalšie.
Keď to urobíme, uložíme stránku a prejdeme na ovládací panel. V plugine WooCommerce vytvárame produkty a nastavujeme kategórie, cenu, tagy a či sú oddelené alebo nie.
Kliknutím na hviezdičky si zvolíme, že produkt bude zvýraznený a ak máme v sekcii nastavené zobrazovanie zvýraznených produktov, zobrazia sa všetky produkty, ktorým sme aktivovali hviezdičku.
Ďalšia vec, ktorú vytvoríme, je nová 2-stĺpcová sekcia. Vybrané produkty oddelíme od ostatných a urobíme takzvanú Call To Action sekciu. Do jedného stĺpca pridáme obrázok a do druhého text. Do jedného stĺpca pridáme obrázok kódu možnosti štýl, ale keď ho pridáme, nezobrazí sa. Aby sme to vyriešili, pridáme do stĺpca nový prvok Rozperkaalebo medzerníkom. Keď sme to urobili, obrázok sa zobrazil, aby sme ho mohli vidieť celý alebo koľko chceme, je potrebné upraviť rozmery Spaseru a obrázok sa roztiahne. Potom stĺpec opäť vyberieme a naštylizujeme, ako bude obrázok vyzerať. Do druhého stĺpca pridáme nadpis, text a tlačidlo, ktoré ľudí vyzve k akcii. Samozrejme naštylizujeme aj tento stĺpec, zmeníme farbu, písmená, veľkosť písma, medzery, okraje, pozadie a iné podľa želania pod voľbou štýl.
Potom, čo sme vytvorili sekciu CTA (Call To Action), ďalšia vec, ktorú vytvoríme, je sekcia predaja. Aby sme si uľahčili prácu, pridáme už uloženú šablónu nadpisovej časti, ktorú sme vytvorili na začiatku textu a len ju zmeníme, aby neboli rovnaké. Následne pridáme element Woo Products a nastavíme, ktoré produkty chceme v danej sekcii zobrazovať. Zmeňme, čo je potrebné pod voľbou Dopyt ako v predchádzajúcom čase a získajme sekciu ako na obrázku nižšie.
Ak chceme zmeniť tlačidlo Pridať do košíka tak, aby lepšie ladilo so zvyškom stránky, musíme prejsť na ovládací panel, potom na Prispôsobiť a klikneme na stránku nášho obchodu a potom na možnosť Vlastné CSS/JS. Tam napíšeme krátky CSS kód na úpravu tlačidiel zacielením na konkrétne značky WooCommerce ako napr pouličné produkty a li.produkta použite ich na úpravu tlačidiel.
