U ovom tekstu ćete naučiti kako da kreirate svoju internet prodavnicu koristeći Elementor Pro dodatak i Ocean WP temu. Prvo što trebate je da nadogradite Elementor na Pro verziju, jer ima sve opcije koje su nam potrebne za kreiranje WooCommerce trgovine, a potrebna vam je i Ocean WP tema koja je besplatna, kao i WooCommerce dodatak.
Internet prodavnica - kreiranje
Morate kreirati novu stranicu i nazvati je shop ili kako god želite, u ovom primjeru će se zvati My Shop, zatim u postavkama teme, u opcijama Izgled sadržaja morate ga postaviti na 100% Puna širina, kao i da isključite margine i kliknete na Uredite pomoću Elementora.
Kada se otvori uređivač stranice u Elementoru, počinjemo kreirati stranicu. Počinjemo dodavanjem naslova, koji stiliziramo pod opcijom Stil, promjenom njegove boje, veličine fonta i svega ostalog po želji, dodavanjem razmaka i uređivača teksta i dobivanjem naslovne sekcije, koju možemo sačuvati kao šablon i trenutno izgleda kao na slici ispod.
Nakon što smo to učinili, vrijeme je da počnemo sa dodavanjem WooCommerce elemenata. Nađimo šifru elementa. Woo Products element i dodajte ga na stranicu. Podrazumevano, postoje 4 proizvoda u 4 kolone, a mi ćemo to promeniti u zavisnosti od toga koliko proizvoda imamo i koliko kolona (mogu se podesiti od 1 do 6) želimo.
Kako bismo postavili koje proizvode želimo prikazati posljednje, mijenjamo stvari pod opcijom Sadržaj, na poslu Upit. Možemo odabrati zadnje proizvode po defaultu ili ih birati ručno, zatim možemo izabrati ispod autora, u ovom primjeru konkretno jer je to muzika, ali autor može biti producent, na primjer. zatim po kategorijama proizvoda, po oznakama, po filterima i slično. Na vama je da odaberete. Pod opcijom Napredno možete promijeniti margine, razmak, pozadinu, ivice i još mnogo toga.
Nakon što smo to uradili, spremamo stranicu i idemo na kontrolni panel. Tamo u dodatku WooCommerce kreiramo proizvode i postavljamo kategorije, cijene, oznake i da li su odvojeni ili ne.
Klikom na zvjezdice biramo da će proizvod biti istaknut i ako smo podesili da se u odjeljku prikazuju istaknuti proizvodi, bit će prikazani svi proizvodi za koje smo aktivirali zvjezdicu.
Sljedeća stvar koju ćemo kreirati je novi odjeljak sa 2 kolone. Odabrane proizvode ćemo izdvojiti od ostalih i napraviti tzv. Call To Action sekciju. U jednu kolonu ćemo dodati sliku, a u drugu tekst. U jednu kolonu ćemo dodati sliku koda opcije Stil, ali kada ga dodamo, ne prikazuje se. Da bismo to riješili, dodaćemo novi element u kolonu Spacer, ili razmaknica. Kada smo to uradili, prikazala se slika, da bismo je postavili da se vidi u celini ili koliko god želimo, potrebno je podesiti dimenzije Spasera i slika će se proširiti. Zatim ponovo biramo kolonu i stilizujemo kako će slika izgledati. U drugu kolonu ćemo dodati naslov, tekst i dugme koje će pozvati ljude na akciju. Naravno, stiliziraćemo i ovu kolonu, promijenit ćemo boju, slova, veličinu fonta, razmake, margine, pozadinu i ostalo po želji pod opcijom Stil.
Nakon što smo kreirali odjeljak CTA (Call To Action), sljedeća stvar koju kreiramo je odjeljak prodaje. Kako bismo nam olakšali rad, dodajemo već sačuvani predložak naslovne sekcije, koji smo kreirali na početku teksta, i samo ga mijenjamo da ne budu isti. Zatim dodajemo element Woo Products i postavljamo koje proizvode želimo prikazati u tom odjeljku. Promenimo šta je potrebno pod opcijom Query kao i prethodni put i dobijemo sekciju kao na slici ispod.
Ako želimo da promenimo dugme Dodaj u korpu, tako da se bolje uklapa sa ostatkom stranice, moramo da odemo na kontrolni panel, a zatim na Prilagodi i kliknemo na stranicu naše trgovine i nakon toga na opciju Prilagođeni CSS/JS. Tamo upisujemo kratak CSS kod da modificiramo dugmad ciljajući specifične WooCommerce oznake kao što su ulični proizvodi i li.product, i koristite ih za stiliziranje dugmadi.
