修改首頁和分類頁面每頁產品數量
每頁顯示多少產品默認跟隨設置 » 閱讀設置 » 博客頁面至多顯示的值,若要產品索引頁和博文索引頁使用不同的設置,可以使用下面的代碼為產品索引頁單獨設置每頁產品數。
add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 24;' ), 20 );
代碼注釋:每頁顯示24個產品。代碼放在主題的functions.php中即可
下面整理更多適用於WooCommerce的短代碼,方便查閱和使用,更是為了理清思路,提高自己。以下WooCommerce簡稱WC,代碼放在主題的functions.php中即可。
在主題中聲明對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