Pagsasama ng WooCommerce ng Beaver Builder 2024– Paano Gamitin ang Beaver Builder upang Bumuo ng Mga Pahina ng Produkto at Shop ng WooCommerce?

Maaari itong maging kapana-panabik na lumikha ng isang online na tindahan. Nakakatulong ito sa tagumpay ng iyong negosyo na magkaroon ng magandang storefront. Gayunpaman, kung gusto mong magdisenyo ng isang tindahan na gumagana nang maayos, maaari kang mahihirapan.

Ang isang eCommerce site na parehong nakalulugod sa iyo at sa iyong mga customer ay maaaring gawin sa tulong ng isang WooCommerce page builder. Tingnan natin ang WooCommerce isaksak. Ang aming susunod na hakbang ay upang ipakita kung gaano kadaling gawin ang iyong online na tindahan gamit ang Beaver Builder. Halika, magsimula na tayo!

beaver builder

Isang Maikling Panimula sa WooCommerce

Sa WooCommerce, magagawa mo magdagdag ng eCommerce functionality sa iyong WordPress site upang maibenta mo ang iyong mga produkto online:

Bilang karagdagan, makikita mo ang iyong sarili sa mabuting kumpanya, dahil ang WooCommerce ay inaasahang magkakaroon ng market share na humigit-kumulang 28 porsiyento sa 2020.

Ang WooCommerce ay isang open source, lubos na nako-customize na solusyon, tulad ng WordPress. Gamit ito, maaari kang mag-set up ng mga gateway ng pagbabayad at iba't ibang opsyon sa pagpapadala, at makapagsimula kaagad sa iyong eCommerce empire.

Gamit ang WooCommerce, maaari ka ring lumikha, mag-edit, at pamahalaan ang iyong mga produkto:

Ang paggamit ng mga plugin ng WooCommerce add-on ay nagbibigay sa iyo ng access sa maraming iba pang feature.  

Pagbuo ng WooCommerce Shop at Mga Pahina ng Produkto gamit ang Beaver Builder (Sa 4 na Madaling Hakbang)

Gayunpaman, bago mo makuha ang mga tampok ng WooCommerce, kailangan mo munang ilunsad ang isang website. Magsimula sa pamamagitan ng pag-install at pag-activate ng WooCommerce, Beaver Builder, at Beaver Themer WordPress plugins. Ngayon ay handa ka nang gawin ang iyong mga pahina ng produkto at tindahan.

Hakbang 1: Gawin ang iyong tindahan sa pamamagitan ng pagdaragdag ng mga produkto

Gumawa ng mga listahan para sa iyong mga produkto bilang unang hakbang sa pag-set up ng iyong tindahan. Kapag gumamit ka ng WooCommerce, maaari kang magbenta ng mga pisikal na produkto, digital na produkto, at mga item na may mga pagkakaiba-iba (tulad ng laki at kulay).

Maaari kang mag-install ng sample na set ng produkto na ibinigay ng WooCommerce upang maunawaan kung paano gumagana ang system sa iba't ibang uri ng mga item kung bago ka sa WooCommerce. Ang ilang mga tampok ng produkto ng WooCommerce ay ipinaliwanag dito, kabilang ang mga pagpipilian sa pagkakaiba-iba at pagbebenta.

Matututuhan mo kung paano lumikha ng pangunahing produkto, kung gusto mong magsimula sa simula. Anuman ang plano mong ibenta, ang ibang mga seksyon sa post na ito ay makikinabang sa iyo.

Gumawa ng bagong produkto sa iyong WordPress dashboard. Piliin ang Mga Produkto > Magdagdag ng Bago sa menu sa kaliwa. Punan ang mga sumusunod na field para sa item na gusto mong idagdag sa iyong tindahan:

Maaari mong itakda ang karamihan sa mahahalagang parameter para sa iyong item sa pamamagitan ng pag-scroll pababa sa panel ng Data ng produkto, kabilang ang pagpepresyo, mga buwis, at pagpapadala. Sa WooCommerce, mayroon kang opsyon na isama ang mga buwis at opsyon sa pagpapadala para sa mga produkto, na maaaring ma-override sa isang indibidwal na batayan.

Magpasya kung ang iyong produkto ay nada-download o virtual sa Pangkalahatang mga setting. Panatilihing walang check ang mga kahon kung pisikal ang produkto:

Pati na rin ang pamamahala ng imbentaryo, maaari kang magsimula. Ang pagkonekta ng mga produkto ay nagbibigay sa iyo ng opsyon na mag-cross-sell at up-sell.

Maaari ka ring magdagdag ng pangalawa, mas maikling paglalarawan ng iyong item sa ilalim ng field ng Maikling paglalarawan ng produkto, sa ibaba ng panel ng Data ng produkto. Karaniwang naglalaman ang mga listahan ng storefront ng impormasyong ito.

Makakakita ka ng mga kategorya ng produkto at mga tag sa kanan ng iyong screen. Narito ang ilang kapaki-pakinabang na organizer:

Ang iyong listahan ng produkto ay dapat magsama ng isa o dalawang larawan. Available ang mga sumusunod na opsyon: iisang larawan o grupo ng mga larawan:

Maaari kang mag-upload ng larawan mula sa iyong device o magdagdag ng larawan mula sa iyong Media Library. Sa parehong paraan, maaari kang magdagdag ng mga larawan sa mga gallery ng produkto. Ang mga imahe ay maaari lamang i-drag at i-drop upang muling ayusin ang mga ito.

Hakbang 2: Magdisenyo ng Mga Bagong Pahina ng Produkto

Upang ipakita ang iyong mga produkto, maaari kang lumikha ng mga pahina ng produkto. Ang video tutorial ng Beaver Themer ay nagbibigay ng sunud-sunod na mga tagubilin sa kung paano i-customize ang mga pahina ng solong produkto ng WooCommerce. 

Ang Beaver Themer ay isang mahusay na tool para sa pagpapalawak ng Beaver Builder sa isang WooCommerce page builder. Maaari kang maglapat ng mga template sa iyong buong site gamit ang add-on na ito.  

 I-click ang Mga Layout ng Tema > Magdagdag ng Bago sa Beaver Builder:

Pagdaragdag ng layout ng tema na may mga setting ng produkto upang matulungan itong kumilos bilang tagabuo ng pahina ng WooCommerce.

Dapat may pamagat ang iyong layout. Dapat mong piliin ang iyong layout at i-type bago i-click ang button na Magdagdag ng Themer Layout.

Magpatuloy upang matiyak na ang bagong disenyo ay inilapat sa bawat pahina ng produkto habang nagpapatuloy ka sa susunod na pahina. Sa pangalawang kahon, piliin ang Lahat ng Produkto sa ilalim ng Lokasyon, pagkatapos ay piliin ang Produkto:

Ang tamang mga setting ng layout ng Themer upang magamit ang Beaver Themer bilang isang tagabuo ng pahina ng WooCommerce.

Maaari mong i-edit ang iyong layout gamit ang Beaver Builder pagkatapos i-save ang iyong gawa. Simula sa kanang sulok sa itaas, mag-click sa asul na plus sign. Kapag na-click mo na ang Mga Template, i-click ang Bago:

Ang lokasyon ng template ng produkto ng WooCommerce sa Beaver Thermer.

Palitan ang kasalukuyang layout sa pamamagitan ng pagpili sa Produkto > Palitan ang Umiiral na Layout. Nakalagay na ang ilang kapaki-pakinabang na default, na ginagawang pahina ng produkto ang iyong template:

Default na template ng produkto ng Beaver Builder

Ang pagdaragdag o pag-alis ng mga module ng WooCommerce mula sa iyong pangunahing layout ay posible kapag mayroon ka na nito. Maaaring ma-access ang mga module ng WooCommerce sa pamamagitan ng Mga Module > Mga Module ng Tema > WooCommerce. Bukod sa mga rating ng produkto, paglalarawan, upsell, at marami pang iba, marami kang pagpipilian:

Paggamit ng mga module ng WooCommerce

Habang nag-e-edit ng layout, maaari kang lumipat sa pagtingin sa isa pang produkto sa pamamagitan ng paggamit ng Preview Bilang: tampok sa Beaver Builder:

Pag-preview ng iba't ibang produkto sa Beaver Builder

Gamit ang feature na iyon, maaari mong tingnan kung ano ang hitsura ng bawat isa sa iyong mga produkto kapag tiningnan mo ang mga ito. I-publish ang iyong page ng produkto kapag nasiyahan ka na sa disenyo at mga module na kasama nito. I-istilo na ngayon ang iyong solong pahina ng produkto sa bagong format.

Hakbang 3: Gumawa ng Pahina ng WooCommerce Shop

Oras na para bigyan ang page ng shop ng parehong pagtrato sa iyong mga produkto ng WooCommerce. Ang isang default na layout ng WooCommerce shop ay napaka-simple at hindi masyadong kapana-panabik:

Default na layout ng shop ng WooCommerce

Kapag nagdidisenyo ng iyong pahina ng Shop, ang Beaver Themer ay isang mas mahusay na pagpipilian. Magsimula sa pamamagitan ng pagpunta sa WooCommerce > Mga Setting, pag-click sa tab ng produkto, at pagtiyak na ang pahina ng Shop ay tumuturo sa Shop o anumang iba pang custom na pahina na iyong ginawa. Ipinapakita nito ang iyong mga produkto bilang isang pahina ng archive kung tumukoy ka ng isa.

Piliin ang Themer Layouts > Add New in Beaver Builder > Theme Builder at pagkatapos ay i-click ang Add New. Piliin ang pagpipiliang Layout ng Tema sa ilalim ng Uri sa susunod na screen:

Paglikha ng layout ng pahina ng shop

Ang sumusunod na screen ay magbibigay-daan sa iyong piliin ang lokasyon ng Product Archive. Ang mga produkto ng iyong tindahan ay ipapakita sa pahina ng Shop at mga pahina ng kategorya ng produkto. Kung kinakailangan, maaari mo itong baguhin.

Pag-customize sa page ng archive ng produkto

Sa pamamagitan ng pag-click sa Ilunsad ang Beaver Builder, magagawa mong i-customize ang iyong layout. Lalabas ang sumusunod na page kapag na-click mo ang plus sign sa tuktok ng screen at pagkatapos ay i-click ang Mga Template:

Paggamit ng template ng Beaver Builder

Ang isang bagong pahina ng tindahan ay madaling magawa gamit ang template ng Mga Produkto. Gamit ang lahat ng tool na tinakpan namin hanggang sa puntong ito, maaari kang gumawa ng mga pagbabago sa template kapag ito ay nagawa na. 

Tiyaking umaangkop ang layout ng iyong tindahan sa mga setting ng istilo ng module ng Posts sa pamamagitan ng pag-tweak sa mga ito hanggang sa magkasya ang mga ito. 

Sa itaas ng screen, i-click ang Tapos na > I-publish kapag na-save na ang mga pagbabago sa module. 

Ang huling bagay na kailangan mong gawin ay tiyakin na anumang page na itinalaga mo bilang page ng iyong Shop ay lalabas sa menu ng nabigasyon ng iyong site. Kung hindi, maaari mo itong idagdag mula sa seksyong Hitsura > Mga Menu ng dashboard ng WordPress.

Hakbang 4: I-customize ang Iyong Pahina ng Tindahan Gamit ang Mga Layout ng WooCommerce

Ang isang WooCommerce module ay isa ring mahusay na tampok ng Beaver Builder na ginagawa itong isang mahusay na tagabuo ng pahina ng WooCommerce. Binibigyang-daan ka nitong magdagdag ng mga bahagi ng functionality ng WooCommerce sa anumang istraktura ng Beaver Builder sa iyong site. Ang mga sumusunod na opsyon ay makukuha sa modyul na ito:

  • Iisa at maramihang mga produkto: 
  • Maaari kang magpakita ng mga napiling produkto batay sa mga ID ng produkto o kategorya, o maaari kang magpakita ng mga produktong ibinebenta, mga kamakailang produkto, mga produktong may pinakamataas na rating, o anumang bagay na gusto mo.
  • Cart: Ipinapakita ang mga nilalaman ng WooCommerce shopping cart.
  • Pag-checkout: Ipinapakita ang pahina ng pag-checkout tulad ng karaniwang lalabas.
  • Pagsubaybay sa Order: Naglalagay ng impormasyon tungkol sa mga order sa form na ito.
  • Aking Account: Ang pahinang ito ay naglalaman ng impormasyong karaniwang makikita sa pahina ng Aking Account, tulad ng impormasyon ng account, mga nakaraang order, at mga detalye ng address
Mga layout ng WooCommerce sa Beaver Builder.

Quick Links

Konklusyon

Ang paggawa ng online na tindahan na epektibong kumakatawan sa iyong brand ay isang mapaghamong pagsisikap. Ang proseso ay maaaring gawing mas madali, gayunpaman, sa tulong ng Beaver Builder, isang plugin para sa WooCommerce.

Gaya ng nakikita mo, binalangkas namin ang apat na mahahalagang hakbang para sa pagbuo ng iyong storefront gamit ang parehong WooCommerce at Beaver Builder:

  1. Gumawa ng tindahan sa pamamagitan ng pagdaragdag ng mga produkto.
  2. Magdisenyo ng bagong page ng produkto.
  3. Gumawa ng bagong pahina ng WooCommerce shop.
  4. Sa mga layout ng WooCommerce, maaari mong higit pang i-customize ang iyong eCommerce site.

Mayroon bang anumang nais mong malaman tungkol sa paggamit ng Beaver Builder upang bumuo ng mga pahina ng produkto at tindahan? Mangyaring ibahagi ang iyong mga saloobin sa ibaba sa seksyon ng komento!

Aishwar Babber

Si Aishwar Babber ay isang masigasig na blogger at isang digital marketer. Mahilig siyang makipag-usap at mag-blog tungkol sa pinakabagong teknolohiya at mga gadget, na nag-uudyok sa kanya na tumakbo GizmoBase. Siya ay kasalukuyang nagsasanay sa kanyang digital marketing, SEO, at SMO na kadalubhasaan bilang isang full-time na marketer sa iba't ibang mga proyekto. Siya ay isang aktibong mamumuhunan sa AffiliateBay at isang direktor sa ImageStation.

Mag-iwan ng komento