Congratulations! You are enrolled in this tutorial!

"Tutorial - WordPress & Elementor Page Builder."

Belajar cara untuk mengendalikan sendiri lamanweb anda!

+ Pengenalan

WORDPRESS: WordPress adalah open source software untuk mencipta laman web secara online secara PHP. Sistem yang paling mudah dan blog paling berkuasa dari segi pengurusan kandungan laman web (CMS). Tanpa log in ke wordpress, anda tidak boleh mengubah isi kandungan website, warna, layout web, gambar dan sebagaimana yang anda nak.
Untuk memudahkan pemahamam anda, wordpress seperti facebook. Anda kena log in terlebih dahulu untuk update content, gambar dan sebagainya.

ELEMENTOR PAGE BUILDER: Elementor Page Builder adalah “add on plug-in” di dalam wordpress untuk membina website secara live preview page, tanpa coding, mudah untuk digunakan, percuma (open source) dan cepat. Tanpa wordpress anda tidak dapat menggunakan Elementor ini. Senang cerita, Elementor adalah orang tengah untuk mencantikkan website anda. Worpress adalah rumah anda dan elementor adalah “profesional interior designer” (orang tengah) yang ditugaskan untuk menggunakan segala kepakaran dalam menjadikan website (rumah / bilik) lebih powerful dan menarik! Kerana wordpress hanya menyediakan basic layout sahaja.

+ Section 1: Start Here (WordPress)

  1. www.ckatstudio/admin

  2. 1. Search nama domain anda (www.ckatstudio.com) dan /admin = www.ckatstudio.com/admin
  3. 2. Masukkan username dan password website anda

  5. Dashboard

  6. 4. Anda akan nampak layout Dashboard website anda seperti dibawah ini. Disebelah kiri ada pelbagai tools dan fungsinya yang boleh ditukar mengikut citarasa anda.

  8. Tools asas yang anda perlu tahu di Dashboard

    Post:  Digunakan untuk website style blog yang mempunyai pelbagai jenis artikel penulisan contohnya ohmedia dan rotikaya.

  9. Media: Untuk simpanan gambar-gambar yang kita upload ke dalam lamanweb kita
  10. Pages: Digunakan untuk buat content pages di website contohnya yang anda selalu lihat pada menu website about us, produk, hubungi, pembayaran dan sebagainya. (anda akan bermain disini selalu)
  11. Appearance: Digunakan untuk setting appearance website kita contohnya warna, theme, widget, menus, background & sebagainya (make-up room).
  12. Plugins: Anda boleh add on plug in untuk membuatkan lamanweb anda lebih powerful. Plug in adalah software tambahan supaya lamanweb anda multifunctional contohnya plug in form untuk collect order produk.
  13. Settings: Digunakan untuk menukar settings lamanweb anda.

 

  1. Perhatian: Pastikan anda backup dan tahu apa yang anda sedang lakukan. Tanpa pengetahuan yang betul. Anda boleh merosakkan lamanweb anda sendiri.

  1. Add New Page 

  2. 1. Gerakkan cursor (mouse) pada menu Pages dan kemudian klik pada Add New.


  4. 2. Anda akan lihat bahagian editor seperti berikut iaitu tempat untuk anda memasukkan maklumat (content) website seperti ayat, gambar, video dan sebagainya.


  6. Nama Page

    3. Masukkan nama page (nama page yang dicreate secara automatik menjadi link url dibelakang seperti www.ckatstudio.com/pembayaran-mockup). Ini untuk membezakan content page yang lain, home & sebagainya

  3. Publish

  4. 4. Page Layout: Full width
  5. Template: Elementor Fullwidth Blank
  6. Tekan PUBLISH


  8. Edit With Elementor

  9. 5. Klik “Edit With Elementor” untuk menggunakankannya untuk laman page anda


  11. Perhatian: Sekiranya anda ingin edit page yang sedia ada tanpa create nama page baru. Cuma klik “EDIT WITH ELEMENTOR”
    Nota:     Ulangi proses ini untuk laman page yang lain

  1. All Pages

  2. 1. Gerakkan cursor (mouse) pada menu Pages dan kemudian klik pada All Pages.


  4. 2. Anda akan lihat list pages yang anda sudah publish. Pergi ke pages yang ingin diedit dan klik Edit With Elementor

  7. Nota: Anda akan dibawa ke page yang sedia ada. Sila rujuk Section 2 untuk info lanjut

     

+ Section 2: (Elementor Page Builder)

  1. 1. Selepas klik Edit With Elementor. Anda akan nampak layout seperti ini dan klik “ADD NEW SECTION” untuk start develop page from scratch. Kelebihan daripada 0 scratch adalah anda mempunyai kuasa veto untuk designkan layout web tanpa template yang sedia ada kerana layout template theme agak terhad

  3. Select Your Structure:

    2.  Klik 1 kotak. Structure ini adalah layout kotak yang anda akan gunakan. Contoh 1 kotak, 2 kotak, 3 kotak dan etc.

  4. Nota: 1 kotak akan membuatkan layout content anda secara menegak sahaja, melainkan 2 kotak kerana ada kiri dan kanan bahagian serta tidak akan menganggu kotak yang lain serta sebagainya

  1. Maksud Section & Columns

  2. 1. Section dan column adalah ruangan untuk drag & drop elements widget contohnya text editor widget, image box widget, video dan sebagainya. Penting untuk anda memahami kerana disetiap column & section akan mengandungi elements widget berfungsi untuk isikandungan website anda.
  3. 2. Setiap kotak layout ada Section. Section ibarat rumah dan di dalamnya ada columns yang dipanggil bilik. Fungsi Sections dan Columns adalah sama. Cuma didalam section mempunyai column

  4. Edit Column & Section 

  1. Di tab column mempunyai tab duplicate isi column, tambah empty column & delete column.

  1. Drag & Down Elements Widget

  2. Untuk edit columns atau sections sila klik icon 9 petak kecil diatas (Ikon Elements Widget) serta drag & drop element widget di cursor pada ruangan section.
  3. Anda boleh menggunakan pelbagai elements widget yang ada untuk isi kandungan page anda. Contohnya text, image, video, button dan banyak lagi
  6. NOTA: Sekiranya ingin fully edit columns & section sila lihat video dibawah untuk rujukan.

Sections & Columns - How To Use

+ Level 1: Beginner

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

+ Level 2: Moderate

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

+ Level 3: Advanced

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

+ Section 3: Heading & Text

  1. Heading Widget



  3. 1. Selepas drag & drop element heading widget ke dalam section. Sila tulis nama text heading yang anda mahu (Pembayaran)
  4. 2. Disebelah kiri akan ada layout Edit Heading. Heading widget sesuai untuk title artikel dan text editor widget lebih kepada content artikel. Anda boleh customise text, warna, size dan sebagainya. Terdapat 3 columns widget untuk customise iaitu content, style & advanced :



  1. Content: Berfungsi menulis text title, size atau aligment text.
  2. Style: Berfungsi mempelbagaikan style tulisan. Tapi pastikan anda klik ON di Typography terlebih dahulu untuk access kesemua fungsi seperti text color, size, weight, transform, style & line height

  4. Advanced: Berfungsi untuk mempelbagaikan lagi fungsi yang ada seperti margin style (adjust position text), animation, customise background & border, responsive dan sebagainya.



  6. Text Editor Widget

  8. 3. Drag & drop element Text Editor widget ke dalam section dibawah heading Pembayaran.

  10. 4. Taipkan ayat di ruangan Edit Text Editor di bahagian Content dan gunakan fungsi yang ada untuk ubahsuai ayat anda. (Fungsi-fungsi yang lain adalah sama seperti didalam Microsoft Word). Add media sekiranya ingin memasukkan image.  Terdapat 3 columns widget untuk customise iaitu content, style (Typography : ON) & advanced



  11. Perhatian: Pastikan anda save setiap kali anda berpuas hati untuk memastikan hasil kerja anda tidak akan hilang.
  12. NOTA: Sekiranya ingin fully edit text editor dan cara customise. Sila lihat video dibawah untuk rujukan.

Heading Widget - How To Use

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Text Editor Widget - How To Use

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

+ Section 4: Image & Element Widget Tools

  1. 1. Selepas drag & drop element widget heading ke dalam section dan tulis text heading (pembayaran). 
  2. 2. Sila klik ikon 9 petak kecil – Ikon widget (Elements Tools: Layout pelbagai elements widget seperti heading text, image & sebagainya)

  5. 3. Drag & drop elements widget columns dibawah heading pembayaran sehingga line biru kelihatan dibawah heading. (2 kotak untuk memuatkan 2 images)
  6. 4. Drag & drop elements widget image pula ke dalam columns pertama
     

  9. Choose Image

  1. 5. Pilih image melalui simpanan image gallery anda. Seperti biasa anda boleh pelbagaikan variasi melalui 3 columns tab untuk customise iaitu content, style & advanced. Anda perlu try & error dan belajar customise mengikut citarasa anda
  4. 6. Media Gallery ->pilih image -> Insert Media (upload files sekiranya ingin upload image dari laptop)
  6. 7. Kurangkan size image melalui tab style
  8. 8. Lakukan proses yang sama untuk columns image sebelah kanan pula. 

  9. Menukar Image

  10. 9. Klik pada image sedia ada -> content tab -> choose image (proses yang sama di step 5 dan seterusnya)

 

  1. Perhatian: Pastikan anda save setiap kali anda berpuas hati untuk memastikan hasil kerja anda tidak akan hilang. 
  2. NOTA: Sekiranya ingin fully edit image box widget dan cara customise. Sila lihat video dibawah untuk rujukan.

Image Box Widget - How To Use

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Image Gallery Widget - How To Use

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Image Carousel Widget - How To Use

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

  1. 1. Selepas drag & drop element widget heading ke dalam section dan tulis text heading (pembayaran). 
  2. 2. Sila klik ikon 9 petak kecil – Ikon widget (Elements Tools: Layout pelbagai elements widget seperti heading text, image & sebagainya)

  5. 3. Drag & drop elements widget columns dibawah heading pembayaran sehingga line biru kelihatan dibawah heading. (2 kotak untuk memuatkan 2 images)

  6. 4. Drag & drop elements widget image pula ke dalam columns pertama 

  9. Choose Image

  1. 5. Pilih image melalui simpanan image gallery anda. Seperti biasa anda boleh pelbagaikan variasi melalui 3 columns tab untuk customise iaitu content, style & advanced. Anda perlu try & error dan belajar customise mengikut citarasa anda
  4. 6. Media Gallery ->pilih image -> Insert Media (upload files sekiranya ingin upload image dari laptop)
  6. 7. Kurangkan size image melalui tab style
  8. 8. Lakukan proses yang sama untuk columns image sebelah kanan pula. 

  9. Menukar Image

  10. 9. Klik pada image sedia ada -> content tab -> choose image (proses yang sama di step 5 dan seterusnya)

 

  1. Perhatian: Pastikan anda save setiap kali anda berpuas hati untuk memastikan hasil kerja anda tidak akan hilang. 
  2. NOTA: Sekiranya ingin fully edit image box widget dan cara customise. Sila lihat video dibawah untuk rujukan.

+ Section 4: List of Other Widgets

columns
counter
sosial
progress
shortcode
menu achor
testimonial
icon list
image carousel
image gallery
image box
icon box
button
icon
maps
video
text editor
heading w
Previous
Next

+ How To Use

Video Widget - How To Use

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Maps Widget - How To Use

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Icon List Widget - How To Use

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Icon Widget - How To Use

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Icon Box Widget - How To Use

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Testimonial Widget - How To Use

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Button Widget - How To Use

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Menu Anchor Widget - How To Use

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Shortcode Widget - How To Use

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Progress Bar Widget - How To Use

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Social Icon Widget - How To Use

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Counter Widget- How To Use

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

+ Section 5: List of Other Effects

+ How To Add

Box Shadow - How To Add

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Entrance Animations - How To Add

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Custom CSS - How To Add

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Hover Animations - How To Add

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

+ Section 6: Website Jenis Shopping Cart (WooCommerce)

Di dalam  tutorial WooCommerce ini anda akan belajar setting up kedai online pertama anda hanya dalam masa 30 minit.

Dalam tutorial WooCommerce ini, anda akan belajar:

  • – Kenali Apa itu WooCommerce
    – Senarai dan jual produk anda di dalam website
    – Terima bayaran
    – Manage order dan customer
    – Bagaimana online store anda berfungsi

WOOCOMMERCE: WooCommerce merupakan “add on plug-in” di dalam wordpress dimana ia adalah software khas, sebagai “shopping cart” yang membolehkan anda untuk menjual produk dan perkhidmatan secara online dari laman web anda dan menerima pembayaran secara online.

Pelanggan dibenarkan untuk mengumpul senarai barangan untuk dibeli – sebagai contoh metafora “meletakkan barang-barang di dalam troli membeli-belah”.

Akhirnya, pelanggan dibenarkan untuk “meneruskan ke kaunter” di mana pelanggan boleh memasukkan alamat penghantaran dan pilih kaedah pembayaran untuk melengkapkan transaksi pembelian.

Kelebihan:

E-commerce secara automatik menguruskan proses jualan anda dan hampir semua jenis produk atau perkhidmatan boleh dijual dalam talian seperti barangan fizikal, produk yang boleh didownload (seperti fail audio dan e-buku), tiket event atau kelas, kad hadiah dan lain-lain.

E-commerce sangat mudah untuk pembeli – pembeli kerana online store beroperasi selama 24 jam, senang untuk membuat perbandingan barang, tanpa perlu ke kedai, kemudahan yang segera dan harga yang lebih rendah.

WooCommerce mempunyai beberapa pages khas yang pelbagai fungsi:

  • Shop –  page yang menyenarai kesemua produk yang ada
  • Cart – page yang display senarai produk yang dipilih oleh pembeli
  • My Account – Membenarkan customers menguruskan details mereka dan  track order
  • Checkout – page yang membenarkan pembeli untuk membuat transaksi bayaran dan memasukkan alamat untuk penghantaran

  1. General WooCommerce Settings

  2.  

    1. Selepas log in ke dashboard website (rujukan: section 1). Anda akan nampak WooCommerce section khas disebelah kiri dashboard anda – link terus ke settings yang merangkumi kesemuanya seperti  coupons, currencies and registration – dan juga option untuk menjual product digital.

    Pada WooCommerce skrin option (WooCommerce > Settings) anda akan jumpa WooCommerce settings, termasuk; General, Catalog , Pages, Inventory, Tax, Shipping, Payments Options, Emails dan banyak lagi.


    1. Hit Save Changes
  3. customise. Sila lihat video dibawah untuk rujukan.

Set lokasi anda dan and base currency.

  1. WooCommerce > Settings > General
  2. Di general options pilih country anda (Malaysia) dan currency
  3. Tekan Changes

     

Payments (Pembayaran)

Setelah customer proceed ke “checkout”,  mereka akan disuruh untuk memasukan maklumat penghantaran – dan sila pilih untuk melakukan bayaran seperti:

  • PayPal – Automatik online payments. Sesiapa boleh mendaftar akaun PayPal untuk menyambung ke kad kredit kad, kad debit dan bank akaun secara online
  • Bank Transfer
  • Cheque
  • Cash on Delivery

Senarai Produk

Bagaimana produk anda akan dipamerkan

Add a Product

  •  Products > Add New
  • Add a new product
  • Masukkan tajuk, description & categories

  • Dibawah text editor, anda akan nampak options untuk tukar settings produck. Skrin Option membenarkan anda memilih jenis produk – dan offers options yang berkaitan dengan Inventory, Shipping, Linked Products, Attributes and Advanced.

    • Download gambar dari computer anda.
    • Tambah image sebagai Product Image. *Product image adalah gambar pertama yang dipamerkan dengan produk katalog.
      Add a product image
      Tambah  product image

    • Product gallery mengandungi tambahan gambar untuk pelanggan browse untuk mendapat maklumat jelas tentang produk. Anda boleh masukkan dari media gallery atau dari computer anda ke product gallery (optional)
      Add a product gallery
      Add a product gallery
    • Klik Publish – Untuk pastikan new product available di online store anda
      • Kenali kelas produk anda:
      • Pertama, anda perlu set the product type yang sesuai contonya:-
        . “simple” product adalah basic physical product. “variable” product adalah produk yang mempunyai options (seperti size, colour etc). “virtual” product boleh digunakan sebagai ticket  event or  class membership etc. And “downloadable” adalah produk yang boleh didownload seperti ebook atau audio file.

        Sekiranya “simple” product.
      • Pada General settings tab, SKU (unique product ID), regular price, sales price – dimana boleh set tarikh sales bermula
        Basic product details
        Basic product details

      • Tambah product short description. Scroll kebawah page dan tambah short description – dimana ringkasan summary tentang product yang dipamerkan beserta attributes and product gallery
        .
        Add a short description
        Add a short description

      Options tambahan untuk:

      • recommend similar (“linked) product,
      • assign attributes lain untuk produk (seperti size dan warna)
      • automatik membuat kiraan “shipping” fees
      • dan manage “inventory” anda.

      Upload Image

  • Cara yang senang untuk menambah produk dengan cara duplicate.

    Rujuk topik dibawah – Log in & Katalog Produk Sedia Ada

Beli Produk

Sebelum anda berjinak-jinak dengan new store anda, pertama sekali anda perlu faham bagaimana proses jualan berlaku

Beli produk

Pergi dan purchase satu product (by cheque) dalam store anda…

  1. Dimenu atas cuba cari menu store atau shop untuk view mana-mana produk
    Begin a transaction by viewing a product and adding it to your cart
    Lakukan transaksi dengan view produk dan adding to cart
  2. Dari product page, anda boleh nampak description produk dan sebagainya
    Add a product to your cartAdd a product to your cart

  3. Dari shopping cart page, anda boleh delete items from your cart, adjust kuantiti setiap item, serta infomasi tentang shipping fees etc. Sekiranya anda sudah bersedia proceed untuk purchase, select Proceed to checkout
    When finished browsing, go to the shopping cart
    Selepas selesai browsing, pergi ke shopping cart
  • Dari checkout page, masukkan details anda and select Cheque Payment (optional)
    Complete your transactionComplete your transaction

  • Selepas proses seleseai, anda akan nampak confirmation message dan anda akan menerima some emails dari sistem WooCommerce. Satu emails untuk customer, dan satu email notification untuk store manager (anda). *Anda boleh menukar setting content emails WooCommerce >Settings > Email tab.
Confirmation messageThe Confirmation message you should see after completing the transaction

 

 

Manage Order

Dari WooCommerce > Orders screen, anda boleh add new orders manually, search dan browse orders serta update/edit orders yang baru masuk.

Managing ordersManaging orders

 

Set kan order untuk complete
Ketika anda set status order complete, sistem email akan dihantar untuk memaklumkan pelanggan yang order mereka sudah complete untuk dihantar. 

Hantar customer email
Ini sangat berguna sekiranya anda ingin menghantar  postal tracking number atau ingin discuss some details berkenaan order dengan customer 

  • View the order
View the orderView the order
  • Dari sini anda boleh juga set status dan edit sedikit info. 
Set the order to completeSet the order to complete
  • Tuliskan brief Customer Note – and klik Add.  Ini akan menghantar sends an email notification kepada customer dan updating mereka dengan status order terbaru 

 

The customer is notified of updates to their orderThe customer is notified of updates to their order

CEK DASHBOARD ORDER DAN TRAK ORDER BARU 

ORDER – Untuk dapatkan details order masuk, nama pembeli, berapa item, alamat dan sebagainya.
COUPON – Sekiranya anda ingin memasukkan special kupon.
ORDER ADDRESS LABELS – Anda boleh buat label address order untuk diprint (tampal di alamat penerima)
REPORT – Anda boleh memantau ringkasan report jualan anda berapa keuntungan anda, shipping charged, refund dan sebagainya.

  1. Tambah Produk

  3. 1. Selepas log in ke dashboard website (rujukan: section 1). Klik Products -> Products

  6. 2. Klik Products -> Duplicate. (Method Duplicate sesuai untuk menggunakan details yang sama kecuali nama, warna dan image produk yang berbeza. Hanya menggunakan sedikit info yang sedia ada)

  9. 3. Edit dan tukar details yang mana perlu ditukar sahaja. Seperti nama, permalink, gambar image dan description dibawah

  11. Masukkan Image Produk yang sama tapi berlainan color
  12. Add media -> Pilih image
  14. Left align -> Edit
  16. Masukkan details warna di caption & Alt text -> Align (left) -> Size (Thumbnail) -> Klik Update

  18. Inventory

  19. 4. Scroll ke bawah. Anda akan nampak inventory column. Masukkan SKU nombor (untuk senang track order) -> Manage stock (masukkan total stock) -> Allow but notify customer backorder untuk inform pembeli berapa lagi stock available

  21. Attributes

  1. 5. Adalah penting untuk product yang perlu dipilih melalui size, warna & seangkatannya. Selalu diisi yang produk add new. Kena isikan untuk size: XS | S dan seterusnya. Pastikan berpalang | untuk membezakan size. Begitu juga dengan warna Red | Blue dan seterusnya & klik SAVE
  2. SIZE :
  5. COLOR :
  6. Attributes -> Color -> isikan untuk color: Grey Plain Based mix Dark Grey | Emerald Plain Based mix Soft Yellow | dan seterusnya. Pastikan berpalang | untuk membezakan color -> tick di visible on the product page & used for variation -> Save attributes.

  8. Variations – Letak Description Harga, Harga Sales, Gambar product, Kuantiti Stok & sebagainya 

    6. Untuk masukkan details produk dan dapatkan kesemua variasi size dan color yang dimasukkan.
    Variations -> di Add variation – Klik Create variation from all attributes -> Go
  10. Anda akan nampak layout sebegini. Lebih spesifik jenis size, manage stok khas untuk warna dan size baju. Penting untuk masukkan details baju seperti harga, manage stock (stok produk), sales promo dan sebagainya -> Klik Expand
  12.  -> Pastikan disetiap size & warna yang betul -> Masukkan gambar (warna) -> Klik enabled -> Masukkan harga baju mengikut harga size atau harga sales sekiranya ingin membuat harga promosi (set schedule tarikh sales dari tarikh bila ke bila) -> Klik Manage Stock (Untuk setkan stok yang ada – backorder untuk inform customer stok produk tinggal berapa) harga atau harga sales sekiranya ingin membuat harga promosi (set schedule tarikh sales dari tarikh bila ke bila) -> Masukkan Dimensi product sekiranya perlu atau boleh kosongkan -> Save changes
  14. Lakukan proses ini untuk next size dan variations yang lain sehingga habis.
  16. Set Image Product (Single Image) Main Katalog
  17. Set Image Product -> Add Image Product

 

  1. Set Product Gallery (Galeri image lebih dari satu gambar (untuk pelbagai posisi atau warna) 
  2. Set Product Gallery -> Add product gallery Image 
  1. Masukkan Product Categories & Product Tag

    Product Categories
  2. Product categories penting untuk kelas produk seperti baju untuk baju atau seluar untuk kategori seluar sahaja.
    -> Pastikan tick didalam kategori yang betul contohnya di kategori Muslimah Apparel ada kategori blouse dan + Add New Product Category (Masukkan nama blouse terbaru). -> – Parent Product Category – (Blouse) kerana dalam kategori blouse -> Add New Category.

    Product Tag
  3. Product Tag adalah tag untuk mencari carian seperti hashtag di instagram contohnya tag blouse, baju muslimah dan sebagainya
  4. Product tag -> Tulis tag -> Klik Add
  6. Contoh fungsi Product Categories 
  8. & Product Tag
  10.  
    1. Klik Publish untuk memastikan produk anda available di store.
  1. Perhatian: Pastikan anda save setiap kali anda berpuas hati untuk memastikan hasil kerja anda tidak akan hilang.

  2. REGENERATE THUMBNAIL IMAGE
    Cara ini perlu dilakukan untuk memastikan image katalog di website dalam size yang sama selepas siap di publish.
  3. Tools -> Regen. Thumbnails -> Klik Regenerate (tunggu sehingga siap)

NOTE: ADALAH PENTING MENGGUNAKAN SIZE IMAGE PRODUK YANG SAMA 

  2. NOTE: Upload Image

  4. Cara yang senang untuk menambah produk dengan cara duplicate dan sila rujuk dari arahan paling atas bermula topik tambah produk.

  1. Variations –

  2. Cara mudah masukkan harga atau stock dengan cara bulky. 

  3. Set Harga atau Jumlah Stok

    6. Variations -> Default Form values: (Pilih Size: XS) di Add variation – Klik Set Regular prices (Cara ini akan automatik masukkan harga produk walaupun warna apa sekalipun) -> atau Toggle “Manage Stock” (tambahan)



  5. UNTUK LETAKKAN JUMLAH STOK SECARA LUMPSUM
  6. Variations -> Default Form values: (Pilih Size: XS & Warna) di Add variation – Klik Stock (Cara ini akan automatik masukkan jumlah stok dan jimatkan masa anda untuk spesifik jumlah produk (stok) contohnya warna pink cuma ada stok 8 sahaja & biru cuma tinggal 2 stok sahaja -> Go
  8. -> Masukkan jumlah stok untuk baju warna pink -> Klik OK


  10. Anda boleh cek dengan klik expand dan lihat harga dan stok produk.

MONITOR JUMLAH STOCK YANG ADA

  1. WooCommerce Stock Manager -> Name (nama product) – Di Product Types klik Show Variables (untuk perlbagai jenis warna dan size) -> Manage Stock – Yes -> In stock -> Stock : Masukkan stock anda (anda boleh tambah atau kurangkan stock secara manual disini) -> Back Order Notify (sekiranya mahu) -> Klik Save per satu untuk jumlah total yang dimasukkan -> Save All
  4. NOTA: Anda boleh memantau jumlah stock anda yang tinggal disini untuk spesifik size & warna secara manual & automatik kerana ia link terus kepada total jumlah stok yang dibeli. anda perlu save jumlah satu persatu setiap jumlah yang dimasukkan dan save all di woocommerce stok manager dan refresh beberapa kali untuk link terus ke inventory. 


  6. Anda boleh pastikan dengan klik add to cart untuk pastikan jumlah stok yang dimasukkkan adalah sama 

CARA UNTUK PANTAU STOK - Tutorial

+ Pastikan anda klik Settings untuk tukar Subtitle/CC kepada English (auto generated) untuk memudahkan anda memahami video diatas

Sila layari lamanweb WooCommerce untuk info lanjut:- https://docs.woocommerce.com/document/woocommerce-guided-tour-videos/

Sebarang Pertanyaan Sila Isi Form Di Bawah

Thank You! for using our services =)