- Windows 本地安装 Kibana 查询 Elasticsearch
- Windows 本地安装和使用 Elasticsearch
- WooCommerce 请登录 链接不工作
- 使 WooCommerce 订单搜索支持自定义字段
- 如何使用 WooCommerce Session
- 获取 WooCommerce 页面地址的方法
- WooCommerce后台通过自定义字段检索产品
- WooCommerce 自定义订单号
- WooCommerce Login / Register Redirect
- WooCommerce自带的shortcodes
- WooCommerce 打印订单
- WooCommerce 新用户注册管理员通知
- WooCommerce 移除产品页商品图片的url
- WooCommerce Email 模版增加全局内容的一个方法
- 错误:Call to a member function is_visible() on a non-object
- WooCommerce实用代码集合
- WooCommerce根据支付方式收取额外费用(2021)
- WooCommerce 订单管理
- WooCommerce移除登出账户的确认提示
- WooCommerce列出所有产品分类(2021)
- WooCommerce收据功能的实现
- WooCommerce Dynamic Pricing动态价格表(2021)
- 如何免费试用WordPress付费插件
- 写代码定制WooCommerce产品页模板(2021)
- 自定义WooCommerce Order Details模板明细部分(2021)
- WooCommerce Class WC_Order
- WooCommerce 产品搜索支持 SKU
- WooCommerce定制产品的Additional Information选项卡(2021)
- WooCommerce 定制产品页选项卡(2021)
- WooCommerce admin bar快捷菜单
- WooCommerce库存管理插件Stock Manager for WooCommerce(2021)
- WordPress备份插件UpdraftPlus(2021)
- 隐藏WooCommerce的购物功能
- WooCommerce目录模式Catalog Mode(2021)
- 构建基于WooCommerce和WPML的多语言电商网站 - 概述篇
- 构建基于WooCommerce和WPML的多语言电商网站 - 安装WooCommerce和测试数据
- 配置WordPress运行环境 - Wampserver安装图解
- 构建基于WooCommerce和WPML的多语言电商网站 - 安装和配置 WPML 插件
- 构建基于 WooCommerce 和 WPML 的多语言电商网站 - 使 WooCommerce 和 WPML 协同工作
- WooCommerce Paypal & RMB
- WooCommerce 2.0 来袭
- 如何修改 WooCommerce 插件的模版
- WooCommerce 显示每个产品的总销量
- WooCommerce 中的 Custom JavaScript Event
- WooCommerce Authorize.net CIM Gateway
- 用WooCommerce Fees API 添加手续费
- WooCommerce 产品加入购物车后直接结账
- 设置 Paypal Sandbox 测试 WooCommerce Subscription 产品
- WooCommerce Conditional Tags 详解
- WooCommerce Single Category Selector
- WooCommerce 自定义结账字段(2021)
- WooCommerce 将产品属性加入网站菜单(2021)
- WooCommerce Product API(2021)
- WooCommerce 添加附加费 surcharge(2021)
- WooCommerce 安装中文语言包(2021)
- WooCommerce 营销:订阅促销弹窗和潜在客户发掘(2021)
- WooCommerce 邮件定制、预览和测试(2021)
- WooCommerce 在线站点付款测试(2021)
- WooCommerce Product Archive Image Slider(2021)
- woocommerce_form_field() examples
- WooCommerce 商店页插入 shortcode 问题
- WooCommerce 在 Email Header 中获取用户信息
- WooCommerce 自定义结账字段图文详解
- WooCommerce 2.1.12 - 如何修改相关产品列表
- 修改 WooCommerce My Account 页面的地址格式
- Woocommerce:如何根据国家设置支付方式
- Woocommerce 支付宝插件初探
- 支付宝集成 如何在回调地址中使用自定义参数
- Woocommerce Settings API 如何使用
- Woocommerce 中文货币符号错误如何解决
- WooCommerce 如何扩展支付方式
- Woo commerce 搭建 WordPress 电子商务网站
- WooCommerce 查看所有用户购物车(2021)
- WooCommerce 最近一个月销量排行(2021)
- WooCommerce 后台自定义产品选项(2021)
- WooCommerce 自定义产品列表带分页(2021)
- WooCommerce 设置 - 自定义选项卡和字段(2021)
- WooCommerce My Account Menu Links 定制方法(2021)
- WooCommerce 产品列表增加数量字段
- WooCommerce 可变产品变种的数量限制
WooCommerce实用代码集合
本文整理了一些适用于WooCommerce的短代码,方便查阅和使用,更是为了理清思路,提高自己。以下WooCommerce简称WC,代码放在主题的functions.php中即可。
2020年10月更新:本文内容已经过时,请移步最新的WooCommerce实用代码
在主题中声明对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 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' ),
修改首页和分类页面每页产品数量
每页显示多少产品默认跟随设置 » 阅读设置 » 博客页面至多显示的值,若要产品索引页和博文索引页使用不同的设置,可以使用下面的代码为产品索引页单独设置每页产品数。
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>' . 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
#39;; 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="#">Button 1 </a> <a href="#">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; }
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论