WordPress 的最佳 WooCommerce 代碼片段

已發表: 2023-05-12

你想知道WordPress 最好的 WooCommerce 代碼片段嗎? 如果您打算調整在線商店並添加更多功能,請繼續閱讀本文。 本指南將向您展示一組您應該知道的代碼片段。

但首先,讓我們看看代碼片段是什麼以及為什麼我們需要使用它。

什麼是代碼片段?

代碼片段是在網站或程序上執行特定任務或功能的一小段代碼。 它通常用於自定義網站/工具並增強功能。

您可以使用任何編程語言編寫代碼片段,複雜程度從簡單的一行代碼到多行函數或算法。 此外,您還可以在代碼庫、論壇和編程博客中在線找到它們,開發人員通常會共享和修改它們以滿足他們的特定需求。

使用代碼片段可以節省時間和精力。 但了解代碼的工作原理並確保其安全且不會導致任何漏洞至關重要。 最重要的是,當使用來自外部來源的代碼片段時,檢查其許可和歸屬要求對於避免侵犯版權至關重要。

為什麼要將 WooCommerce 代碼片段添加到 WordPress?

如果您為 WordPress 使用 WooCommerce 代碼片段,那麼所有者和開發人員都將受益。

例如,您可以使用 WooCommerce 代碼片段來添加新功能或更改在線商店的現有功能。 這有助於改善用戶體驗並增加銷售額。

例如,您可以使用代碼片段添加自定義產品排序選項或更改結帳流程以更好地滿足特定業務的需求。

此外,為 WordPress 使用 WooCommerce 代碼片段比安裝和配置單獨的插件更有效,因為它允許更有針對性的修改並避免與其他插件或主題的潛在衝突。

此外,WooCommerce 代碼片段可以幫助提高在線商店的安全性和性能。 通過將自定義代碼添加到 functions.php 文件或單獨的插件文件,開發人員可以確保代碼針對網站的特定需求進行了優化。

最後,代碼片段可以提供比僱用開發人員更具成本效益的解決方案。 即使某些自定義可能需要更複雜的開發工作,您也可以使用在線找到的簡單代碼片段進行許多修改。

但是,編寫不當的代碼可能會導致錯誤和安全漏洞。 因此,我們建議在將代碼添加到網站之前在暫存環境中測試和理解代碼。

此外,請備份網站的文件和數據庫,以確保您的辛勤工作。

如何將 WooCommerce 代碼片段添加到 WordPress

您可以通過幾個簡單的步驟將 WooCommerce 代碼片段添加到 WordPress:

  • 打開 functions.php 文件:您可以在 functions.php 文件中找到大多數 WordPress 代碼片段。 它通常在主題文件夾中; 您可以通過 WordPress 儀表板或 FTP 客戶端訪問它。
  • 添加代碼片段:將所需片段複製並粘貼到 functions.php 文件中。 確保將它添加到適當的位置,例如在文件的末尾,在任何現有代碼之後。
  • 保存更改:添加代碼片段後,將更改保存到 functions.php 文件。 這將激活您剛剛輸入的代碼。
  • 測試功能:添加代碼片段後,測試新功能以確保其按預期工作。

但是,如果您不想將代碼片段添加到父主題的 functions.php 文件中,則可以創建自定義子主題。 這樣,主題更新就不會造成任何問題。

WordPress 的最佳 WooCommerce 代碼片段

現在我們已經了解了為什麼以及如何為 WordPress 添加 WooCommerce 代碼片段。 接下來,讓我們轉到為您的一般需求選擇的最佳 WooCommerce 代碼片段。

簡而言之,我們將要分享的代碼將幫助您:

  • 添加自定義產品選項卡
  • 將 WooCommerce 支持添加到主題
  • 向 WooCommerce 添加自定義貨幣
  • 在模板中顯示“我的帳戶”鏈接
  • 自動完成訂單
  • 更改商店中顯示的產品數量
  • 禁用搜索
  • 修改加入購物車按鈕文字
  • 調整商店頁面標題

讓我們深入了解每個代碼。

1) 添加自定義產品標籤

在 WooCommerce 中添加自定義產品選項卡是顯示有關產品的額外信息的好方法。 所以,這是一個代碼片段,可以讓你添加一個:

 // 添加自定義產品標籤

add_filter( 'woocommerce_product_tabs', 'add_custom_product_tab' );
函數 add_custom_product_tab( $tabs ) {
$tabs['custom_tab'] = array(
'title' => __( '自定義標籤', 'woocommerce' ),
'優先級'=> 50,
'callback' => 'custom_product_tab_content'
);

返回 $ 標籤;

}

// 自定義產品標籤內容

功能 custom_product_tab_content() {
echo '<h2>自定義產品標籤</h2>';
echo '<p>這裡是自定義內容。</p>';
}

此代碼向產品頁面添加一個新的“自定義選項卡”選項卡,優先級為 50。此外,您可以根據需要更改自定義產品選項卡的標題和內容。 回調函數custom_product_tab_content顯示選項卡的內容。 您可以根據需要自定義代碼。

2) 在第三方主題中聲明 WooCommerce 支持

如果您使用的是默認不提供 WooCommerce 支持的第三方主題,您可以通過將以下代碼片段添加到您網站主題的 functions.php 文件來解決問題:

 // 為主題添加 WooCommerce 支持

函數 mytheme_add_woocommerce_support() {
add_theme_support( 'woocommerce' );
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

資料來源:媒體。

3) 向 WooCommerce 添加自定義貨幣

如果您想向 WooCommerce 添加自定義貨幣,您可以使用以下代碼片段:

 // 向 WooCommerce 添加自定義貨幣

函數 add_my_currency( $currencies ) {
$currencies['ABC'] = __( '我的貨幣', 'woocommerce' );
返回$貨幣;
}

add_filter( 'woocommerce_currencies', 'add_my_currency' );
函數 add_my_currency_symbol( $currency_symbols ) {
$currency_symbols['ABC'] = '$'; // 將 ABC 更改為您的自定義貨幣代碼,並將 $ 更改為您的貨幣符號。
返回 $currency_symbols;
}

add_filter( 'woocommerce_currency_symbols', 'add_my_currency_symbol' );

在這裡,我們使用兩個過濾器——woocommerce_currencieswoocommerce_currency_symbols來添加我們的自定義貨幣及其符號。 首先,將您的貨幣名稱和代碼添加到可用貨幣列表中。 其次,您可以為自定義貨幣代碼添加貨幣符號。

4) 在模板文件中顯示我的帳戶鏈接

要在 WooCommerce 的模板文件中顯示我的帳戶鏈接,您可以使用以下代碼片段:

 <?php if (is_user_logged_in()) : ?>

<a href="<?php echo esc_url( wc_get_account_endpoint_url( 'dashboard' ) ); ?>"><?php esc_html_e( '我的賬戶', 'woocommerce' ); ?></a>

<?php 其他: ?>

<a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>"><?php esc_html_e( '登錄/註冊', 'woocommerce' ); ?></a>

<?php 結尾; ?>

此代碼檢查用戶是否使用is_user_logged_in()函數登錄。

如果用戶已登錄,它會使用wc_get_account_endpoint_url( 'dashboard' )函數顯示指向儀表板的鏈接。 但是,如果用戶未登錄,它會使用wc_get_page_permalink( 'myaccount' )函數顯示指向“我的帳戶”頁面的鏈接。

您可以將此代碼添加到您想要顯示我的帳戶鏈接的 WooCommerce 主題中的任何模板文件。 例如,您可以將它添加到您的 header.php 文件中以在您網站的標題中顯示該鏈接。

5) 自動完成訂單

如果您想在 WooCommerce 中自動完成訂單,您可以使用以下代碼片段:

 // 自動完成訂單
add_action( 'woocommerce_thankyou', 'custom_woocommerce_auto_complete_order' );

函數 custom_woocommerce_auto_complete_order( $order_id ) {
如果(!$order_id){
返回;
}

$order = wc_get_order( $order_id );
$order->update_status('完成');
}

資料來源:計算器溢出

此代碼向woocommerce_thankyou函數添加一個操作掛鉤,該掛鉤在訂單完成時觸發。 激活此掛鉤後,將執行custom_woocommerce_auto_complete_order函數。

該函數首先檢查是否設置了$order_id變量。 如果未設置,則返回。 否則,它從wc_get_order()函數訪問訂單對象。

最後,它使用update_status()方法將訂單狀態設置為“已完成”。

請注意,自動完成訂單可能並不適合所有產品或業務。 因此,在激活此代碼之前考慮您的具體需求至關重要。

6) 更改每頁顯示的產品數量

如果您想更改 WooCommerce 中每頁顯示的產品數量,您可以使用以下代碼片段:

 // 修改每頁產品數
add_filter( 'loop_shop_per_page', 'custom_loop_shop_per_page', 22 );
函數 custom_loop_shop_per_page( $cols ) {
$cols = 14; // 將此數字更改為每頁所需的產品數量。
返回$列;

}

此代碼向loop_shop_per_page函數添加了一個過濾器。 這控制了 WooCommerce 中每頁顯示的產品數量。 然後執行custom_loop_shop_per_page函數,它將當前列數作為參數。

在該函數中,您還可以將$cols變量設置為每頁所需的產品數量(在本例中為 14)。 最後,您將獲得更新的列數。

更改每頁顯示的產品數量可能會影響用戶體驗和頁面加載時間。 因此,在更改此設置之前必須考慮您的特定需求。

7) 禁用搜索

要在 WordPress 中禁用搜索,您可以使用以下代碼片段:

 // 禁用搜索
函數 fb_filter_query($query, $error = true){
如果(is_search()){
$query->is_search = false;
$query->query_vars[s] = false;
$query->query[s] = false;

// 出錯
如果($error == true)
$query->is_404 = true;
}
}

add_action( 'parse_query', 'fb_filter_query' );
add_filter( 'get_search_form', create_function( '$a', "return null;" ) );

資料來源:計算器溢出

此代碼使用名為custom_disable_search()的自定義函數來禁用 WordPress 中的搜索功能。 在這裡,您向parse_query函數添加了一個操作掛鉤,在執行搜索查詢時觸發。

在函數中,它檢查當前查詢是否為搜索查詢(is_search()); 如果是,它將查詢對象的is_search屬性設置為 null。 它還將 s 查詢變量設置為 null,有效地禁用搜索查詢。

最後,此代碼片段將過濾器添加到get_search_form以從您的 WordPress 站點隱藏搜索表單。

8) 更改添加到購物車按鈕文本

要更改 WooCommerce 中的“添加到購物車”按鈕文本,您可以使用以下代碼片段:

 add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_text' );
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_add_to_cart_text' );

函數 custom_add_to_cart_text() {
返回 __( '立即購買', 'woocommerce' );
}

資料來源:Njengah

此代碼向woocommerce_product_single_add_to_cart_textwoocommerce_product_add_to_cart_text函數添加了兩個過濾器,它們控制 WooCommerce 中的“添加到購物車”按鈕文本。 然後執行custom_add_to_cart_text()函數,返回更新後的按鈕文本。

我們使用__()函數來訪問 WooCommerce 翻譯文件中定義的“立即購買”文本。 如果您想將文本更改為其他內容,請將“立即購買”替換為您想要的文本。

9) 替換 WooCommerce 中的商店頁面標題

要替換 WooCommerce 中的商店頁面標題,您可以使用以下代碼片段:

 add_filter( 'woocommerce_page_title', 'custom_shop_page_title' );
函數 custom_shop_page_title( $page_title ) {
如果('商店'== $page_title){
return __( 'New Shop Title', 'woocommerce' );
}

返回 $page_title;
}

此代碼將向woocommerce_page_title 函數添加一個過濾器,該函數控制 WooCommerce 商店頁面的標題。 然後執行custom_shop_page_title()函數,檢查頁面標題是否為“商店”,如果是,則返回更新後的標題(“新商店標題”)。

此代碼片段使用__()函數訪問 WooCommerce 翻譯文件中定義的更新商店頁面標題的翻譯文本。 但是,如果您想將文本更改為其他內容,請將“New Shop Title”替換為您想要的文本。

結論

使用適用於 WordPress 的 WooCommerce 代碼片段是自定義在線商店和添加新功能的強大方式。 例如,如果您想要更改商店的外觀、結帳流程或添加新功能,代碼片段可以幫助您實現目標。

要添加代碼片段,請將代碼粘貼到子主題的 functions.php 文件中或創建自定義插件。 但請務必記住,修改您網站的代碼可能會產生意想不到的後果。 因此,我們始終建議在進行任何更改之前創建您網站的備份。

使用我們上面提供的代碼,您可以運行具有許多自定義功能的出色 WooCommerce 商店。 總結一下,我們分享了一些片段

  • 添加自定義產品選項卡
  • 將 WooCommerce 支持添加到主題
  • 向 WooCommerce 添加自定義貨幣
  • 在模板中顯示“我的帳戶”鏈接
  • 自動完成訂單
  • 更改商店中顯示的產品數量
  • 禁用搜索
  • 修改加入購物車按鈕文字
  • 調整商店頁面標題

您可以選擇一個代碼並根據您的要求使用它。

我們希望您發現這篇文章很有用並且喜歡閱讀它。 如果您願意,請考慮在社交媒體上與您的朋友和其他博主分享這篇文章。 您還可以瀏覽我們的博客存檔以了解更多 WordPress/WoCommerce 指南。

我們是否需要向本指南添加任何其他片段?

請在下面的評論中告訴我們。

您可能喜歡的類似文章:

  • 如何按屬性過濾 WooCommerce 產品
  • 最佳 WooCommerce 捐贈插件
  • 最佳 WooCommerce 許可證管理器插件