Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WooCommerce
Code

Paano Magkabit at Magtayo ng Bagong WooCommerce na Tema sa WordPress

by
Difficulty:BeginnerLength:LongLanguages:

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Ang WooCommerce ang pinaka sikat at "maaaring ipasadyang eCommerce na plataporma para sa pagbuo ng sariling negosyo". Maaaring i-download nang libre ang WooCommerce, ngunit makikita lamang ang kakayahan nito pag nagsimulang gamitin ang WordPress WooCommerce plugins at mga tema. 

Ngunit kailangan ba talagang gamitin ang WooCommerce na tema?

Habang hindi ito estriktong pangangailangan, lubos itong rinerekomenda.

Hindi lamang nakasentro sa e-Commerce ang disenyo ng mga WooCommerce na tema, ang buong tema ay nakasentro rin sa mga WooCommerce na estilo. Ang CSS na ginagamit ng WooCommerce para ipakita ang mga produkto ay ginagamit din ng WordPress WooCommerce na tema upang pagsama-samahin lahat, para sa paglikha ng pinaka magagandang pagkadisenyo na mga eCommerce storefront.

Hindi pa nababanggit na ang pagkabit at pagtayo ng bagong WordPress WooCommerce na tema ay hindi mas mahirap sa pagtayo ng iba pang mga tema sa WordPress.

Aking ipapakita paano gawin ito.

Paano Magkabit at Magtayo ng Bagong WordPress WooCommerce na Tema

Kung mayroon nang nakakabit ng WooCommerce, mabuti iyon! Kung hindi, rinerekomenda ko ang Beginner’s Guide to Using WooCommerce ni Rachel McCollin. Ipakikila nito ang WooCommerce at ipapakita sa iyo lahat ng hakbang na kailangan upang masimulan ang iyong online storefront.

Ngayon ay ating simulan paano magkabit at magtayo ng bagong WordPress WooCommerce na tema.

Hakbang 1: Magkabit ng Dummy Data

Kung nadagdag na ang mga produkto sa WooCommerce, rinerekomenda ko na dumiretso na sa ikalawang hakbang 2.

Ang pagkabit ng dummy data ay naglalagay ng piksyonal na mga produkto sa iyong storefront upang matulungan kang makita ano ang itsura ng iyong store nang may mga produkto. Matapos kumpletuhin ang pagkabit at pagtayo ng iyong WordPress WooCommerce na tema, tatanggalin lahat ng dummy data bago ilagay ang iyong mga produkto. Kung hindi ay maaaring matanggal ang mga data ng produkto nang hindi sinasadya.

Ang dummy data ay kasama ng iyong WooCommerce plugin. Kung iyong nakabit ang WooCommerce sa loob ng WordPress Admin, i-download ang plugin mula sa WordPress Plugin Directory sa iyong computer. Magiging mas madali ito kaysa sa pag-log-in sa iyong FTP, pagpunta sa plugin directory, at pag-download ng dummy data mula doon.

Pag kumpleto na ang download, i-unzipo ang file para handa nang i-import ang dummy-data.xml na file. 

Pumunta sa Tools and pindutin ang Import:

How to Install and Setup a New WordPress WooCommerce Theme

Huwag malito sa "WooCommerce Tax Rates (CSV)". Maaring mamaya nang gawin ito kung iyong gusto.  Para sa WooCommerce Dummy Data, gugustuhin mong gamitin ang WordPress.

How to Install and Setup a New WordPress WooCommerce Theme

Malamang ay wala kang nakakabit na WordPress Importer plugin, kaya pindutin na ang Install Now

How to Install and Setup a New WordPress WooCommerce Theme

Pag nakakabit na, pindutin na ang Activate Plugin & Run Importer.

Naaalala mo ba kung saan na-download at na-unzip ang WooCommerce na plugin? Mabuti! Ngayon ay pindutin ang Choose File at hanapin ito.

How to Install and Setup a New WordPress WooCommerce Theme

Dapat ay nasa unzipped na folder ang iyong dummy data: (woocommerce.version.number) > woocommerce > dummy-data.

How to Install and Setup a New WordPress WooCommerce Theme

Buksan ang dummy-data na folder, piliin ang dummy-data.xml, at handa nang i-upload at i-import ang file.

Ito ang huling kailangang gawin bago i-import lahat ng dummy data.

Ang ilan dito ay personal na kagustuhan, ngunit ito ang aking ginagawa (screenshot sa ibaba):

I-import ang awtomatikong nakatalagang may-akda na "wooteam" imbis na lumikha ng bagong may-akda o gumamit ng mayroon nang may-akda. Sa ganitong paraan ay alam kung ano ang nilalaman na nilikha/na-import sa proseso na ito base sa pangalan ng may-akda (nirerekomenda kong tanggalin ang may-akda pag inalis na ang dummy data matapos ng pagkabit at pagtayo ng iyong WordPress WooCommerce na tema).

Rinerekomenda ko ring i-download at i-import ang mga attachment upang mayroong mga imahe na nakakabit sa bawat produkto (muli, magandang siguraduhin na ang midya ay natanggal na pag tapos na sa dummy data).

Pag nagawa na ang mga seleksyon, isumite:

How to Install and Setup a New WordPress WooCommerce Theme

Bisitahin ang yourwebsite.com/shop/ upang makakita ng halimba ng store na buo nang na-import:

How to Install and Setup a New WordPress WooCommerce Theme

Ayan! Nagawa mo na!

Hindi masyadongg maganda ang pagkakadisenyo, hindi ba? Mabuti na lang at tayo ay maglalagay ng magandang WordPress WooCommerce na tema gaya ng Savoy.

(TANDA: Matapos ikabit ang iyong tema, huwag kalimutang tanggalin ang mga prdodukto at imahe mula sa dummy data import bago simulan ang pagdagdag ng iyong mga produkto.)

Hakbang 2: Magkabit ng WordPress WooCommerce na Tema

Ngayon, tignan natin kung paano WooCommerce na tema. Kung hindi pa nai-download ang iyong WordPress Commerce na tema, i-download na ito sa iyong computer (siguraduhing alam kung saan linagay ang download upang madaling puntahan).

Mayroong dalawang paraan kung paano i-install ang iyong tema: 

  1. Buksan ang iyong websit gamit ang FTP
  2. Mula sa WordPress Admin

FTP ang Iyong Tema

Kung ikaw ay komportable gamit ang FTP, ikonekta ang iyong server at pumunta sa wp-content > themes directory. Dito mo gustong dalhin ang iyong mga tema.  Bago ipadala ang iyong unzipped na folder sa server, siguraduhing ipinapadala ang iyong tema. Tignan nang mas malapit sa paggamit ng mga halimbawa ng WordPress na tema mula sa ThemeForest.

Matapos ng pag-unzip ng iyong download, makikita na may iba’t ibang mga folder:

How to Install and Setup a New WordPress WooCommerce Theme

Hindi lahat ng ma-do-download na teama ay ganito ang pagkakaayos. Minsan ang zipped na folder na na-do-download  ay ang aktwal na folder ng tema. Laging magandang ideya na tignan nang paulit-ulit dahil nag-iiba ito depende sa lugar. 

Ang Savoy - Minimalist AJAX WooCommerce na Tema ay mayroong dagdag na kasama gaya ng dokumentasyon, mga asset, at iba pa.  Makikita ang iyong teama sa loob ng Theme Files folder para sa Savoy (savoy.zip).

Kung kinakabit gamit ng FTP, i-upload ang iyong unzipped na foler ng tema (halimbawa: "savoy") sa directory ng mga tema. Kung hindi sigurado sa paggamit ng FTP o mas gustong magkabit mula sa WodPress Admin, pwede rin iyon.  May gusto ko ring ginagamit ang WordPress Admin.

Mula sa WordPress Admin

Nangangailangan na ang folder ng tema ay naka-zip para i-install ang WordPress na tema mula sa Admin. (themefolder.zip). Tulad ng napag-usapan na, nais siguraduhin na ginagamit ang aktwal na folder ng tema at hindi ang folder kung saan orihinal na nakalagay. 

Mula sa WordPress Admin, sa Appearance, pindutin ang Tema:

How to Install and Setup a New WordPress WooCommerce Theme

Magdagdag ng bagong tema: 

How to Install and Setup a New WordPress WooCommerce Theme

I-upload ang tema:

Naaalala ba kung saan nakalagay ang zip file ng iyong tema?

(Ang halimbawang tema ay pinamagatang: savoy.zip)

Pindutin ang Choose File at puntahan ito:

Pag nakakabit na, maaaring bisitahin ang Appearance > Tema sa iyong WordPress Admin upang makita kung nakakabit na o pindutin upang maging aktibo agad.

Tulad ng makikita sa ibaba, ang tema na Savoy ay matagumpay na na-install at nagawang aktibo, kaya idaan ay iyong mouse at i-Activate:

How to Install and Setup a New WordPress WooCommerce Theme

Ngayon na ang iyong WordPress WooCommerce na tema ay nakabit na’t nagawang aktibo, itayo na natin ito.

Hakbang 3: Magtayo ng WordPress WooCommerce na Tema

Hindi parepareho ang pagkakaayos ng lahat ng tema.  Kung paano binubuo at dinidisenyo ang isang tema ay isang malaking salik, kaya maaaring mayroong mga pinagkaiba sa pagitan ng tutoryal na ito at ang iyong ikinakaharap. Sa pangkalahatan, dapat ay matulungan ka nitong itayo ang iyong WordPress WooCommerce na tema kahit ano pang WooCommerce na tema ang iyong ginagamit mula sa ThemeForest o kung saan pa man.

Rinerekomenda/Kinakailangan na mga Plugin

Matapos ikabit at gawing aktibo ang Savoy na tema, ikaw ay mabibigyan ng notipikasyon ng mga rinekomendang plugin: 

How to Install and Setup a New WordPress WooCommerce Theme

Minsan ang iyong tema ay magbibigay ng notipikasyon ng mga rinerekomendang mga plugin habang ang iba ang naglalagay ng mga rekomendasyon sa kanilang dokumentasyon. Mayroong mga elemento ng pagdisenyo ng tema gaya ng mga optional na slider na hindi kasama sa tema ngunit maaring magayan.

Pindutin ang Begin upang makabit ang mga plugin sa Savoy na tema para makita ang listahan ng mga rinerekomenda na plugin.

How to Install and Setup a New WordPress WooCommerce Theme

Muli, mag-iiba ito depende sa tema, ngunit sa kaso na ito, maaaring ikabit lahat.

Halimbawa, kahit na rinerekomenda ng Savoy ang Contact Form 7 at maaaring iestilo, maaari ring hindi gamitin ang plugin na ito para sa iyong contact form. Maaaring gustong gumamit ng kagaya ng Gravity Forms o Ninja Forms.

Ang isang plugin gaya ng Renegad Thumbnails ay isang mahusay na plugin para sa mga mayroon nang nakatayo na store at mayroon nang mga imahe na nakaayos mula sa naraang tema.  Ang plugin na ito ay dadaan sa WordPress Media Library at babaguhin ang laki ng iyong mga imahe para umayon sa bagong tema. Maaaring hindi gustuhin na gamitin ito kasama ng dummy data, at maaaring gustuhin ding huwag nang gamitin ang plugin na ito (ngunit irerekomenda kong gawin pa rin, upang tama ang laki ng mga midya para sa mga pagsusuri).

Ang plugin gaya ng Envato Toolkit ay mahalaga para sa mga tema na binili gamit ng ThemeForest, naninigurado na mayroon kang mga notipikasyon ng mga updates sa tema.

Rinerekomenda na ikabit lahat ng rinekomendang mga plugin pagkasimula. Maaari naman tanggalin ang mga plugin na hindi kailangan, kumpara sa kung hindi nakabit ang plugin na kailangan, maaari lang mainis sapagkat hindi "gumagana" ang tema o may hindi ginagawa na nagustuhan sa demo.

Pag nakabit na lahat, ilan, o wala sa mga narekomenda at/o kailangan na mga plugin, huwag kalimutang gawin aktibo:

How to Install and Setup a New WordPress WooCommerce Theme

Kung gumagamit ng tema na binili mula sa ThemeForest, gaya ng halimbawang tema na Savoy, huwag kalimutang ilagay ang iyong Marketplace Username at Secret API Key sa Envato WordPress Toolkit  ipang sigurado na makatatanggap ng mga update sa iyong tema. 

Gawing Sarili

Ito ang parte ng pagkabit at pagtayo ng iyong WordPress WooCommerce na tema na nakatutuwa at nagsisimula nang magkaron ng buhay ang iyong website. 

Maaaring buksan ang WordPress Customizer mula sa menu sa WordPress: Appearance> Customize. O pumunta sa Themes na pahina sa Appearance > Themes at pindutin ang Customize:

How to Install and Setup a New WordPress WooCommerce Theme

Nandito ka na sa WordPress Customizer:

How to Install and Setup a New WordPress WooCommerce Theme

Gagawa muna tayo ng ilang mga pagbabago bago dumating sa mas malalalim na konpigurasyon.

Ang unang makikita ay Site Identity.  Maaaring palitan dito ang iyong Site Title at Tagline.

How to Install and Setup a New WordPress WooCommerce Theme

Minsan ay maaari ring magdagdag ng sariling headerimage at/o Site Icon (mag-iiba ito depende sa tema).

Sunod ay ayusin ang iyong mga menu:

How to Install and Setup a New WordPress WooCommerce Theme

Kung ito ay bagong-tayo na WooCommerce o hindi pa nakalilikha ng mga pahina, hindi pa marami ang maaaring "ipasadya". Nang nakakabit ang WooCommerce, awtomatikong magdaragdag ng mga pahina na siguradong nais madagdag agad sa iyong menu.

Madaling lumikha at magdagdag ng bagong menu:

How to Install and Setup a New WordPress WooCommerce ThemeHow to Install and Setup a New WordPress WooCommerce Theme

Pag nakadagdag na ng menu, maaaring piliin kung saan mo ito nais lumabas, pati na rin ang ibang mga item (gaya ng sariling mga link, post, pahina, produkto, at iba pa).

How to Install and Setup a New WordPress WooCommerce Theme

Nagbibigay ito ng pagkakataon na iangkop ang iyong WooCommerce site sa kung paano gustong paganahin.  Huwag matakot na paglaruan o baguhin ito. 

Bago umalis sa WordPress Customizer, sabihin sa WordPress na gawing pangunahing pahina ang iyong store: 

How to Install and Setup a New WordPress WooCommerce Theme

Markahan ang mga display sa Front page bilang Static page at piliin ang Front page para maging Shop page. Ang Shope na pahina ay awtomatikong linikha noong kinabit ang WooComemrce plugin.

Para sa Posts na pahina,  depende ito kung gusto mo o hindi ng blog sa iyong WooCommerce site. Kung oo, kailangang lumikha ng blog na pahina at piliin iyon sa pahinang ito ng WordPress Customizer o sa WordPress Admin Settings > Reading.

Ang mga Resulta

Gamit ng pinakamababang pagkonpigurasyon, maaaring makita kung gaano kaganda ang iyong store gamit ng WordPress WooCommerce na tema:

How to Install and Setup a New WordPress WooCommerce Theme

Maganda ang kinalabasan ng mga indibidwal na pahina ng mga produkto: 

How to Install and Setup a New WordPress WooCommerce Theme

Mayroon din itong mga produktong may relasyon:

How to Install and Setup a New WordPress WooCommerce Theme

Ang Savoy - Minimalist AJAX WooCommerce na Tema ay maaaring gamitin upang linangin ang mga elemento sa iyong site at malayo na ang mararating kumpara sa mga nabigyang diin sa tutorial na ito (siguraduhing babasahin ang dokumentasyon ng iyong tema upang mas marami pang matutunan tungkol dito). Ipinakita ko lamang ang mga pagbabagong maaaring gawin sa WordPress Customizer at maaaring gawin sa kahit anong tema na iyong ginagamit. 

Konklusyon

Makikita kung gaano kadali ang unang mga hakbang na ito sa pagkonpigura ng iyong bagong WordPress WooCommerce na tema at kung gaano ito kaganda sa paggamit lamang ng WordPress na temang dinesenyo para talaga sa WooCommerce.

Maraming WordPress WooCommerce plugin na kapaki-pakinabang na maaaring makita sa CodeCanyon at ilang maganda ang pagkakadisenyo at epektibong WordPress WooCommerce na tema sa ThemeForest.

Ang pagtingin sa mga mabebentang ThemeForest WooCommerce na tema ay magandang lugar na pagsimulan (Savoy pa rin ang aking paborito). Siguradong makahahanap ng perpektong tutugma sa iyong eCommerce store. O tignan ang mga itinatampok na tema upang makita ang tama para sa iyong store:

Ano ang Ibinebenta Gamit ng WooCommerce?

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.