如何創建 WooCommerce 迷你購物車：3 種方法

已發表: 2022-02-12

您是否正在尋找一種簡單的方法來設置 WooCommerce 迷你購物車？如果您的結賬體驗緩慢且重複，可能會影響客戶的購物體驗。改善結帳流程的流程是改善潛在客戶轉化率不可或缺的一部分，而迷你購物車可能是一個很好的解決方案。

因此，為了幫助您將一個添加到您的網站，這裡有一個關於如何創建 WooCommerce 迷你購物車的指南。 但首先，讓我們看看究竟什麼是迷你手推車，以及為什麼您可能需要使用迷你手推車。

什麼是 WooCommerce 迷你購物車？

您的 WooCommerce 迷你購物車只是您實際 WordPress 購物車頁面的一種小形式。它包含添加到購物車的產品以及更多詳細信息。迷你購物車的內容取決於您的活動 WordPress 主題，但它們通常包括：

您的產品列表
小計
產品縮略圖
產品數量

無論您的 WooCommerce 迷你購物車顯示的詳細信息如何，它都是您瀏覽 WooCommerce 商店時客戶用戶體驗的重要組成部分。這是一個易於訪問的工具，您的客戶可以使用它直接從您網站的任何部分移至結帳頁面，並有助於跟踪購物車項目。

甚至我們在 QuadLayers 也使用迷你推車。如果您將產品添加到購物車，您可以通過將鼠標懸停在標題菜單中的購物車圖標上來查看迷你購物車。

如果您查看下面的屏幕截圖，我們已將產品 WooCommerce Checkout Manager 添加到購物車中。這也與數量和小計一起顯示在迷你購物車中。

創建 woocommerce 迷你購物車四層

為什麼要為您的 WooCommerce 網站創建迷你購物車？

默認情況下，您的 WooCommerce 主題可能帶有自己的 WooCommerce 迷你購物車。即使是這樣，它的位置和样式本身也可能無法從您的主題設置中完全自定義。此外，它也可能不適合您的迷你推車。

我們的一些讀者可能會考慮添加浮動迷你購物車，而其他人可能會將其添加到側邊欄或頁腳。您可能要考慮使用各種可能的迷你購物車方法。此外，您可能還需要向您的迷你購物車添加更多內容，例如運費、其他購物車詳細信息、自定義消息等。

使用購物車時的舒適度對您和您的客戶提高實際銷售額也很重要。完全符合您網站審美的定制化、可銷售的結賬可以改變您的 WooCommerce 網站的遊戲規則。因此，如果您想創建自定義迷你購物車並將其添加到網站的不同頁面，那就別無所求！

如何在 WordPress 中創建 WooCommerce 迷你購物車

要創建和添加您的 WooCommerce 迷你購物車，您可以使用3 種不同的方法：

添加購物車小部件
使用 WordPress 插件
以編程方式

讓我們看一下每種方法以及所有這些方法所涉及的步驟，從使用 WordPress Widgets 的默認方法開始。

1. 使用 WordPress 小部件創建 WooCommerce 迷你購物車

默認情況下，您可以使用WooCommerce 購物車小部件創建 WooCommerce 迷你購物車。 由於我們使用的是小部件，因此它只能定位在主題的可用小部件區域中。最常見的領域包括：

小部件側邊欄
標題下方
頁腳

根據您的主題，可以有更多小部件區域。但請確保您也使用與 WooCommerce 兼容的主題之一。

1.1。選擇小部件區域

要添加購物車小部件，您需要先選擇一個小部件區域。因此，打開您的 WP Admin Dashboard 並轉到Appearance > Widgets 。然後，您為您的迷你購物車選擇小部件區域。

對於我們的演示，我們將使用Sidebar 。但是您可以使用最方便的小部件區域。

創建 woocommerce 迷你購物車 - 小部件頁面

1.2. 將購物車小部件添加到小部件區域

為您的迷你購物車選擇小部件區域後，單擊+ 按鈕添加小部件。使用搜索欄搜索購物車並單擊它以添加小部件。

如果您看不到小部件，請確保您已在您的網站上正確設置 WooCommerce。

在這裡，您還可以啟用或禁用如果購物車為空則隱藏選項。我們建議您啟用它，因為如果您客戶的購物車為空，您的側邊欄購物車將被隱藏。這也將使您的網站看起來更實用。

創建 woocommerce 迷你購物車 - 添加購物車截圖

完成添加購物車小部件後，更新小部件以保存更改。現在，您的側邊欄迷你購物車應該出現在您的前端。

當然，您也可以將您的迷你購物車添加到不同的小部件區域。只需選擇小部件頁面下的位置，您就可以輕鬆地將小部件添加到頁眉下方或頁腳。

創建 woocommerce 迷你購物車 - 標題購物車

雖然這是創建 WooCommerce 迷你購物車的最簡單方法，但它有很多限制。一方面，您的迷你購物車沒有定制。您在迷你購物車的外觀以及客戶如何訪問它方面非常有限。

迷你購物車位置僅限於您的主題提供的小部件區域。此外，客戶或網站所有者也無法使用彈出式迷你購物車或購物車的自定義字段等功能。因此，如果您想要一個更可定制的迷你購物車，我們建議您繼續閱讀並考慮以下方法。

2. 使用 WordPress 插件創建 WooCommerce 迷你購物車

使用 WordPress 插件是管理您的購物車體驗的最簡單方法之一。您可以確保您的客戶可以在插件的幫助下隨時輕鬆地結賬。它們還允許您簡化網站的結帳體驗。

迷你購物車插件提供漂亮的功能來促進您的產品銷售並改善您的潛在客戶。例如：

您可以為迷你購物車啟用懸停購物車圖標和彈出窗口。因此，您的客戶可以隨時訪問它們，同時保持商店其他內容的清潔和無干擾。
許多購物車和產品元素可以添加到迷你購物車本身。例如，附加產品信息、更改數量、編輯購物車小計和總顯示等等。
通過插件，您可以添加一些智能功能，例如直接從迷你購物車添加優惠券、專用特色產品和推薦產品建議。

因此，我們強烈建議使用專門用於添加和自定義 WooCommerce 迷你購物車的 WordPress 插件。

對於我們的演示，我們將使用Woocommerce Cart All in One 插件。它是在您的網站上創建迷你購物車的最佳插件之一。該插件也非常易於使用，並具有您需要的所有功能，例如迷你購物車彈出窗口、側邊欄購物車或菜單購物車自定義選項。

我們還列出了最好的 WooCommerce 迷你購物車插件。如果你想使用任何其他插件，你也可以看看它。

2.1。安裝並激活插件

讓我們從安裝和激活插件開始。

打開您的WP 管理儀表板，然後轉到側邊欄上的插件 > 添加新的。

創建 woocommerce 迷你購物車 - 安裝插件頁面

然後，使用右上角的搜索欄搜索Cart All In One For WooCommerce 。

找到插件後，單擊立即安裝以安裝插件。最後，安裝後激活插件。

創建 woocommerce 迷你購物車 - 安裝和激活插件

如果您想使用高級插件，則必須手動上傳和安裝。查看我們手動安裝 WordPress 插件的詳細指南以獲取更多信息。

現在，我們需要配置插件以啟用您的 WooCommerce 迷你購物車。

2.2. 為 WooCommerce 插件配置購物車多合一

要配置插件的 WooCommerce 迷你購物車，請單擊WP Admin Dashboard上的Cart All in One 選項卡。這將打開插件的儀表板頁面。

創建 woocommerce 迷你購物車 - 購物車多合一

在插件的免費版本中，您可以啟用Sidebar Mini cart或Menu mini cart 。您還可以添加和配置 AJAX 添加到購物車按鈕，但我們現在只關注迷你購物車選項。

要在您的網站上激活迷你購物車彈出窗口，請打開側邊欄購物車並單擊啟用。您還可以使用移動啟用選項來啟用/禁用移動設備上的迷你購物車彈出窗口。最後，保存您的更改。

現在，去重新加載您網站的前端。您應該會在網頁上看到新的迷你購物車圖標。您只需單擊它即可打開您的迷你購物車。

此外，您還可以將菜單推車添加到任何菜單。只需像前面的步驟一樣打開菜單購物車選項卡並啟用它。如果需要，您還可以在移動菜單上啟用它。

接下來，您需要添加 WordPress 菜單，以便在您的網站上顯示菜單購物車。只需在“菜單”字段中選擇要添加到 WooCommerce 迷你購物車的菜單。然後點擊保存。

您現在應該在您的網站上看到您的菜單迷你購物車。它將被添加到您為迷你購物車選擇的菜單中。

2.3. 使用插件自定義您的 WooCommerce 迷你購物車

定制是Cart All in One 插件的一項關鍵功能。您可以自由自定義側邊欄購物車以及菜單購物車。這包括顏色、迷你購物車樣式、位置、自定義動畫、迷你購物車圖標、側邊欄菜單樣式等等。

要訪問自定義選項，請轉到 WP 管理儀表板上的外觀 > 自定義。您將被重定向到您的主題定制器。在這裡，單擊購物車 All in One For WooCommerce ，您應該會看到所有迷你購物車自定義選項。

創建 woocommerce 迷你購物車 - 購物車定制

對於這個演示，我們將自定義側邊欄購物車。因此，單擊Sidecart Cart ，您應該會看到它的所有選項。現在，我們將使用顯示側邊欄內容選項啟用更小的迷你購物車並更改側邊欄購物車位置。

但是您可以使用這些選項進一步自定義您的迷你購物車，具體取決於它如何適合您的網站。還有很多需要編輯的地方，比如與購物車圖標本身的交互，因此當您懸停圖標時會出現迷你購物車，自定義加載圖標等等。

創建 woocommerce 迷你購物車 - 購物車定制風格

完成更改後，單擊發布保存它們。您將能夠在您的網站上看到您的迷你購物車的所有這些自定義設置。

這就是使用插件自定義迷你購物車的基本要點。如果您想了解有關插件提供的所有自定義選項的更多信息，我們強烈建議您閱讀他們的文檔。

3) 以編程方式創建 WooCommerce 迷你購物車

假設您不想使用插件來添加您的 WooComerce Mini 購物車以維護您網站的輕量級框架。然後，您也可以選擇以編程方式創建一個。

這將要求您使用自定義函數創建自定義短代碼並將其粘貼到主題的functions.php文件中。然後，您可以在網站的任何部分使用短代碼，甚至可以將其添加到任何 WordPress 或 WooCommerce 模板文件中，以直接添加 WooCommerce 迷你購物車。

由於我們將更改一些核心文件，因此最好備份您的網站並以編程方式或使用其中一個子主題插件創建子主題。這可確保您在更新 WordPress 主題時不會丟失自定義代碼。

3.1。將自定義簡碼添加到您的主題功能

我們將通過主題文件編輯器將自定義代碼添加到您網站的主題文件中。如果您對向 WooCommmerce 添加代碼不太滿意，我們建議您先閱讀本文。

準備好後，從WP Admin Dashboard上的外觀 > 主題文件編輯器打開主題編輯器。使用右側的主題文件側邊欄，然後單擊functions.php 。這將在您的主題編輯器上打開 functions.php 文件。

創建 woocommerce 迷你購物車 - 功能 php

現在，將以下代碼粘貼到您的主題編輯器中：

 功能 custom_mini_cart() {
echo '<a href="#" class="dropdown-back" data-toggle="dropdown"> ';
echo '<i class="fa fa-shopping-cart" aria-hidden="true"></i>';
echo '<div class="basket-item-count">';
echo '<span class="cart-items-count count">';
echo WC()->cart->get_cart_contents_count();
迴聲'</span>';
迴聲'</div>';
迴聲'</a>';
echo '<ul class="dropdown-menu dropdown-menu-mini-cart">';
echo '<li> <div class="widget_shopping_cart_content">';
woocommerce_mini_cart();
迴聲'</div></li></ul>';

}
add_shortcode('quadlayers-mini-cart', 'custom_mini_cart');

添加代碼後，單擊更新文件。這將為您的網站創建一個名為“[quadlayers-mini-cart]”的自定義短代碼。現在，您可以在任何帖子、頁面或小部件上使用此短代碼來添加您的自定義 WooCommerce 迷你購物車。

3.2. 在 WooCommerce 模板中使用簡碼

您還可以使用以下代碼片段將您的自定義迷你購物車添加到任何主題模板文件或 WooCommerce 模板。

 <?php echo do_shortcode('[quadlayers-mini-cart]'); ?>

例如，讓我們將此代碼添加到您的 WooCommerce 產品存檔模板文件中。要打開您的 WooCommerce 模板文件，請從您的 WordPress 儀表板轉到插件 > 插件文件編輯器。

然後，使用右上角的Select Plugin to Edit選項並選擇WooCommerce並單擊Select。 使用插件文件菜單，單擊模板> archive-product.php。

接下來，將以下代碼行添加到模板的任何適當部分。

 echo do_shortcode('[quadlayers-mini-cart]');

對於我們的演示，我們將在do_action( 'woocommerce_before_main_content' ) ; 線。但是您可以在任何模板文件上以及在任何需要的地方添加代碼片段。

最後，在插件編輯器中添加代碼後更新文件。迷你購物車將顯示在您指定的 WooCommerce 頁面上。在我們的例子中，它是 Shop/Product Archive 頁面。

這種方法會將您的迷你購物車添加到模板中。但是，迷你購物車的外觀可能不完全符合您的要求，並且可能需要使用主題的文件樣式表進行額外的樣式設置。因此，僅當您習慣於編碼並且具備將 PHP 和 CSS 添加到 WordPress 的知識時，才建議使用此方法。

獎勵：如何在 WooCommerce 中跳過購物車頁面

如果您希望您的客戶有一個更快的結帳過程，您也可以選擇完全跳過購物車頁面。由於迷你購物車已經提供給您的客戶，因此對購物車頁面的需求並不大。因此，您可以在客戶想要購買時直接將其重定向到結帳頁面。

您可以通過使用專用插件或使用自定義函數來做到這一點。現在，我們將介紹如何以編程方式跳過購物車頁面。

但在繼續之前，您需要從 WP 儀表板轉到WooCommerce > 設置並打開產品選項卡。在常規選項下，禁用兩個添加到購物車行為選項。這確保了我們的自定義函數不會受到干擾。

現在，使用與上述相同的步驟再次打開您的子主題的 functions.php 文件。只需從外觀 > 主題文件編輯器轉到主題編輯器，然後單擊functions.php文件。

然後，在此處粘貼以下代碼片段。

 add_filter('add_to_cart_redirect', 'ql_skip_cart_page');
功能 ql_skip_cart_page () {
全球$woocommerce；
$redirect_checkout = $woocommerce->cart->get_checkout_url();
返回 $redirect_checkout；
}

現在，每次您的客戶將產品添加到您的購物車時，他們都會被直接帶到結帳頁面，而不是他們的購物車頁面。

為了簡化此過程，您還可以使用 Direct Checkout for WooCommerce 之類的插件。如果您想了解它以及為什麼要考慮使用它，可以在此處查看我們的專用指南。

結論

這就是我們關於如何創建 WooCommerce 迷你購物車的指南。 設置和自定義 WooCommerce 迷你購物車不是一個繁瑣的過程，您可以選擇使用不同的方法來做到這一點。讓我們總結一下我們在今天的指南中使用的方法來添加和自定義我們的 WooCommerce 迷你購物車：

使用購物車小部件
使用專用的 WordPress 插件
以編程方式使用自定義簡碼和模板文件

如果您不確定要使用哪個流程，我們強烈建議您使用插件來創建您的 WooCommerce 迷你購物車。這種方法不僅更安全、更容易，而且您還可以為您的迷你推車獲得大量專用的定制和個性化選項。如果您是 WordPress 初學者並且想要添加一個限制最少的 WooCommerce 迷你購物車，我們強烈建議您使用專用插件。

此外，如果您正在尋找其他方法來縮短結帳流程並提高銷售額，為什麼不閱讀我們的其他一些文章：

自定義 WooCommerce 購物車頁面的最佳插件
如何創建 WooCommerce 一頁結帳
如何創建 WooCommerce 直接結帳鏈接

那麼你現在可以在你的網站上添加一個迷你購物車嗎？還是你已經添加了？我們很高興在評論中了解它。