WordPress商城插件WooCommerce实用代码集合

本文整理了一些适用于WooCommerce的短代码,方便查阅和使用,更是为了理清思路,提高自己。以下WooCommerce简称WC,代码放在主题的functions.php中即可。

在主题中声明对WooCommerce的支持

add_action( 'after_setup_theme', 'woocommerce_support' );

function woocommerce_support() {

    add_theme_support( 'woocommerce' );

}

禁用WooCommerce默认样式

// Disable WooCommerce styles

add_filter( 'woocommerce_enqueue_styles', '__return_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 class="woocommerce-breadcrumb" 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 class="icon-home"></i> Home', 'breadcrumb', 'woocommerce' ),

修改首页和分类页面每页产品数量

每页显示多少产品默认跟随设置 » 阅读设置 » 博客页面至多显示的值,若要产品索引页和博文索引页使用不同的设置,可以使用下面的代码为产品索引页单独设置每页产品数。

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

代码注释:每页显示24个产品。

修改分页导航的参数

// 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 class="product-description">' . 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);

修改相关产品列表每行产品数量

用filter: woocommerce_output_related_products_args改变相关产品数量,同样只是改变换行的位置,需要配合适当的css设定宽度才能实现最终效果。

add_filter( 'woocommerce_output_related_products_args', 'wc_custom_related_products_args' );

function wc_custom_related_products_args( $args ){

    $args = array(

        'posts_per_page' => 2, //共显示多少产品

        'columns' => 2, //分几栏显示

        'orderby' => 'rand'

    );

    return $args;

}

代码注释:在每个产品页面展示最多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('woocommerce_product_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_cart_calculate_fees','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, '' );    

}

付款成功后立刻发送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( 'woocommerce_product_add_to_cart_text' , 'custom_woocommerce_product_add_to_cart_text' ); 

/**

 * custom_woocommerce_template_loop_add_to_cart

*/

function custom_woocommerce_product_add_to_cart_text() {

    global $product;    

    $product_type = $product->product_type;     

    switch ( $product_type ) {

        case 'external':

            return __( 'Buy product', 'woocommerce' );

        break;

        case 'grouped':

            return __( 'View products', 'woocommerce' );

        break;

        case 'simple':

            return __( 'Add to cart', 'woocommerce' );

        break;

        case 'variable':

            return __( 'Select options', 'woocommerce' );

        break;

        default:

            return __( 'Read more', 'woocommerce' );

    }     
}

无论产品是否有属性,添加到购物车的按钮名称都是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;

}
阅读全文
 收藏 (1) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:轻语博客 » WordPress商城插件WooCommerce实用代码集合
分享到: 生成海报
qux主题真好用,功能强大,界面美观,还一直在更新.....

热门推荐

评论 2

评论前必须登录!

立即登录   注册

  1. #2

    测试下 CodeColorer

    coolsd4年前 (2020-04-07)国内网友谷歌浏览器 Windows 10 登录以回复 举报评论
  2. #1

    来看看 :mrgreen:

     故人思已丶4年前 (2019-11-22)国内网友谷歌浏览器 Windows 10 登录以回复 举报评论

本站承接WordPress主题开发,主题定制,功能开发

QQ咨询轻语云
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码