WordPress如何制作產(chǎn)品列表頁，詳細(xì)步驟與實(shí)用技巧

來自：素雅營銷研究院

方知筆記

2025年07月02日 23:00

在WordPress網(wǎng)站上展示產(chǎn)品列表是電商網(wǎng)站、作品集或服務(wù)展示的重要環(huán)節(jié)。無論是使用WooCommerce還是其他插件，制作一個(gè)專業(yè)的產(chǎn)品列表頁都能提升用戶體驗(yàn)。本文將詳細(xì)介紹幾種常見的制作方法，幫助您快速搭建高效的產(chǎn)品展示頁面。

方法一：使用WooCommerce插件（適用于電商網(wǎng)站）

安裝并激活WooCommerce插件

在WordPress后臺(tái)進(jìn)入“插件”>“安裝插件”，搜索“WooCommerce”并安裝激活。

添加產(chǎn)品信息

進(jìn)入“產(chǎn)品”>“添加新產(chǎn)品”，填寫標(biāo)題、描述、價(jià)格、圖片等詳細(xì)信息。

創(chuàng)建產(chǎn)品列表頁

WooCommerce會(huì)自動(dòng)生成默認(rèn)的產(chǎn)品列表頁（通常為/shop/）。
如需自定義布局，可通過“外觀”>“小工具”調(diào)整側(cè)邊欄，或使用頁面構(gòu)建器（如Elementor）設(shè)計(jì)模板。

優(yōu)化顯示效果

通過“WooCommerce”>“設(shè)置”>“產(chǎn)品”調(diào)整每頁顯示數(shù)量、排序方式等。

方法二：使用頁面構(gòu)建器插件（如Elementor）

安裝Elementor Pro

Elementor Pro提供“產(chǎn)品網(wǎng)格”等高級(jí)模塊，支持拖拽式設(shè)計(jì)。

創(chuàng)建新頁面

進(jìn)入“頁面”>“添加新頁面”，使用Elementor編輯。

添加產(chǎn)品列表模塊

搜索“Products”或“Posts Grid”模塊，選擇數(shù)據(jù)源（如WooCommerce產(chǎn)品），調(diào)整列數(shù)、樣式和分頁。

保存并發(fā)布

設(shè)計(jì)完成后保存，將頁面設(shè)置為產(chǎn)品主頁（可在WooCommerce設(shè)置中綁定）。

方法三：手動(dòng)調(diào)用產(chǎn)品（適合開發(fā)者）

通過自定義代碼調(diào)用產(chǎn)品數(shù)據(jù)，適合需要高度定制的用戶：

// 在主題文件中插入以下代碼（如page-products.php）
$args = array(
'post_type' => 'product',
'posts_per_page' => 12
);
$products = new WP_Query($args);
while ($products->have_posts()) : $products->the_post();
// 輸出產(chǎn)品標(biāo)題、圖片等內(nèi)容
the_title('<h2>', '</h2>');
the_post_thumbnail();
endwhile;
wp_reset_postdata();