快速查看功能能讓買家在產(chǎn)品列表頁直接查看商品詳情，不用跳轉(zhuǎn)頁面。WoodMart 自帶這一功能，不需要額外安裝插件，設(shè)置也非常簡單，適合電商站點(diǎn)提升商品瀏覽效率。

開啟 Quick View 功能

進(jìn)入后臺(tái)，點(diǎn)擊 WoodMart → Theme Settings → Shop。

找到“Quick View”選項(xiàng)，勾選“啟用”。

你還可以調(diào)整 Quick View 彈窗的展示方式：

• 布局樣式：橫向展示（左圖右文）或縱向展示（上下排列）
• 顯示信息：包括商品描述、價(jià)格、變體選擇、評(píng)分、庫存狀態(tài)等
• 圖片樣式：是否開啟縮略圖輪播

調(diào)整好后點(diǎn)擊保存，刷新頁面即可生效。

如果你的商品列表使用了 Elementor 或 WPBakery 構(gòu)建，按鈕同樣會(huì)自動(dòng)集成進(jìn)來，無需單獨(dú)操作。

修改按鈕樣式和文字

前往主題設(shè)置 → 風(fēng)格與顏色 → 按鈕

往下拉找到增加規(guī)則，選擇快速查看加入購物車：

• 可修改按鈕顏色、邊框、字體大小
• 改變按鈕文字，例如將“快速查看”改為“點(diǎn)我預(yù)覽”或“商品詳情”
• 支持上傳自定義圖標(biāo)或者使用圖標(biāo)字體（如 Font Awesome）

如果你使用的是 Elementor Loop Builder（循環(huán)構(gòu)建器）自定義產(chǎn)品列表，建議統(tǒng)一按鈕類名，如 .quick-view-button，然后在 主題自定義 CSS 或 Elementor 自定義 CSS 中統(tǒng)一樣式，例如：

.quick-view-button {
  background-color: #111;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
}

優(yōu)化移動(dòng)端展示效果

WoodMart 對(duì) Quick View 彈窗做了響應(yīng)式適配，手機(jī)端會(huì)以全屏方式彈出。

可以在自定義 CSS 中進(jìn)一步優(yōu)化：

.quick-view-popup .product-summary {
  font-size: 16px;
}
@media(max-width:768px){
  .quick-view-popup .product-image-gallery {
    display: none; /* 隱藏圖像輪播，提升加載速度 */
  }
}

另外，在移動(dòng)端建議只保留主要信息，如主圖、價(jià)格、購買按鈕，減少干擾內(nèi)容，提高加載速度。

快捷排查方式

• 彈窗不顯示：檢查是否啟用了緩存插件，清除緩存后再測試
• 樣式錯(cuò)亂：檢查是否自定義了 CSS，或主題是否為最新版
• 變體加載失敗：確認(rèn)變體設(shè)置是否完整，有無缺失屬性或圖像

小結(jié)

WoodMart 的 Quick View 功能無需安裝插件，自帶設(shè)置界面和樣式控制，可以快速提升商品列表頁的互動(dòng)性。如果搭配好樣式和移動(dòng)端優(yōu)化，也能進(jìn)一步提升轉(zhuǎn)化效率。建議每個(gè)商品都開啟此功能，讓買家更方便瀏覽對(duì)比和下單。

最近更新

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個(gè)人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時(shí)間：周一至周五，9:30-18:30，節(jié)假日休息