U ovom tekstu ćete saznati kako da napravite svoju online prodavnicu uz korišćenje Elementor Pro plugina i Ocean WP teme. Prva stvar koja vam je potrebna je da nadogradite Elementor na Pro verziju, jer on ima sve opcije koje su nam potrebna za kreiranje WooCommerce prodavnice, a takođe vam je potrebna i Ocean WP tema koja je besplatna, kao i WooCommerce plugin.
Online prodavnica – kreiranje
Potrebno je da napravite novu stranicu i nazovete je prodavnica ili kako već želite, u ovom primeru će biti nazvana My Shop, zatim kod podešavanja teme, kod opcije Content Layout je potrebno da podesite na 100% Full Width, kao i da isključite margine i kliknete na Edit with Elementor.
Kada se otvori uređivanje stranice u Elementoru, krećemo sa kreiranjem stranice. Dodajemo za početak naslov, koji stilizujemo pod opcijom Style, tako što mu promenimo boju, veličine slova i sve ostalo po želji, dodajemo razmak i tekst editor i dobijemo sekciju naslova, koju možemo da sačuvamo kao templejt i ona trenutno izgleda kao na slici ispod.
Nakon što smo to uradili, vreme je da počnemo da dodajemo WooCommerce elemente. Pronađemo kod elemenata Woo Products element i dodamo ga na stranicu. Podrazumevano je da stoje 4 proizvoda u 4 kolone, a mi ćemo promeniti u odnosu na to koliko imamo proizvoda i koliko kolona(može se podesiti od 1 do 6) želimo.
Kako bi podesili koje proizvode želimo da prikazujemo kao poslednje, menjamo stvari pod opcijom Content, kod dela Query. Možemo da izaberemo podrazumevano poslednje proizvode ili da ih manuelno izaberemo, zatim možemo birati pod autorom, u ovom primeru konkretno jer je muzika u pitanju, ali autor može biti proizvođač npr. zatim po kategorijama proizvoda, po tagovima, po filterima i slično. Na vama je da odaberete. Pod opcijom Advanced možete da menjate margine, razmake, pozadinu, granice i slično.
Nakon što smo to uradili, sačuvamo stranicu i odemo na kontrolnu tablu. Tamo kod WooCommerce plugina, kreiramo proizvode i podešavamo kategorije, cenu, tagove i da li su izdvojeni ili nisu.
Klikom na zvezdice, izabraćemo da proizvod bude izdvojen i ako smo podesili da se prikazuju izdvojeni proizvodi u sekciji, svi proizvodi kojima smo aktivirali zvezdicu će biti prikazani.
Sledeća stvar koju ćemo napraviti je nova sekcija sa 2 kolone. Razdvojićemo izdvojene proizvode od ostalih i napravit tzv. Call To Action sekciju. U jednu kolonu ćemo dodati sliku a u drugu tekst. U jednu kolonu ćemo dodati sliku kod opcije Style, ali kad je dodamo ona se ne prikazuje. Kako bismo to rešili, dodaćemo u kolonu novi element Spacer, odnosno razmaknicu. Kada smo to uradili slika se prikazala, kako bi podesili da se vidi cela ili koliko već hoćemo, potrebno podesiti dimenzije kod Spaser-a i slika će se proširiti. Zatim ponovo selektujemo kolonu i stilizujemo kako će slika izgledati. U drugoj koloni ćemo dodati naslov, tekst i dugme, pomoću kojih ćemo pozvati ljude na akciju. Naravno, stilizujemo i ovu kolonu, promenićemo boju, slova, veličinu slova, razmake, margine, pozadinu i ostalo po želji pod opcijom Style.
Nakon što smo napravili CTA(Call To Action) sekciju, sledeća stvar koju pravimo je prodajna sekcija. Kako bismo olakšali sebi posao, dodajemo već sačuvan templejt naslovne sekcije, koji smo napravili na početku teksta i samo ga izmeniti da ne budu isti. Dodajemo zatim Woo Products element i podesimo koje proizvode hoćemo da prikažemo u toj sekciji. Izmenimo šta je potrebno pod opcijom Query kao i u prethodni put i dobijemo sekciju kao na slici ispod.
Ako hoćemo da izmenimo Add to basket dugme, da se bolje uklapa sa ostatkom stranice, potrebno je da odemo na kontrolnu tablu, zatim u Customize i kliknemo na stranicu naše prodavnice i nakon toga na opciju Custom CSS/JS. Tu iskucamo kratki CSS kod, kako bismo izmenili dugmad, tako što targetiramo specifične WooCommerce tagove kao što su ul.products i li.product, i pomoću njih stilizujemo dugmad.
