WooCommerce程式碼收集

神馬和浮雲發表於2014-04-08

修改首頁和分類頁面每頁產品數量

每頁顯示多少產品預設跟隨設定 » 閱讀設定 » 部落格頁面至多顯示的值，若要產品索引頁和博文索引頁使用不同的設定，可以使用下面的程式碼為產品索引頁單獨設定每頁產品數。

add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 24;' ), 20 );

　　程式碼註釋：每頁顯示24個產品。程式碼放在主題的functions.php中即可

下面整理更多適用於WooCommerce的短程式碼，方便查閱和使用，更是為了理清思路，提高自己。以下WooCommerce簡稱WC，程式碼放在主題的functions.php中即可。

WooCommrce官方程式碼集»

在主題中宣告對WooCommerce的支援

add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
    add_theme_support( 'woocommerce' );
}

禁用WooCommerce預設樣式

// Disable WooCommerce styles
define('WOOCOMMERCE_USE_CSS', false);

禁用預設樣式，就要引入自己的樣式，可以直接寫在style.css中，也可以另外寫一個樣式表

function wp_enqueue_woocommerce_style(){
    wp_register_style( 'woocommerce', get_template_directory_uri() . '/css/woocommerce.css' );
    if ( class_exists( 'woocommerce' ) ) {
        wp_enqueue_style( 'woocommerce' );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );

　　如果樣式表中用到了WooCommerce預設的圖片，還應將woocommerce/assets/images資料夾下的圖片拷貝到主題目錄。

WC麵包屑導航

修改麵包屑導航位置

首先刪除預設的麵包屑導航

remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);

將導航新增到其它位置，例如放在header.php中，則直接在header.php適當位置插入如下程式碼

if( function_exists( 'woocommerce_breadcrumb') ) woocommerce_breadcrumb();

也可以用add_action新增，例如

add_action( 'woocommerce_after_main_content', 'woocommerce_breadcrumb' );

不知道有哪些hooks可用？那麼瞭解一下WC內建的Actions和Filters

修改麵包屑導航的引數

// Code source： https://gist.github.com/dwiash/4064836
function my_woocommerce_breadcrumbs() {
    return array(
        'delimiter'   => ' / ',
        'wrap_before' => '<nav itemprop="breadcrumb">',
        'wrap_after'  => '</nav>',
        'before'      => '',
        'after'       => '',
        'home'        => _x( 'Home', 'breadcrumb', 'woocommerce' ),
    );
}
add_filter( 'woocommerce_breadcrumb_defaults', 'my_woocommerce_breadcrumbs' );

　　引數註釋：

delimiter：分隔符

wrap_before：起始標籤

wrap_after：結束標籤

before：起始標籤之後、麵包屑導航連結之前的內容

after：麵包屑導航連結之後、結束標籤之前的內容

home：首頁文字，例如像給首頁加font-awesome，可以這樣設定

'home' => _x( '<i></i> Home', 'breadcrumb', 'woocommerce' ),

修改分頁導航的引數

// Change args of wc pagination
add_filter( 'woocommerce_pagination_args', 'theme_wc_pagination_args' );
function theme_wc_pagination_args( $args ){
    $args['prev_text'] = '« Previous page';
    $args['next_text'] = 'Next page »';
    $args['end_size'] = 3;
    $args['mid_size'] = 3;
    return $args;
}

　　引數註釋：

prev_text: 向前翻頁按鈕的文字

next_text: 向後翻頁按鈕的文字

end_size：頁面分頭部、中間、後、尾部三部分顯示，中間用省略號分隔，這個引數控制頭部和尾部顯示多少頁

mid_size: 控制中間顯示多少頁

修改首頁和分類頁每行產品數量

注意，WC每行產品數量是靠給每行第一個產品元素新增.first class、每行最後一個新增.last class實現的，所以這段程式碼只能決定在哪裡強制換行，與寬度無關。也就是說如果你設定一行顯示4個產品，你不能期待每個li的寬度就是1/4，這個寬度是樣式表設定的，如果樣式表設定的寬度只夠一行放下3個，而程式碼設定一行顯示4個，那就會出現每行個數不等的情況。

/* Change the number of products per column */
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
    function loop_columns() {
        return 5;
    }
}

給列表頁每個產品新增產品描述

// Add product description
function theme_wc_single_excerpt(){
    global $post;
    echo '<div>' . apply_filters( 'woocommerce_short_description', $post->post_excerpt ) . '</div>';
}
add_action( 'woocommerce_after_shop_loop_item_title', 'theme_wc_single_excerpt' );

隱藏相關產品列表

預設產品頁面底部有相關產品一欄，要去掉這個欄目，使用下面的程式碼。

function wc_remove_related_products( $args ) {
    return array();
}
add_filter('woocommerce_related_products_args','wc_remove_related_products', 10);

修改相關產品列表每行產品數量

用重新定義woocommerce_output_related_products函式的方法改變相關產品數量，同樣只是改變換行的位置，需要配合適當的css設定寬度才能實現最終效果。

/* Change number of relapted products */
function woocommerce_output_related_products() {
    woocommerce_related_products(10,3); // Display 10 products in rows of 3
}

　　程式碼註釋：在每個產品頁面展示最多10個相關產品，每行顯示3個。

修改產品縮圖每行數量

和首頁產品每行數量類似，是通過新增.first和.last class實現，要真正達到自己想要的效果，還要新增適當的樣式。

add_filter ( 'woocommerce_product_thumbnails_columns', 'woo_thumb_cols' );
function woo_thumb_cols() {
    return 4; // .last class applied to every 4th thumbnail
}

修改“Add To Cart”按鈕的文字

function woo_custom_cart_button_text() {
    return __('My Button Text', 'woocommerce');
}
add_filter('single_add_to_cart_text', 'woo_custom_cart_button_text');

　　這段程式碼在實現Catalog Mode中十分有用。

修改貨幣符號

function change_existing_currency_symbol( $currency_symbol, $currency ) {
    switch( $currency ) {
        case 'AUD': $currency_symbol = 'AUD$'; break;
    }
    return $currency_symbol;
}
add_filter('woocommerce_currency_symbol', 'change_existing_currency_symbol', 10, 2);

　　程式碼註釋：將澳元的貨幣符號從預設的$改為AUD$。

新增自定義排序選項

下面的程式碼演示如何新增一個隨機排序（Random）選項，新增其它選項方法類似。

function custom_woocommerce_get_catalog_ordering_args( $args ) {
    $orderby_value = isset( $_GET['orderby'] ) ? woocommerce_clean( $_GET['orderby'] ) : apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby' ) );
    if ( 'random_list' == $orderby_value ) {
        $args['orderby'] = 'rand';
        $args['order'] = '';
        $args['meta_key'] = '';
    }
    return $args;
}
add_filter( 'woocommerce_get_catalog_ordering_args', 'custom_woocommerce_get_catalog_ordering_args' );
function custom_woocommerce_catalog_orderby( $sortby ) {
    $sortby['random_list'] = __('Sort by random order');
    return $sortby;
}
add_filter( 'woocommerce_default_catalog_orderby_options', 'custom_woocommerce_catalog_orderby' );
add_filter( 'woocommerce_catalog_orderby', 'custom_woocommerce_catalog_orderby' );

為訂單新增附加費用/手續費

以下程式碼演示收取每單商品費用加運費總和的1%作為附加費用。

add_action( 'woocommerce_calculate_totals','woocommerce_custom_surcharge' );
function woocommerce_custom_surcharge() {
    global $woocommerce;
    if ( is_admin() && ! defined( 'DOING_AJAX' ) )
        return;
    $percentage = 0.01;
    $surcharge = ( $woocommerce->cart->cart_contents_total + $woocommerce->cart->shipping_total ) * $percentage;
    $woocommerce->cart->add_fee( 'Surcharge', $surcharge, false, '' );
    $woocommerce->cart->fee_total += $surcharge;
}

付款成功後立刻傳送Invoice

程式碼來自：azhowto.com

/**
 * send invoice straight away if payment is successful
 * @param  string $order_id valid payment order id
 * @return null
 */
function send_invoice_upon_payment_successful($order_id) {
  global $woocommerce;
  $order = new WC_Order($order_id);
  $mailer = $woocommerce->mailer();
  $mailer->customer_invoice( $order );
}
add_action('woocommerce_payment_complete', 'send_invoice_upon_payment_successful');

產品列表頁：加入購物車按鈕移動到標題之前

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10 );

產品列表頁：新增連結

下面的程式碼演示如何在標題之前新增連結。

add_action( 'woocommerce_before_shop_loop_item_title', 'wc_template_loop_additional_links', 10 );
function wc_template_loop_additional_links(){
    ?>
    <a href="#" class="button1-link button product_type_simple">Button 1 </a>
    <a href="#" class="button2-link button product_type_simple">Button 2 </a>
    <?php
}

修改產品列表頁按鈕文字

產品列表頁的按鈕文字一般是：add to cart、select options, view options和read more。下面程式碼演示如何更改這些按鈕文字，使用程式碼時，只選擇需要的即可，比如要修改view options，只需add_filter( ‘grouped_add_to_cart_text’, ‘wc_add_to_cart_text’ )，其它的刪掉。

add_filter( 'variable_add_to_cart_text', 'wc_add_to_cart_text' ); //預設為select options
add_filter( 'grouped_add_to_cart_text', 'wc_add_to_cart_text' ); //預設為view options
add_filter( 'add_to_cart_text', 'wc_add_to_cart_text' ); //預設為add to cart
add_filter( 'external_add_to_cart_text', 'wc_add_to_cart_text' ); //預設為read more
add_filter( 'not_purchasable_text', 'wc_add_to_cart_text' );//預設為read more
add_filter( 'out_of_stock_add_to_cart_text', 'wc_add_to_cart_text' );//預設為read more
function wc_add_to_cart_text(){
    return 'Purchase';
}

　　無論產品是否有屬性，新增到購物車的按鈕名稱都是Purchase.

去掉產品頁Reviews選項卡

add_filter( 'woocommerce_product_tabs', 'wc_remove_reviews_tab' );
function wc_remove_reviews_tab( $tabs ){
    unset($tabs['reviews']);
    return $tabs;
}

產品頁新增自定義選項卡

新增一個features選項卡，內容可以用custom field來寫。

//Add custom tab
add_filter( 'woocommerce_product_tabs', 'wc_add_features_tab' );
function wc_add_features_tab( $tabs ){    
    global $product;
    $content = get_post_meta( $product->id, 'product_features', true );
    if( !empty($content) ) {
        $tabs[ 'features' ] = array(
            'title'    => 'Features',
            'priority' => 1,
            'callback' => 'wc_features_tabs_panel_content',
            'content'  => $content,  // custom field
        );
    }
    return $tabs;
}
function wc_features_tabs_panel_content( $key, $tab ){
    echo  '<h2>' . $tab['title'] . '</h2>';
    echo $tab['content'];
}

修改Shop Base頁面的瀏覽器標題

// Change the browser title of shop base page
add_filter('post_type_archive_title', 'theme_wc_shop_browser_title' );
function theme_wc_shop_browser_title( $title ){
    if( $title == __('Products', 'woocommerce')){
        $shop_page_id = woocommerce_get_page_id( 'shop' );
        $page_title   = get_the_title( $shop_page_id );
        return $page_title;
    }
    return $title;
}

　　商店頁面預設的瀏覽器標題（Browser Title）是Products，這個頁面其實是一個custom post type archive頁面，雖然內容區域的標題跟隨該頁面的標題，但瀏覽器標題卻是WordPress預設的，Products是一個custom post type，所以它的archive頁面標題就是它的label名稱。

上面這段程式碼可以讓頁面的標題成為browser title。

使用者訪問時將產品自動新增到購物車

// add item to cart on visit
add_action( 'init', 'add_product_to_cart' );
function add_product_to_cart() {
    if (!is_admin()) {
        global $woocommerce;
        $product_id = 64;
        $found = false;
        //check if product already in cart
        if (sizeof($woocommerce->cart->get_cart()) > 0) {
            foreach ($woocommerce->cart->get_cart() as $cart_item_key => $values) {
                $_product = $values['data'];
                if ($_product->id == $product_id)
                    $found = true;
            }
        // if product not found, add it
            if (!$found)
                $woocommerce->cart->add_to_cart($product_id);
        } else {
        // if no products in cart, add it
            $woocommerce->cart->add_to_cart($product_id);
        }
    }
}

虛擬產品：付款成功後訂單狀態立即變為Complete

程式碼來自：http://www.skyverge.com/product/woocommerce-order-status-control/

add_filter( 'woocommerce_payment_complete_order_status', 'virtual_order_payment_complete_order_status', 10, 2 );
function virtual_order_payment_complete_order_status( $order_status, $order_id ) {
  $order = new WC_Order( $order_id );
  if ( 'processing' == $order_status &&
       ( 'on-hold' == $order->status || 'pending' == $order->status || 'failed' == $order->status ) ) {
    $virtual_order = null;
    if ( count( $order->get_items() ) > 0 ) {
      foreach( $order->get_items() as $item ) {
        if ( 'line_item' == $item['type'] ) {
          $_product = $order->get_product_from_item( $item );
          if ( ! $_product->is_virtual() ) {
            // once we've found one non-virtual product we know we're done, break out of the loop
            $virtual_order = false;
            break;
          } else {
            $virtual_order = true;
          }
        }
      }
    }
    // virtual order, mark as completed
    if ( $virtual_order ) {
      return 'completed';
    }
  }
  // non-virtual order, return original status
  return $order_status;
}

　　http://www.solagirl.net/woocommerce-code-sinppets.html

程式碼高亮網站收集
2020-04-04
網站
Android 開發實用程式碼收集
2018-12-12
Android
瀏覽器預設樣式程式碼收集
2018-06-18
瀏覽器
c#訪問WooCommerce 生成Product
2020-11-06
C#
WordPress-WooCommerce購物商城主題
2018-04-12
惡意程式碼分析之行為分析及樣本收集
2021-01-29
一些JS事件小片段程式碼整理收集（持續）
2018-08-09
JS事件
【模擬】Carla之收集資料快速教程 (附完整程式碼) [7]
2022-03-25
小程式異常監控收集
2019-03-04
【Vue原始碼學習】依賴收集
2022-01-29
Vue原始碼
【TABLE】Oracle表資訊收集指令碼
2021-09-08
Oracle指令碼
Android系統原始碼分析-事件收集
2019-03-02
Android原始碼事件
Vue3原始碼解析--收集的依賴是什麼？怎麼收集的？什麼時候收集的？
2024-05-26
Vue原始碼
Vue原始碼閱讀 – 依賴收集原理
2018-10-10
Vue原始碼
Vue原始碼閱讀 - 依賴收集原理
2018-07-07
Vue原始碼
Android 收集程式崩潰異常資訊
2018-09-21
Android
WooCommerce電子商務WordPress外掛-賺美國人的錢
2018-04-11
Oracle運維指令碼-收集統計資訊
2020-06-11
Oracle運維指令碼
GUI程式設計--班級資訊收集系
2024-06-03
GUI程式設計
GUI程式設計--班級資訊收集系..
2024-06-03
GUI程式設計
收集
2019-05-05
【SCRIPT】Oracle資料庫基本資訊收集指令碼
2021-09-21
Oracle資料庫指令碼
GUI程式設計--班級資訊收集系6.3
2024-06-03
GUI程式設計
前端錯誤收集（Vue.js、微信小程式）
2018-12-11
前端Vue.js微信小程式
手動收集——收集統計資訊
2018-06-27
proxy 收集
2024-06-20
收集雨水
2020-10-14
垃圾收集
2021-09-09
WordPress中如何給Woocommerce產品頁面新增詢盤表單標籤頁
2020-09-27
淺析Vue原始碼（八）——依賴收集與監聽
2018-10-08
Vue原始碼
如何實現一個高效的本地日誌收集程式
2021-07-24
如何收集Oracle程式中的SQL跟蹤資訊KU
2022-03-21
OracleSQL
WordPress設計bug+WooCommerce漏洞導致網站存在被劫持風險
2018-11-08
網站
dotnet 讀 WPF 原始碼筆記渲染收集是如何觸發
2022-07-19
原始碼筆記
linux c網路網路程式設計面試題收集
2018-11-29
Linux程式設計面試題
資訊收集
2024-11-12
網站收集
2024-11-01
網站
微博收集
2024-04-18
AI工具收集
2024-05-22
AI

WooCommerce程式碼收集

相關文章