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"
ตัวอย่าง: include="27,28,29"
parent
ไอดีหมวดแม่ เพื่อดึงลูกหมวดโดยตรงของหมวดนั้น
ตัวอย่าง: parent="29" limit="12"
ตัวอย่าง: 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)
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 — โลโก้/ไอคอน (thumb_fit="contain")
Preview (ชอร์ตโค้ดจริง)
หมวดหมู่สินค้า
เลือกดูตามหมวด—งานสแตนเลส 304 ผลิตตามสั่ง
Shortcode (Text)
[premium_wc_categories_v4
dom_id="wc-doc-grid-logo"
include="27,28,29,30,31,32" orderby="include"
layout="grid"
columns="6" columns_md="4" columns_sm="3"
show_header="1"
show_name="1" name_fs="0.95rem" name_align="center"
show_bottom_bar="0"
thumb_ratio="1:1" thumb_fit="contain"
badge_type="none"
hide_empty="0"]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"
ตัวอย่าง: include="27,28,29"
parent
ไอดีหมวดแม่ เพื่อดึงลูกหมวดโดยตรงของหมวดนั้น (limit ช่วยจำกัดจำนวน)
ตัวอย่าง: parent="29" limit="12"
ตัวอย่าง: 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"]3) Grid — โลโก้/ไอคอน (thumb_fit="contain")
Preview (ชอร์ตโค้ดจริง)
หมวดหมู่สินค้า
เลือกดูตามหมวด—งานสแตนเลส 304 ผลิตตามสั่ง
Shortcode (Text)
[premium_wc_categories_v4
dom_id="wc-doc-grid-logo"
include="27,28,29,30,31,32" orderby="include"
layout="grid"
columns="6" columns_md="4" columns_sm="3"
show_header="1"
show_name="1" name_fs="0.95rem" name_align="center"
show_bottom_bar="0"
thumb_ratio="1:1" thumb_fit="contain"
badge_type="none"
hide_empty="0"]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=…