Contact us
Premium SUS304 304
เปิดบริการทุกวัน 09:00 – 22:00 น.
061-450-1588 | LINE Official
โทรเลย แอดไลน์

Premium WC Categories v4 — คู่มือใช้งานฉบับสมบูรณ์

รวมพารามิเตอร์ทั้งหมด + ตัวอย่างใช้งาน (มีทั้ง Preview: ชอร์ตโค้ดจริง และ Shortcode (Text): แสดงเป็นข้อความด้วยการหลบ [/])

Elementor: ส่วน Preview ในไฟล์ HTML จะไม่รัน ให้คัดลอกชอร์ตโค้ดในกล่อง Preview ไปวางใน Shortcode widget ส่วน “Shortcode (Text)” ใต้ผลลัพธ์ไว้แสดงโค้ดประกอบใน HTML widget.

สารบัญ

1) เริ่มใช้งานด่วน 2) โครงสร้างชอร์ตโค้ด & dom_id 3) พารามิเตอร์: Data Source 4) พารามิเตอร์: Layout & Responsive (มีตัวอย่างโค้ด) 5) พารามิเตอร์: Header (Title/Subtitle/CTA) 6) พารามิเตอร์: Card / Image / Text 7) พารามิเตอร์: ฟอนต์/สีเฉพาะบล็อก 8) พารามิเตอร์: Badges 9) พารามิเตอร์: Language & Debug 10) ชอร์ตโค้ดแต่ละรูปแบบ (Shortcode Variants) 11) ตัวอย่างใช้งาน (Preview + Shortcode) 12) ใช้งานกับ Elementor/Gutenberg 13) แก้ปัญหา

1) เริ่มใช้งานด่วน

หมวดหมู่สินค้า

เลือกดูตามหมวด—งานสแตนเลส 304 ผลิตตามสั่ง

เข้าหน้าร้านค้า
Shortcode (Text)
[premium_wc_categories_v4 include="27,28,29" orderby="include" layout="grid" columns="3" columns_md="2" columns_sm="1" show_header="1" show_name="1" show_bottom_bar="1" thumb_ratio="1:1" thumb_fit="cover" hide_empty="0"]

แนะนำตั้ง dom_id ให้ไม่ซ้ำเมื่อมีหลายบล็อกในหน้าเดียว

2) โครงสร้างชอร์ตโค้ด & dom_id

ชื่อชอร์ตโค้ด
premium_wc_categories_v4
รูปแบบทั่วไป
[premium_wc_categories_v4 key="value" key2="value2" ...]
dom_id
ไอดีเฉพาะบล็อกเพื่อกัน CSS/JS ชนกันในหน้าเดียวกัน (เช่น dom_id="wc-cats-grid-01")

3) พารามิเตอร์: Data Source

include
ระบุไอดีหมวด เช่น 27,28,29 — ใช้ร่วมกับ orderby="include" เพื่อเรียงตามที่ระบุ
ตัวอย่าง: include="27,28,29"
parent
ไอดีหมวดแม่ เพื่อดึงลูกหมวดโดยตรงของหมวดนั้น
ตัวอย่าง: parent="29" limit="12"
limit
จำกัดจำนวนผลลัพธ์เมื่อไม่ได้ใช้ include
hide_empty
1|0 ซ่อน/ไม่ซ่อนหมวดที่ยังไม่มีสินค้า
exclude
ตัดบางหมวดออก เช่น exclude="31,32"
exclude_uncat
1|0 ซ่อนหมวด Uncategorized
orderby / order
include | menu_order | name | id / ASC | DESC
lang
หลายภาษา: ค่าว่าง = ภาษาปัจจุบัน / all = รวมข้ามภาษา / หรือระบุโค้ด ภาษา (เช่น th, en)

4) พารามิเตอร์: Layout & Responsive (พร้อมตัวอย่างโค้ด)

layout
grid | slider
Grid
columns, columns_md, columns_sm — จำนวนคอลัมน์ Desktop/Tablet/Mobile
Slider: ขนาดคอลัมน์
slider_cols, slider_cols_md, slider_cols_sm
Slider: นำทาง/เล่นอัตโนมัติ
slider_nav (1|0), slider_autoplay, slider_interval (ms), slider_loop, slider_pause_on_hover
Slider: โหมดเลื่อน
slider_step_mode="card|cols" — card=ทีละใบ, cols=ทีละชุดคอลัมน์

ตัวอย่างโค้ด (แสดงเป็นข้อความ)

เลือกใช้แบบ Grid หรือ Slider ด้วยพารามิเตอร์ layout:

[premium_wc_categories_v4
  dom_id="wc-ex-layout-grid"
  include="27,28,29" orderby="include"
  layout="grid"
  columns="3" columns_md="2" columns_sm="1"
  show_header="1" show_name="1" show_bottom_bar="1"
  thumb_ratio="1:1" thumb_fit="cover" hide_empty="0"]
[premium_wc_categories_v4
  dom_id="wc-ex-layout-slider"
  include="27,28,29,30,31" orderby="include"
  layout="slider"
  slider_cols="4" slider_cols_md="2" slider_cols_sm="1"
  slider_nav="1" slider_autoplay="1" slider_interval="3000" slider_loop="1" slider_pause_on_hover="1"
  slider_step_mode="card"
  show_header="0" show_name="1" show_bottom_bar="1"
  thumb_ratio="1:1" thumb_fit="cover" hide_empty="0"]

5) พารามิเตอร์: Header (Title/Subtitle/CTA)

show_header
1|0 — โชว์/ซ่อนหัวข้อ, คำอธิบาย, ปุ่ม
title / subtitle
แก้ไขชื่อหัวเรื่อง/คำอธิบายส่วนหัว
show_button
1|0 — แสดงปุ่มในหัวเรื่อง
button_label / button_url
ข้อความปุ่มและลิงก์
button_target / button_rel
_self|_blank / noopener,nofollow ฯลฯ

ตัวอย่างโค้ด (แสดงเป็นข้อความ)

[premium_wc_categories_v4
  dom_id="wc-ex-header"
  include="27,28,29,30" orderby="include"
  layout="grid" columns="4" columns_md="2" columns_sm="1"
  show_header="1"
  title="หมวดหมู่สินค้าแนะนำ"
  subtitle="เลือกสินค้าเกรด 304 — ผลิตตามสั่ง ส่ง-ติดตั้งทั่วประเทศ"
  show_button="1" button_label="เข้าหน้าร้านค้า" button_url="/shop" button_target="_self" button_rel="noopener"
  show_name="1" show_bottom_bar="1"
  thumb_ratio="1:1" thumb_fit="cover" hide_empty="0"]

6) พารามิเตอร์: Card / Image / Text

thumb_ratio
อัตราส่วนรูป เช่น 1:1, 4:3, 16:9
thumb_fit
cover | contain — ไอคอน/โลโก้แนะนำ contain
show_name
1|0 — ชื่อหมวดซ้อนบนรูป
show_bottom_bar
1|0 — แถบข้อความ+ลูกศรใต้รูป
hint_text
ข้อความใต้รูป เช่น “ดูสินค้าในหมวดนี้”

7) พารามิเตอร์: ฟอนต์/สีเฉพาะบล็อก

name_fs / _md / _sm
ขนาดฟอนต์ชื่อ (Desktop/Tablet/Mobile)
name_fw
น้ำหนักฟอนต์ชื่อ (100–900)
name_align
left | center | right
hint_fs / hint_fw
ขนาด/น้ำหนักข้อความใต้รูป
name_color
สีชื่อบนรูป
hint_color / hint_hover
สีข้อความใต้รูปปกติ/ตอน hover
arrow_color
สีลูกศรปุ่มใต้รูป

ตัวอย่างโค้ด (แสดงเป็นข้อความ)

[premium_wc_categories_v4
  dom_id="wc-ex-typo-color"
  include="27,28,29,30" orderby="include"
  layout="grid" columns="4" columns_md="2" columns_sm="1"
  show_header="1"
  show_name="1" name_fs="1.15rem" name_fs_md="1.05rem" name_fs_sm="0.95rem" name_fw="800" name_align="center"
  show_bottom_bar="1" hint_fs="0.95rem" hint_fw="500"
  name_color="#0b2e7a" hint_color="#5b6472" hint_hover="#0b2e7a" arrow_color="#2563eb"
  thumb_ratio="1:1" thumb_fit="cover" hide_empty="0"]

8) พารามิเตอร์: Badges

badge_type
none | text | count
badge_text
ป้ายข้อความเดียวทั้งชุด (ใช้เมื่อ badge_type="text")
badge_text_map
ป้ายรายหมวด เช่น 27:HOT,28:NEW,29:SALE
count_suffix
หน่วยต่อท้ายจำนวน เช่น ชิ้น

ตัวอย่างโค้ด (แสดงเป็นข้อความ)

[premium_wc_categories_v4
  dom_id="wc-ex-badge-text"
  include="27,28,29,30" orderby="include"
  layout="slider" slider_cols="4" slider_cols_md="2" slider_cols_sm="1"
  show_header="0" show_name="1" show_bottom_bar="1"
  badge_type="text" badge_text_map="27:HOT,28:NEW,29:SALE"
  thumb_ratio="1:1" thumb_fit="cover" hide_empty="0"]

9) พารามิเตอร์: Language & Debug

lang
ค่าว่าง = ภาษาปัจจุบัน / all = รวมข้ามภาษา / หรือระบุโค้ดภาษา
debug
1|0 — แสดงข้อความช่วยดีบัก (เช่น found terms=…)

ตัวอย่างโค้ด (แสดงเป็นข้อความ)

[premium_wc_categories_v4
  dom_id="wc-ex-lang-debug"
  include="27,28,29,30,31,32"
  layout="grid" columns="3" columns_md="2" columns_sm="1"
  show_header="0" show_name="1" show_bottom_bar="0"
  thumb_ratio="1:1" thumb_fit="cover"
  lang="all" hide_empty="0" debug="1"]

10) ชอร์ตโค้ดแต่ละรูปแบบ (Shortcode Variants)

Grid — include Grid — parent Grid — โลโก้/ไอคอน Grid — ภาพล้วน Grid — สี/ฟอนต์เฉพาะบล็อก Slider — step=card Slider — step=cols Slider — โฟกัสมือถือ Slider — ป้าย HOT/NEW/SALE Slider — ป้ายจำนวนสินค้า Header — ซ่อนหัว Header — ปุ่มกำหนดเอง Header — แก้ไข Title/Subtitle

11) ตัวอย่างใช้งาน (Preview + Shortcode)

Grid — include (เรียงตามที่ระบุ)

Preview (ชอร์ตโค้ดจริง)

หมวดหมู่สินค้า

เลือกดูตามหมวด—งานสแตนเลส 304 ผลิตตามสั่ง

เข้าหน้าร้านค้า
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-grid-include"
  include="27,28,29,30" orderby="include"
  layout="grid"
  columns="4" columns_md="2" columns_sm="1"
  show_header="1"
  show_name="1" show_bottom_bar="1"
  name_color="#0b2e7a" hint_color="#5b6472" hint_hover="#0b2e7a" arrow_color="#2563eb"
  thumb_ratio="1:1" thumb_fit="cover"
  hide_empty="0" lang="all"]

Grid — parent (ลูกหมวดของ parent)

Preview (ชอร์ตโค้ดจริง)

หมวดหมู่สินค้า

เลือกดูตามหมวด—งานสแตนเลส 304 ผลิตตามสั่ง

เข้าหน้าร้านค้า
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-grid-parent"
  parent="29" limit="12"
  layout="grid"
  columns="3" columns_md="2" columns_sm="1"
  show_header="1"
  show_name="1" show_bottom_bar="1"
  name_color="#0b2e7a" hint_color="#5b6472" hint_hover="#0b2e7a" arrow_color="#2563eb"
  thumb_ratio="1:1" thumb_fit="cover"
  orderby="menu_order" order="ASC"
  hide_empty="0" lang="all"]

Grid — ภาพล้วน (ซ่อนชื่อ+แถบล่าง)

Preview (ชอร์ตโค้ดจริง)
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-grid-plain"
  include="27,28,29,30,31,32" orderby="include"
  layout="grid"
  columns="5" columns_md="3" columns_sm="2"
  show_header="0"
  show_name="0" show_bottom_bar="0"
  thumb_ratio="1:1" thumb_fit="cover"
  hide_empty="0"]

Grid — สี/ฟอนต์เฉพาะบล็อก (กันธีมทับสี)

Preview (ชอร์ตโค้ดจริง)

หมวดหมู่สินค้า

เลือกดูตามหมวด—งานสแตนเลส 304 ผลิตตามสั่ง

เข้าหน้าร้านค้า
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-grid-theme"
  include="27,28,29,30" orderby="include"
  layout="grid"
  columns="4" columns_md="2" columns_sm="1"
  show_header="1"
  show_name="1" name_fs="1.15rem" name_fs_md="1.05rem" name_fs_sm="0.95rem" name_fw="800" name_align="center"
  show_bottom_bar="1" hint_fs="0.95rem" hint_fw="500"
  name_color="#0b2e7a" hint_color="#5b6472" hint_hover="#0b2e7a" arrow_color="#2563eb"
  thumb_ratio="1:1" thumb_fit="cover"
  hide_empty="0"]

Slider — step=card (เลื่อนทีละใบ)

Preview (ชอร์ตโค้ดจริง)
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-slide-card"
  include="27,28,29,30,31,32" orderby="include"
  layout="slider"
  slider_cols="5" slider_cols_md="3" slider_cols_sm="2"
  slider_nav="1"
  slider_autoplay="1" slider_interval="3000" slider_loop="1" slider_pause_on_hover="1"
  slider_step_mode="card"
  show_header="0"
  show_name="1" name_fs="1.2rem" name_align="center"
  show_bottom_bar="1" hint_text="ดูสินค้าในหมวดนี้"
  thumb_ratio="1:1" thumb_fit="cover"
  badge_type="none"
  hide_empty="0" lang="all"]

Slider — step=cols (เลื่อนทีละ “จำนวนคอลัมน์”)

Preview (ชอร์ตโค้ดจริง)
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-slide-cols"
  include="27,28,29,30,31,32" orderby="include"
  layout="slider"
  slider_cols="4" slider_cols_md="3" slider_cols_sm="1"
  slider_nav="1" slider_autoplay="1" slider_interval="2800" slider_loop="1"
  slider_step_mode="cols"
  show_header="0"
  show_name="1" show_bottom_bar="1"
  thumb_ratio="1:1" thumb_fit="cover"
  hide_empty="0"]

Slider — โฟกัสมือถือ (มือถือ 1 ใบใหญ่)

Preview (ชอร์ตโค้ดจริง)
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-slide-mobile"
  include="27,28,29,30,31" orderby="include"
  layout="slider"
  slider_cols="4" slider_cols_md="2" slider_cols_sm="1"
  slider_nav="0"
  slider_autoplay="1" slider_interval="2600" slider_loop="1"
  slider_step_mode="card"
  show_header="0"
  show_name="1" name_align="center"
  show_bottom_bar="1" hint_text="ดูสินค้าในหมวดนี้"
  thumb_ratio="4:3" thumb_fit="cover"
  hide_empty="0"]

Slider — ป้าย HOT/NEW/SALE รายหมวด

Preview (ชอร์ตโค้ดจริง)
ดูสินค้าในหมวดนี้
ดูสินค้าในหมวดนี้
ดูสินค้าในหมวดนี้
ดูสินค้าในหมวดนี้
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-slide-badge-text"
  include="27,28,29,30" orderby="include"
  layout="slider"
  slider_cols="4" slider_cols_md="2" slider_cols_sm="1"
  slider_nav="1" slider_autoplay="1" slider_interval="3200" slider_loop="1"
  slider_step_mode="card"
  show_header="0"
  show_name="1" show_bottom_bar="1"
  thumb_ratio="1:1" thumb_fit="cover"
  badge_type="text" badge_text_map="27:HOT,28:NEW,29:SALE"
  hide_empty="0"]

Slider — ป้ายจำนวนสินค้า (count)

Preview (ชอร์ตโค้ดจริง)
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-slide-count"
  include="27,28,29,30,31,32" orderby="include"
  layout="slider"
  slider_cols="5" slider_cols_md="3" slider_cols_sm="2"
  slider_nav="1" slider_autoplay="1" slider_interval="3000" slider_loop="1"
  slider_step_mode="card"
  show_header="0"
  show_name="1" show_bottom_bar="0"
  thumb_ratio="1:1" thumb_fit="cover"
  badge_type="count" count_suffix=" ชิ้น"
  hide_empty="0"]

Header — ซ่อนหัว (show_header=0)

Preview (ชอร์ตโค้ดจริง)
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-no-header"
  include="27,28,29,30" orderby="include"
  layout="grid"
  columns="4" columns_md="2" columns_sm="1"
  show_header="0"
  show_name="1" show_bottom_bar="1"
  thumb_ratio="1:1" thumb_fit="cover"
  hide_empty="0"]

Header — ปุ่มกำหนดเอง (CTA)

Preview (ชอร์ตโค้ดจริง)

หมวดหมู่สินค้า

เลือกดูตามหมวด—งานสแตนเลส 304 ผลิตตามสั่ง

เข้าหน้าร้านค้า
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-header-cta"
  include="27,28,29,30" orderby="include"
  layout="grid"
  columns="4" columns_md="2" columns_sm="1"
  show_header="1"
  show_button="1" button_label="เข้าหน้าร้านค้า" button_url="/shop" button_target="_self" button_rel="noopener"
  show_name="1" show_bottom_bar="1"
  thumb_ratio="1:1" thumb_fit="cover"
  hide_empty="0"]

Header — แก้ไข Title & Subtitle

Preview (ชอร์ตโค้ดจริง)

หมวดหมู่สินค้าแนะนำ

เลือกดูสินค้าสตีล 304 — ผลิตตามสั่ง ส่ง-ติดตั้งทั่วประเทศ

Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-header-edit"
  include="27,28,29,30" orderby="include"
  layout="grid"
  columns="4" columns_md="2" columns_sm="1"
  show_header="1"
  title="หมวดหมู่สินค้าแนะนำ"
  subtitle="เลือกดูสินค้าสตีล 304 — ผลิตตามสั่ง ส่ง-ติดตั้งทั่วประเทศ"
  show_button="0"
  show_name="1" show_bottom_bar="1"
  thumb_ratio="1:1" thumb_fit="cover"
  hide_empty="0"]

12) ใช้งานกับ Elementor / Gutenberg

  • Elementor: วาง “Preview (ชอร์ตโค้ดจริง)” ใน Shortcode widget; วาง “Shortcode (Text)” ใต้ผลลัพธ์ใน HTML widget
  • Gutenberg/Classic: วางไฟล์นี้ได้เลย (Preview จะรันชอร์ตโค้ด)
  • ตั้งค่า dom_id ให้ไม่ซ้ำกันในหน้าเดียวเพื่อกันชน

13) แก้ปัญหา

  • ไม่แสดงผล → ลอง hide_empty="0" + WooCommerce > สถานะ > เครื่องมือ > Recount terms
  • ผิดภาษา/หมวดหาย → ทดสอบ lang="all" หรือใช้ ID ตามภาษาปัจจุบัน
  • สี Grid/Slider ไม่เหมือนกัน → กำหนด name_color, hint_color, hint_hover, arrow_color ในบล็อกนั้น ๆ
  • สไลด์ไม่วิ่ง/Autoplay ไม่ทำงาน → จำนวนการ์ดต้องมากกว่าจำนวนที่แสดง, ตรวจ JS/แคช
  • ตรวจระบบ → class_exists(WooCommerce) ควรเป็น YES และ shortcode_exists(premium_wc_categories_v4) ควรเป็น YES
  • ดีบักเร็ว → เพิ่ม debug="1" เพื่อดู found terms=…

Premium WC Categories v4 — คู่มือใช้งานฉบับสมบูรณ์

รวมพารามิเตอร์ทั้งหมด + ตัวอย่างใช้งาน (มีทั้ง Preview: ชอร์ตโค้ดจริง และ Shortcode (Text): แสดงเป็นข้อความด้วยการหลบ [/])

Elementor: “Preview (ชอร์ตโค้ดจริง)” ในไฟล์ HTML จะไม่รันใน HTML widget — ให้คัดลอกชอร์ตโค้ดในกล่อง Preview ไปวางใน Shortcode widget. ส่วน “Shortcode (Text)” ใช้แสดงตัวอย่างโค้ดใต้ผลลัพธ์ใน HTML widget.

สารบัญ

1) เริ่มใช้งานด่วน 2) โครงสร้างชอร์ตโค้ด & dom_id 3) พารามิเตอร์: Data Source 4) พารามิเตอร์: Layout & Responsive (มีตัวอย่างโค้ด) 5) พารามิเตอร์: Header (Title/Subtitle/CTA) 6) พารามิเตอร์: Card / Image / Text 7) พารามิเตอร์: ฟอนต์/สีเฉพาะบล็อก 8) พารามิเตอร์: Badges 9) พารามิเตอร์: Language & Debug 10) ตัวอย่างใช้งาน (Preview + Shortcode) 11) ใช้งานกับ Elementor/Gutenberg 12) แก้ปัญหา

1) เริ่มใช้งานด่วน

หมวดหมู่สินค้า

เลือกดูตามหมวด—งานสแตนเลส 304 ผลิตตามสั่ง

เข้าหน้าร้านค้า
Shortcode (Text)
[premium_wc_categories_v4 dom_id="wc-doc-quickstart" include="27,28,29" orderby="include" layout="grid" columns="3" columns_md="2" columns_sm="1" show_header="1" show_name="1" show_bottom_bar="1" thumb_ratio="1:1" thumb_fit="cover" hide_empty="0"]

แนะนำตั้ง dom_id ให้ไม่ซ้ำเมื่อมีหลายบล็อกในหน้าเดียว

2) โครงสร้างชอร์ตโค้ด & dom_id

ชื่อชอร์ตโค้ด
premium_wc_categories_v4
รูปแบบทั่วไป
[premium_wc_categories_v4 key="value" key2="value2" ...]
dom_id
ไอดีเฉพาะบล็อกเพื่อกัน CSS/JS ชนกันในหน้าเดียวกัน (เช่น dom_id="wc-cats-grid-01")

3) พารามิเตอร์: Data Source

include
ระบุไอดีหมวด เช่น 27,28,29 (ใช้ orderby="include" เพื่อเรียงตามที่ระบุ)
ตัวอย่าง: include="27,28,29"
parent
ไอดีหมวดแม่ เพื่อดึงลูกหมวดโดยตรงของหมวดนั้น (limit ช่วยจำกัดจำนวน)
ตัวอย่าง: parent="29" limit="12"
limit
จำกัดจำนวนผลลัพธ์เมื่อไม่ได้ใช้ include
hide_empty
1|0 ซ่อน/ไม่ซ่อนหมวดที่ยังไม่มีสินค้า
exclude
ตัดบางหมวดออก เช่น exclude="31,32"
exclude_uncat
1|0 ซ่อนหมวด Uncategorized
orderby / order
include | menu_order | name | id / ASC | DESC
lang
หลายภาษา: ค่าว่าง = ภาษาปัจจุบัน / all = รวมข้ามภาษา / หรือระบุโค้ดภาษา (เช่น th, en)

4) พารามิเตอร์: Layout & Responsive (พร้อมตัวอย่างโค้ด)

layout
grid | slider
Grid
columns, columns_md, columns_sm — จำนวนคอลัมน์ Desktop/Tablet/Mobile
Slider: ขนาดคอลัมน์
slider_cols, slider_cols_md, slider_cols_sm
Slider: นำทาง/เล่นอัตโนมัติ
slider_nav (1|0), slider_autoplay, slider_interval (ms), slider_loop, slider_pause_on_hover
Slider: โหมดเลื่อน
slider_step_mode="card|cols" — card=ทีละใบ, cols=ทีละชุดคอลัมน์

ตัวอย่างโค้ด (แสดงเป็นข้อความ)

เลือกใช้แบบ Grid หรือ Slider ด้วยพารามิเตอร์ layout:

[premium_wc_categories_v4
  dom_id="wc-ex-layout-grid"
  include="27,28,29" orderby="include"
  layout="grid"
  columns="3" columns_md="2" columns_sm="1"
  show_header="1" show_name="1" show_bottom_bar="1"
  thumb_ratio="1:1" thumb_fit="cover" hide_empty="0"]
[premium_wc_categories_v4
  dom_id="wc-ex-layout-slider"
  include="27,28,29,30,31" orderby="include"
  layout="slider"
  slider_cols="4" slider_cols_md="2" slider_cols_sm="1"
  slider_nav="1" slider_autoplay="1" slider_interval="3000" slider_loop="1" slider_pause_on_hover="1"
  slider_step_mode="card"
  show_header="0" show_name="1" show_bottom_bar="1"
  thumb_ratio="1:1" thumb_fit="cover" hide_empty="0"]

5) พารามิเตอร์: Header (Title/Subtitle/CTA)

show_header
1|0 — โชว์/ซ่อนหัวข้อ, คำอธิบาย, ปุ่ม
title / subtitle
แก้ไขชื่อหัวเรื่อง/คำอธิบายส่วนหัว
show_button
1|0 — แสดงปุ่มในหัวเรื่อง
button_label / button_url
ข้อความปุ่มและลิงก์
button_target / button_rel
_self|_blank / noopener,nofollow ฯลฯ

ตัวอย่างโค้ด (แสดงเป็นข้อความ)

[premium_wc_categories_v4
  dom_id="wc-ex-header"
  include="27,28,29,30" orderby="include"
  layout="grid" columns="4" columns_md="2" columns_sm="1"
  show_header="1"
  title="หมวดหมู่สินค้าแนะนำ"
  subtitle="เลือกสินค้าเกรด 304 — ผลิตตามสั่ง ส่ง-ติดตั้งทั่วประเทศ"
  show_button="1" button_label="เข้าหน้าร้านค้า" button_url="/shop" button_target="_self" button_rel="noopener"
  show_name="1" show_bottom_bar="1"
  thumb_ratio="1:1" thumb_fit="cover" hide_empty="0"]

6) พารามิเตอร์: Card / Image / Text

thumb_ratio
อัตราส่วนรูป เช่น 1:1, 4:3, 16:9
thumb_fit
cover | contain — ไอคอน/โลโก้แนะนำ contain
show_name
1|0 — ชื่อหมวดซ้อนบนรูป
show_bottom_bar
1|0 — แถบข้อความ+ลูกศรใต้รูป
hint_text
ข้อความใต้รูป เช่น “ดูสินค้าในหมวดนี้”

7) พารามิเตอร์: ฟอนต์/สีเฉพาะบล็อก

name_fs / _md / _sm
ขนาดฟอนต์ชื่อ (Desktop/Tablet/Mobile)
name_fw
น้ำหนักฟอนต์ชื่อ (100–900)
name_align
left | center | right
hint_fs / hint_fw
ขนาด/น้ำหนักข้อความใต้รูป
name_color
สีชื่อบนรูป
hint_color / hint_hover
สีข้อความใต้รูปปกติ/ตอน hover
arrow_color
สีลูกศรปุ่มใต้รูป

ตัวอย่างโค้ด (แสดงเป็นข้อความ)

[premium_wc_categories_v4
  dom_id="wc-ex-typo-color"
  include="27,28,29,30" orderby="include"
  layout="grid" columns="4" columns_md="2" columns_sm="1"
  show_header="1"
  show_name="1" name_fs="1.15rem" name_fs_md="1.05rem" name_fs_sm="0.95rem" name_fw="800" name_align="center"
  show_bottom_bar="1" hint_fs="0.95rem" hint_fw="500"
  name_color="#0b2e7a" hint_color="#5b6472" hint_hover="#0b2e7a" arrow_color="#2563eb"
  thumb_ratio="1:1" thumb_fit="cover" hide_empty="0"]

8) พารามิเตอร์: Badges

badge_type
none | text | count
badge_text
ป้ายข้อความเดียวทั้งชุด (ใช้เมื่อ badge_type="text")
badge_text_map
ป้ายรายหมวด เช่น 27:HOT,28:NEW,29:SALE
count_suffix
หน่วยต่อท้ายจำนวน เช่น ชิ้น

ตัวอย่างโค้ด (แสดงเป็นข้อความ)

[premium_wc_categories_v4
  dom_id="wc-ex-badge-text"
  include="27,28,29,30" orderby="include"
  layout="slider" slider_cols="4" slider_cols_md="2" slider_cols_sm="1"
  show_header="0" show_name="1" show_bottom_bar="1"
  badge_type="text" badge_text_map="27:HOT,28:NEW,29:SALE"
  thumb_ratio="1:1" thumb_fit="cover" hide_empty="0"]

9) พารามิเตอร์: Language & Debug

lang
ค่าว่าง = ภาษาปัจจุบัน / all = รวมข้ามภาษา / หรือระบุโค้ดภาษา
debug
1|0 — แสดงข้อความช่วยดีบัก (เช่น found terms=…)

ตัวอย่างโค้ด (แสดงเป็นข้อความ)

[premium_wc_categories_v4
  dom_id="wc-ex-lang-debug"
  include="27,28,29,30,31,32"
  layout="grid" columns="3" columns_md="2" columns_sm="1"
  show_header="0" show_name="1" show_bottom_bar="0"
  thumb_ratio="1:1" thumb_fit="cover"
  lang="all" hide_empty="0" debug="1"]

10) ตัวอย่างใช้งาน (Preview + Shortcode)

1) Grid — include (เรียงตามที่ระบุ)

Preview (ชอร์ตโค้ดจริง)

หมวดหมู่สินค้า

เลือกดูตามหมวด—งานสแตนเลส 304 ผลิตตามสั่ง

เข้าหน้าร้านค้า
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-grid-include"
  include="27,28,29,30" orderby="include"
  layout="grid"
  columns="4" columns_md="2" columns_sm="1"
  show_header="1"
  show_name="1" show_bottom_bar="1"
  name_color="#0b2e7a" hint_color="#5b6472" hint_hover="#0b2e7a" arrow_color="#2563eb"
  thumb_ratio="1:1" thumb_fit="cover"
  hide_empty="0" lang="all"]

2) Grid — parent (ลูกหมวดของ parent)

Preview (ชอร์ตโค้ดจริง)

หมวดหมู่สินค้า

เลือกดูตามหมวด—งานสแตนเลส 304 ผลิตตามสั่ง

เข้าหน้าร้านค้า
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-grid-parent"
  parent="29" limit="12"
  layout="grid"
  columns="3" columns_md="2" columns_sm="1"
  show_header="1"
  show_name="1" show_bottom_bar="1"
  name_color="#0b2e7a" hint_color="#5b6472" hint_hover="#0b2e7a" arrow_color="#2563eb"
  thumb_ratio="1:1" thumb_fit="cover"
  orderby="menu_order" order="ASC"
  hide_empty="0" lang="all"]

4) Grid — ภาพล้วน (ซ่อนชื่อ+แถบล่าง)

Preview (ชอร์ตโค้ดจริง)
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-grid-plain"
  include="27,28,29,30,31,32" orderby="include"
  layout="grid"
  columns="5" columns_md="3" columns_sm="2"
  show_header="0"
  show_name="0" show_bottom_bar="0"
  thumb_ratio="1:1" thumb_fit="cover"
  hide_empty="0"]

5) Grid — สี/ฟอนต์เฉพาะบล็อก (กันธีมทับสี)

Preview (ชอร์ตโค้ดจริง)

หมวดหมู่สินค้า

เลือกดูตามหมวด—งานสแตนเลส 304 ผลิตตามสั่ง

เข้าหน้าร้านค้า
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-grid-theme"
  include="27,28,29,30" orderby="include"
  layout="grid"
  columns="4" columns_md="2" columns_sm="1"
  show_header="1"
  show_name="1" name_fs="1.15rem" name_fs_md="1.05rem" name_fs_sm="0.95rem" name_fw="800" name_align="center"
  show_bottom_bar="1" hint_fs="0.95rem" hint_fw="500"
  name_color="#0b2e7a" hint_color="#5b6472" hint_hover="#0b2e7a" arrow_color="#2563eb"
  thumb_ratio="1:1" thumb_fit="cover"
  hide_empty="0"]

6) Slider — step=card (เลื่อนทีละใบ)

Preview (ชอร์ตโค้ดจริง)
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-slide-card"
  include="27,28,29,30,31,32" orderby="include"
  layout="slider"
  slider_cols="5" slider_cols_md="3" slider_cols_sm="2"
  slider_nav="1"
  slider_autoplay="1" slider_interval="3000" slider_loop="1" slider_pause_on_hover="1"
  slider_step_mode="card"
  show_header="0"
  show_name="1" name_fs="1.2rem" name_align="center"
  show_bottom_bar="1" hint_text="ดูสินค้าในหมวดนี้"
  thumb_ratio="1:1" thumb_fit="cover"
  badge_type="none"
  hide_empty="0" lang="all"]

7) Slider — step=cols (เลื่อนทีละ “จำนวนคอลัมน์”)

Preview (ชอร์ตโค้ดจริง)
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-slide-cols"
  include="27,28,29,30,31,32" orderby="include"
  layout="slider"
  slider_cols="4" slider_cols_md="3" slider_cols_sm="1"
  slider_nav="1" slider_autoplay="1" slider_interval="2800" slider_loop="1"
  slider_step_mode="cols"
  show_header="0"
  show_name="1" show_bottom_bar="1"
  thumb_ratio="1:1" thumb_fit="cover"
  hide_empty="0"]

8) Slider — โฟกัสมือถือ (มือถือ 1 ใบใหญ่)

Preview (ชอร์ตโค้ดจริง)
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-slide-mobile"
  include="27,28,29,30,31" orderby="include"
  layout="slider"
  slider_cols="4" slider_cols_md="2" slider_cols_sm="1"
  slider_nav="0"
  slider_autoplay="1" slider_interval="2600" slider_loop="1"
  slider_step_mode="card"
  show_header="0"
  show_name="1" name_align="center"
  show_bottom_bar="1" hint_text="ดูสินค้าในหมวดนี้"
  thumb_ratio="4:3" thumb_fit="cover"
  hide_empty="0"]

9) Slider — ป้าย HOT/NEW/SALE (badge_text_map)

Preview (ชอร์ตโค้ดจริง)
ดูสินค้าในหมวดนี้
ดูสินค้าในหมวดนี้
ดูสินค้าในหมวดนี้
ดูสินค้าในหมวดนี้
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-slide-badge-text"
  include="27,28,29,30" orderby="include"
  layout="slider"
  slider_cols="4" slider_cols_md="2" slider_cols_sm="1"
  slider_nav="1" slider_autoplay="1" slider_interval="3200" slider_loop="1"
  slider_step_mode="card"
  show_header="0"
  show_name="1" show_bottom_bar="1"
  thumb_ratio="1:1" thumb_fit="cover"
  badge_type="text" badge_text_map="27:HOT,28:NEW,29:SALE"
  hide_empty="0"]

10) Slider — ป้ายจำนวนสินค้า (count)

Preview (ชอร์ตโค้ดจริง)
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-slide-count"
  include="27,28,29,30,31,32" orderby="include"
  layout="slider"
  slider_cols="5" slider_cols_md="3" slider_cols_sm="2"
  slider_nav="1" slider_autoplay="1" slider_interval="3000" slider_loop="1"
  slider_step_mode="card"
  show_header="0"
  show_name="1" show_bottom_bar="0"
  thumb_ratio="1:1" thumb_fit="cover"
  badge_type="count" count_suffix=" ชิ้น"
  hide_empty="0"]

11) Header — ซ่อนหัว (show_header=0)

Preview (ชอร์ตโค้ดจริง)
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-no-header"
  include="27,28,29,30" orderby="include"
  layout="grid"
  columns="4" columns_md="2" columns_sm="1"
  show_header="0"
  show_name="1" show_bottom_bar="1"
  thumb_ratio="1:1" thumb_fit="cover"
  hide_empty="0"]

12) Header — ปุ่มกำหนดเอง (CTA)

Preview (ชอร์ตโค้ดจริง)

หมวดหมู่สินค้า

เลือกดูตามหมวด—งานสแตนเลส 304 ผลิตตามสั่ง

เข้าหน้าร้านค้า
Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-header-cta"
  include="27,28,29,30" orderby="include"
  layout="grid"
  columns="4" columns_md="2" columns_sm="1"
  show_header="1"
  show_button="1" button_label="เข้าหน้าร้านค้า" button_url="/shop" button_target="_self" button_rel="noopener"
  show_name="1" show_bottom_bar="1"
  thumb_ratio="1:1" thumb_fit="cover"
  hide_empty="0"]

13) Header — แก้ไข Title & Subtitle

Preview (ชอร์ตโค้ดจริง)

หมวดหมู่สินค้าแนะนำ

เลือกดูสินค้าสตีล 304 — ผลิตตามสั่ง ส่ง-ติดตั้งทั่วประเทศ

Shortcode (Text)
[premium_wc_categories_v4
  dom_id="wc-doc-header-edit"
  include="27,28,29,30" orderby="include"
  layout="grid"
  columns="4" columns_md="2" columns_sm="1"
  show_header="1"
  title="หมวดหมู่สินค้าแนะนำ"
  subtitle="เลือกดูสินค้าสตีล 304 — ผลิตตามสั่ง ส่ง-ติดตั้งทั่วประเทศ"
  show_button="0"
  show_name="1" show_bottom_bar="1"
  thumb_ratio="1:1" thumb_fit="cover"
  hide_empty="0"]

11) ใช้งานกับ Elementor / Gutenberg

  • Elementor: วาง “Preview (ชอร์ตโค้ดจริง)” ใน Shortcode widget; วาง “Shortcode (Text)” ใต้ผลลัพธ์ใน HTML widget
  • Gutenberg/Classic: วางไฟล์นี้ได้เลย (Preview อาจรันชอร์ตโค้ดเมื่ออยู่ในบริบทที่รองรับ)
  • ตั้งค่า dom_id ให้ไม่ซ้ำกันในหน้าเดียวเพื่อกันชน

12) แก้ปัญหา

  • ไม่แสดงผล → ลอง hide_empty="0" + WooCommerce > สถานะ > เครื่องมือ > Recount terms
  • ผิดภาษา/หมวดหาย → ทดสอบ lang="all" หรือใช้ ID ตามภาษาปัจจุบัน
  • สี Grid/Slider ไม่เหมือนกัน → กำหนด name_color, hint_color, hint_hover, arrow_color ในบล็อกนั้น ๆ
  • สไลด์ไม่วิ่ง/Autoplay ไม่ทำงาน → จำนวนการ์ดต้องมากกว่าจำนวนที่แสดง, ตรวจ JS/แคช
  • ตรวจระบบ → class_exists(WooCommerce) ควรเป็น YES และ shortcode_exists(premium_wc_categories_v4) ควรเป็น YES
  • ดีบักเร็ว → เพิ่ม debug="1" เพื่อดู found terms=…