[ad_1]
您的產品目錄增長得越大，訪問者就很難找到他們想要的東西。逐頁瀏覽以查找正確的項目可能會變得很麻煩。這就是產品滑塊可以派上用場的地方。
使用產品滑塊，您可以在單個頁面上顯示任意數量的項目，並使目錄易於瀏覽。您的滑塊可以根據需要選擇佔用的空間少或多。
在本文中，我們將向您展示一些我們最喜歡的電子商務滑塊示例。然後，我們將逐步介紹如何使用兩個不同的插件構建WooCommerce產品滑塊，這兩個插件均提供免費版本。
讓我們開始吧！
是否要向#WooCommerce添加產品滑塊？ 2這兩個免費的#plugins可以幫助您
在商店中使用產品滑塊的好處
滑塊無處不在。現在，許多網站都將滑動圖庫作為其一部分 英雄節：
如果您想炫耀評論或 客戶感言，滑塊也是一個不錯的選擇：
但是，很少有類型的網站可以從滑塊獲得更多的里程 網上商店。根據您的產品目錄的大小，訪問者可能必須瀏覽許多頁面才能找到所需的內容：
有很多方法可以解決該問題。您可以按類別細分項目，然後添加 更好的搜索功能，當然，請使用產品滑塊：
使用正確的工具，您可以輕鬆創建引人注目的產品滑塊，以幫助您炫耀最暢銷的商品。讓我們談談您的選擇。
將產品滑塊添加到在線WordPress商店的兩種簡單方法
有很多插件可用於向WordPress添加滑塊。但是，對於 網上商店，您需要一個 與WooCommerce兼容 盒子外面。考慮到這一點，讓我們看看如何使用兩個最佳的滑塊插件選項。
1.使用Product Slider for WooCommerce插件
WooCommerce的產品滑塊 當前版本：2.1.16
上次更新時間：2019年11月25日
WooCommerce的產品滑塊 是其中一個插件，可以告訴您幾乎所有您需要了解的名稱。使用此插件，您可以拿走WooCommerce產品並將其放在滑塊中。
您可以根據需要設置任意數量的滑塊，並將其插入到任何頁面，帖子或自定義模板上，方法如下： 可配置的短代碼。您創建的每個產品滑塊都是完全可定製的。這意味著您可以更改它的外觀，行為方式，是否將其設置為自動播放，是否支持在移動設備上滑動等。
為了使您的生活更簡單，此插件包括三個主題供您選擇，以使滑塊看起來獨一無二。如果您購買，還有很多其他選擇 高級許可證。
對於您創建的任何新滑塊，您需要選擇一個主題，而不是從頭開始。在以下教程中，我們將調整選擇使其唯一，並在此過程中向您展示插件在定製方面的表現。
在您開始之前， 您將需要一個WooCommerce商店 至少有一些產品。這是我們的：
現在查看完成的滑塊，然後向您展示如何到達那裡：
為WooCommerce設置產品滑塊
您需要做的第一件事是 設置並激活 WooCommerce插件的產品滑塊。完成後，新的「產品滑塊」標籤將出現在您的信息中心中。
如果您點擊添加新內容，您將首先看到的是向網站添加新滑塊的方法概述：
繼續並為滑塊設置標題，然後向下滾動到“常規設置”區域。您可以在此處配置要構建的滑塊類型，以及要使用的布局和主題：
主題一提供了簡潔簡潔的樣式，因此我們將堅持這一選擇。
接下來，您可以配置要在滑塊中顯示的產品。此插件的免費版本的缺點在於，它僅使您能夠為最新商品創建滑塊：
我們將繼續進行配置，將滑塊配置為在台式設備上顯示四列，在移動設備上顯示一列，總共顯示12種產品。
轉到“滑塊控制項”選項卡，我們將禁用自動播放，然後啟用導航箭頭和分頁：
後面的設置使瀏覽體驗更輕鬆，因此我們建議您也將它們保持打開狀態。您還可以啟用觸摸滑動和滑鼠拖動，從而使導航更加直觀：
轉到顯示選項，我們將滑塊的文本設置為黑色。我們還為折扣價格設置了不同的顏色，以使差異更加明顯：
免費版本的插件沒有字體選項。因此，此時，我們的滑塊已準備就緒。要發布產品滑塊，您可以保存它，然後將簡碼複製並粘貼到任意頁面上的“簡碼”塊內配置屏幕頂部：
總體而言，使用Product Slider for WooCommerce創建功能齊全的滑塊僅需幾分鐘。您在樣式選擇方面有些限制，但是如果您正在尋找簡約的東西，那麼此插件非常有用。
2.使用適用於WooCommerce的PickPlugins產品滑塊構建產品滑塊
適用於WooCommerce的PickPlugins產品滑塊
當前版本：1.12.23
上次更新時間：2019年12月18日
woocommerce-products-slider.zip
接下來 適用於WooCommerce的PickPlugins產品滑塊 如果您要在產品滑塊中尋找更多功能，則是一個很好的選擇。當涉及到滑塊動畫時，此插件提供了一整套選項，包括具有自定義速度，懸停效果等的自動播放功能。
該插件迷失的一個方面是，它沒有為滑塊樣式提供許多自定義選項。它確實包含一些可以添加到正在銷售或有折扣的產品中的元素。但是，您對產品文本外觀的控制較少。
另一方面，此插件的優點是它使您可以將自定義CSS添加到產品滑塊。這意味著您可以自定義滑塊設計的各個方面，只要 您對CSS很滿意。
考慮到這一點，我們著手使用此插件來創建一個簡單的產品滑塊。我們的目標是創建類似於上一節中的滑塊的內容，以演示這兩個插件之間的一些關鍵區別：
設置插件
這個過程非常簡單。激活插件後，您可以轉到WCPS>新建WCPS選項卡以創建新的滑塊。您要做的第一件事就是設置標題，該插件將向您顯示滑塊的簡碼：
要開始自定義過程，請移至“選項”選項卡。在此處，您可以選擇元素的桌面和移動版本應顯示多少列。再一次，我們分別選擇了四列和一列：
接下來，我們禁用了自動播放功能，並啟用了「循環播放」功能，使訪問者可以從最後一個元素直接滑動到第一個元素，反之亦然。這是一個方便的功能，以前的插件未包含：
除此之外，我們打開了滑鼠並觸摸拖動選項。該插件還提供的一項有用功能是 「延遲載入」，它會逐漸將元素載入到滑塊中以提高頁面速度：
現在，我們可以使用「查詢產品」標籤來選擇滑塊應顯示的產品。您會立即注意到，該插件不僅提供最新產品，還提供許多選擇。不過，在此示例中，我們將堅持該設置：
如果向下滾動，則會看到用於隱藏缺貨產品並包括正在銷售的物品的選項。然後在“樣式”中，您可以選擇四個主題之一作為滑塊的基礎：
本部分還包括「色帶」，這些色帶是顯示在產品圖片上方的疊加層，以顯示折扣和優惠。最後，讓我們跳到“元素”選項卡，在這裡我們可以選擇滑塊應包含的元素：
由於我們想構建與上一個滑塊相似的東西，因此我們禁用了類別和銷售計數元素。完成自己的自定義工作後，您可以保存滑塊，複製其短代碼並使用“短代碼”塊發布它。
總結一下我們的想法，我們感謝WooCommerce的PickPlugins產品滑塊為滑塊提供了更多實用的自定義選項。但是，缺少樣式自定義和界面本身。我們的建議是嘗試兩個插件的免費版本，以查看哪個最適合您的獨特需求。
結論
產品滑塊看起來很簡單，但是它們可以包含很多很酷的功能。您可以將過渡效果添加到滑塊，將其設置為瀏覽特定的產品類別，使用所需的任何設計等等。
是否要向#WooCommerce添加產品滑塊？ 2這兩個免費的#plugins可以幫助您
如果您想要一個在樣式和功能上都提供不錯選擇的插件， WooCommerce的產品滑塊 是個好選擇。 適用於WooCommerce的PickPlugins產品滑塊，另一方面，您可以提供更多的動畫選項，並可以更好地控制要展示的產品（在免費版本中），但是卻不能讓您調整滑塊的樣式。
最後，如果您正在尋找其他方法來增強商店的購物體驗，請查看有關以下內容的指南 如何優化WooCommerce產品頁面 和 我們必備的WooCommerce插件集合。
您對如何在網上商店中使用產品滑塊有疑問嗎？讓我們在下面的評論部分中對它們進行研究！