用过了一段 WooCommerce 时间后,发现 WooCommerce 在打造 WordPress 商城这一块功能相当强大,也很成熟了。但是在刚刚接触 WooCommerce 时却遇到了不少的麻烦,一是中文相关的 Woo4 P 9 a ] A X } PCommerce 参考B _ #资料真的是太少了,不知道与国内的用户少有关系。
另一方面发现 WooComh h ymerce 对于国人来说还存在很大的“改进”空间。例如添加到购物车,只有简单的链接,没有像淘宝那样的购物车侧边栏。最大的问题就是 WooCommerce 的账户管理中心功能简陋,想要的东西没有(当然,插件提供了接口可? e ? D 6 F +以自已添加)。
最先想到解决 Woo* N c t ;Commerce* Y D F s 这T ! 0 . z些问题,是通过 WooCommerce 插件来搞定 。搜索了一下 WooCommerce 的相关插件,确实非常多,几乎想R 9 Y W V W要的功能都可以找到对应的 Wod y roCommerce 插件。但是本着少用插件的原则,最后还是找到一些 WooCommerce 实用代码,作用与插件是一样的。
大家在使用这些 WooCommerce 代码记得先学习一下 WooCommerce 的官方文档,实际上相当多的代码 WooCommerce 官方已经给出了示例,x v w我们只需要在主题的函数文件中调用即可。另外,WooCommerce 的版本也在不断地更新当中,有些代码可能在某些版本的 WooCommerce 没有效果,请注意看自己用的版本和代码对应的版本有没有出P \ N q入。
本篇文f 6 ^ c j N * G o章就来分享一N ^ + ! - w下 WooCommerce 实用代码,涉及到购物车、订单页面d K X Y C l C + .、店铺首页、商品详情页v N S = Y S面、结算页面等,通过这些代码我们可以有针对T r $性地进行相应的调整。
第一次接触 Wooc p \ W YCommerce 商城的朋友,请参考:WordPress 商城搭建-WoZ & BoCommerce 安装和 Paypal,支付宝,微信设置。注意n H j j X:代码如果没有特别说明,就放在 functions.php 文件的”?>”前面。
购物车中排除已设置为隐藏的产品
WooCommerce 有a \ y 1 z u 7 F l些设置为隐藏的商品,如果用户购买了后会显示在购物3 H n x l #车中,利用以下代码就可以将设置为隐藏G Z z V , 9 ` w {的产品在购物车中不可见。
- /**
- * @snippet Excm _ f [ ] , { 1 ;lude Hidden Products from Cart Count - WooCommerce
- * @author Rodolfo Melogli
- * @compatible WooCom[ m V 4 } @merce 3.4.5
- */
- // PLEASEx v L k J J NOTE: EMPTY THE CART BE: g 0 }FORE TESTING
- add_filter( 'woocommerce_cart_contenK C \ts_count', 'bbw ! y ` [ h wloomer_exclude_hidden_minq + e Z 8 T 8 ? Ficart_counter' );
- function bbloomer_exclude_hidden_minicart_counter( $quantity ) {
- $hidden = 0;
- foreach( WC()->cart->get_cart() as $cart_item % \ _ * n1; {
- $product~ C 6 r i x ^ = $cart_item 3 X v E1;'data'];
- if &z * A K + E#4o O D 8 Q ! m0; $pf ) rroduct->get_catalog_visibil% i # D Uity() =H \ 9= 'hidden' ) $hidden += $cart_item['quan+ 5 - z } T rtity'];
- }
- $quantity -= $hidd6 + a ! F Qen;
- return $quantity;
- }
若商品在购物车中已存在,则8 B 1 ; ` a 6 1重名“添加到购物车”按钮
如果想要 WooCommerce 在用户点击添加到购物车后,提示该商品已经在购物车中了,你可以用以下方法。? e & h . } ;
- /**
- * @snippet Change "Add to Cart" Button Label if Product Already @ Cart
- * @testedwD z : Eith Woo 3.3.49 g } D
- */
- // Part 1
- // Edit Single Product Page Add to Cart
- add_filter( 'woocommerce_product_single_add_to_cart_textL m m 2 V H = :'` $ Z, 'bR \ ? 9 E 2bloomer_custom_add_cart_button_single_product' );
- function bbloomer_custom_add_ca{ $ | N G h a _ Hrt_button_single_productf 1 Z j40; $label ) {
- foreach( WC()->cart->get_cart() as $cart_item_key =&: - b V hgt; $values ) {
- $producta O e ; = $values['data'];} S . d {
- if&c p V }#40; get_the_ID() == $product->get_id(B 6 w) ) {
- $label = __('已添加到购y _ 4 ~ ( 0物车,还要一个?', 'woocom@ 5 5 U ( B 3merce');
- }
- }
- r1 , ? qeturn $label;
- }
- // Part 2
- // Edit Loop Pages Add to Cart
- add_filter( 'woocommerce_produc! Z . V m Ht_add_to_cart_text', 'bbloomer_custom_add_cart_button_loop', 99, 2 );
- function bbloomC 2 j L k G f I !er_custom_add_cart_button_loop( $label, $produw S 8 O v + .ct ) {
- if ( $product->get_type() == 'simple' && $product->is_purchasable(: 4 S v p M b ,1; &L 7 8 y B;& $product->is_in_stock() ) {
- foreach( WC()->cart->P n l z ^ q ^ :get_cart() as $ci 6 H eart_item_key => $values ) &l l ^ [ B#123;
- $_produc3 [ P S N % = |t = $values['data'];
- if( get_the_ID() == $_product->get_id() ) {
- $label = __('已添加到购物车,还要一个?', 'woocommerce');
- }
- K ] h s + 1 {25;
- }
- return $label;
- }
调整货币符号
将澳元的货币符号从默认的$改为 AUD$。
- f[ a b ~ Z D V Hunction change_existing_currency_symbol( $currency_symb{ F Q : z 5 ~ol, $currency ) {
- switch($ \ X ` ) 9 o ) N $currencP k Hy ) {r z ; n u l
- case 'AUD': $currency_symbol = 'AUD$'; break;
- }
- return $currency_symbol;
- }
- add_filter% c r40;'woocommerce_currency_symbol', 'change_existing_currency_symbol', 10, 2);
在店铺页面按照/ | t f库存排序显示产品
WooCommerce 默认的的店铺首页会有按钮热度、关! / P注度、价格等来排序,我们可以自己添加一个自定义排序,设置按照产品库存排序。
1: Sort Products by Stock Status @ WooCommerce Shop
- /**
- * @snippet Sort Products By Stock Status - WooCommerce Shop
- */
- add_action( 'woocom& T n . hmerce_product_query', 'bbloomer_sort_by_stock_status_then_alpha', 999 );
- function bbloomer_sort_by_stock_status_then_al+ A e V spha5 F % + | X @40; $1 + ) \ Rquery ) {& x E 3 ]
- if ( is_admin() ) return;
- $query->set( 'meta_key', '_stock_status' );
- $query->set( 'orderby', array( 'meta_value' => 'ASQ x 2 O P , Z OC' ) );
- }
2: Sor) b [ I Z O Vt Products SHORTCODE by Stock St6 7 X Tatus
- /**
- * @sS 6 h k S W + r mnippet Sort Products Shortcode By Stock Status
- * @author RL M Wodolfo Melogli
- * @compatible WooCommerce 3.4.5
- */
- // Note: products shortcode docs https://docs.woocommerce.com/document/woocommerce-shortcodes/#section-6
- // InW 4 C 2 / G g order for the snippet to workW Y J E [ 5, you must add the parameter orderby = "stock" to the shortcode
- // You can add more parameters to it of course e.g. limit, paginate, etc. It's all in the docs
- add_fil/ m : o f = u !ter('woocommerce_shortcode_products_query', 'bbloomerO , # J # X ] U V_sort_by_stock_status_shortcode', 999, 3)} p o - A 9 I;
- function bbloomer_sort_by_stock_status_shortcode( $args, $atts, $type ) {
- if ( $atts['ordet R W | ~ # h w Brby'] == "s\ & . U 9 t 8 M Ntock" ) {
- $args['orderby']W F x 7 y; = array( 'meta_valus \ 9 p l c ;e' => 'ASC' );
- $args['meta_key'] = '_stock_status';
- $ z H v { ~ . Y k25;
- return $y d f W Y ( N P *args;
- }
店铺首页中显示商品品牌
WooCommerce 默认的不会显示某一个产品的品牌,当然我们可以用以下方法搞定:
- add_action( 'woocommerce_after_shop_loop_item_title', 'bbloomer_show_woocommeg f B e & Krce_brands_loop', 8 );
- function bbloomer_shon q /w_woocommerce_brands_loop() {
- global $post;
- echo get_brands( $post->ID );
- }
店铺显示某用户已经购买过某商品
- add_action( 'woocommerce_after_shop_loop_item', 'B } H a s iuser_logged_in_product_already_bought', 30 );
- function user_logged_in_product_already_bought() {
- if ` @ 540; is_user_logged_in() ) {
- global $product;S H l 2 6
- $current_user = wp_get_current_user();
- if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $pro/ f % Z _ vduct->get_id() ) ) echo '
- ♥ Hey ' . $current_user->first_name . ',m , U you\'ve purchased this in the past. Buy again?
- ';
- }
- }
禁用或者修改面包屑导航位置
删除禁用默认的面包屑导航
- remove_action( 'woocommerce_before_main_U i { - Vcontent', 'woocommerce_breadcrumb', 20, 0);
将导航添加到其它位置,例如放在 header.php 中,则直接在 header.php 适当位置插入如下代码
- if( function_exists( 'woocomg G x ; c J u 0merce_breadcrumb+ ! j b 5') ) woocommerce_breadcrumb(V ! b)E Q & ; : c w;
也可以用 add_ac% , b ~ 0tion 添加,例如
- add_action( 'woocommerce_after_main_content',p n 0 ^ g U 6 F 'woocommerce_breadcrumb' );
修改面t ? ~ c b G 1 h包屑导航的参数:
- // Code source: https://gist.gith_ [ h R - # * 5ub.com/dwiash/4064836
- function my_woocommerce_breadcrumbs() {
- retuI \ v * , N x M ^rn array(
- 'dD \ x _elimiter' =>l g ^;e Q M h ( ( 8 r ' / ',
- 'wrap_before' => '
- ',
- 'wrap_after' => '
- ',
- 'before' => '',
- 'after' => '',
- 'home' => _x( 'Home', 'breadcrumb', 'woocommerce' ),
- &A Z x#41;;
- }
- add_filter( 'woocommerce_breadcrumb_defaults', 'my_W j 6 # j P 8woocommerce_breadcrumbs' );
参数注释:
delimiter:分隔符
wrap_before:起始标签
wrap_after:结束标签
before:起始标签之后、面包屑导航链接H y l v b * 0 6之前的内容
after:面包屑导航链接之后、结束标签之前的内容
home:首页文字,例m I = / E K O如像给首页加 font-awesome,可S y ] A以这样设置
- 'home' => _x(8 & N = '<i class="icon-home"></i> Home', 'breadcrumb', 'woocommerce' ),
产品没有描述时设置一个默认的描述
WooCommerce 的商品页面如何没有描述会显示空白,这显然不怎么好看,我们可以设置一个段描述用于在没有描述的情况作为默认显7 M y ! ,示内容T / u M。
- /**
- * @snippet Show CustoH 9 { S 7m Content When Short Description EF u K P & Y \mpty - WooCommerce
- * @author Rodolfo Melogli
- * @compatible WooCommerce 3.4.5
- */
- add_filter( 'woocommerce_short_description', 'bbloomer_echo_sm 3 9 P r p $hort_desc_if_n4 + , J f f s p wo_short_desc' );
- function bbloomer_echo_short_desc_if_no_short_desc( $postM 3 ` j S =_excerpt ) {
- if ( empty ( $post_excerpt ) ) {
- $post_excerpt = '<p class="default-short-desc"N f R ] \ % H W a>';
- $post_excerpt .V A } ( 2= 'Th9 V H 5 qis is the defaultj + P n, global, short description.<br>It will sh( } - 8 7ow if <b>a ( N 7 u Q S J;no short description has been ent5 D r | \ x tered!</b>';
- $post_excerpt .= '</p>';
- }S \ ? j `
- return $post_excerpt;
- }
隐藏相关产品推荐
WooCw ! @ommerce 默认的会在商品的页面下方显示 4 个相关的产品,如果你不想要,可以用以下代码去掉它。
- remove_action( 'woocommerce_after_sing] q m ble_product_summary',p ) L h s w 'w~ ; k V ~ooc\ 7 v X V u [ commerce_output_related_products', 20 );
添加“继续购物”按钮
当用户在 WooCommerce 的产品页面点击添加到购物车后,如果你希望增加一个显示“继续购物”的按i w } Z z钮,可以使用以下代码:
- add_action( ‘woocommerce_sink \ C p W 2 .gle_product_summary’K i B f 2, ‘bbloomer_continue_shoppil * ^ kng_button’, 31 );
- function bbloomer_continue_shopping_button- p Z P ] 90;) {
- if ( wp_get_referer() ) echo ‘<a class=”butto| w v V v K m T Nn continue” href=”‘+ $ & ~ . wp_ge5 n R i C F | ] Dt_referer() . ‘”>继续购物} q | t R \ \ e ^</a>’;@ ] 2 !
- }
使用视频作为产品展示而不是静态的图片
WooCommerce 默认的是用图片作为产品展示,我们也可以使用以下代码来让产品变成视频展示。
- add_C h /action( ‘] 1 4 X ^ z uwoocommerce_O S ? \ F 2 Xbefore_single_product’, ‘bbloomer_show_video_not_image’ );
- funcA ^ Ition bbloomer_show_video_not_image() {
- // Do this for producb c N k . 6t ID = 282 only
- if ( is_singleU C W B W ; s M N0; '282' ) ) {
- remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
- remov} B 6 S 3 i L ye_action( 'woocommerce_product_thumbnails', '4 + V y M 7 } = 8woocommerce_show_product_thumbnails', 20 );7 a F P o Y h s F
- add_action( 'woocommerce_before_s& A R E o % ( G @ingle_product_summary', 'bbloomer_show_product_video', 30 );
- }
- }
- function bbloomer_show_product_video() {
- echo '<div class="woocommerce-product-gallery"&gq X | I kt;';
- // get video embed HTMLH / Z V h S Z s from YouTube
- echo '<iframe width="560" heighto ; 8 I U U="315" src="https://wuyanshuoN J m 8 o f G 7.cn/embed/JHN7viKRxbQ?rel=0&v y + d F y E c $amp;showinfo=0" framebob J ? ) T rrder="0" allowfullscreen></iframe>';
- echo ‘</div>’;
- }
调整相关产品的数量
WooCommerce 默认的相关产品数量是 4 个,你可以自定义显示数量。
- addS ! L P_filter( 'woocommerce_output_related_pro7 w L Zducts_args', 'bbloomer_change_number_related_products', 9999 );
- function bbloomer_change_numbe{ 8 hr_related_pr3 B ^ h b # f :oducts( $args ) {
- $args['post_ & l 9 E gs_per_page'] = 4; // # of relatb P 4 y W _ b Fed products
- $args['columns' A ] n 2 , T c3; = 4; // # of columns per row
- return $argl $ W as;
- }
WooCommerce 订单管理中添加自定义栏
以下代码可以在 WooCommerce 的订单管理页面添加到以国家为参数的u h q列。
- /**
- * @snippet Add Column to Orders Table (e.g. Billins U ( v b 7 Z 3g Country) - WooCommerce
- * @author Rodol7 d Dfo Melogli
- * @compatible WooCommerce 3r # V.4.5
- */
- add_filter( 'managS \ o I P C ] \ /e_edit-shop_order5 a E ~ 2 S_cH & s \ $ xolL 4 r 0 g Xumns', 'bblooA Q h Imer_adP 6 s ~ Fd_new_order_admin_list_column'= e c # g w ^ h # ). @ 7 R S - h;;1 i j K y q p
- function bbloomer_a~ a [ 9 ]ddP o [ D U [ J n d_new_orderY | 1 v % 0 - l_admin_list_column( $columns ) {
- $columns['bill& J 6 V 6 , n Sing_country'&? 4 ~ ( . x H#93; = 'Country';
- return $columns;
- }
- add_action( 'manage_shop_order_posts_custom_c5 / O Z f R &olumn', 'bbloomer_add_new_order_admin_list_column_content' );
- funct_ k K g u /ion bbloomer_add_new_order_admin_list_column_content( $column ) {
- global $post;
- if ( 'billing_country' === $column ) {
- $order = wc_get_order(~ L 7 p $pou 8 ( _ ~ ? Wst->ID );
- echo $order->get_billing_country();
- }
- }w W ~;
去掉结算页面的“什么是; ! # Z F ) ! S Paypal”“What is PayPal?”
WooCommerce 在使用 Paypal 付款P P } 5 w 4 i时会显示一个“什么是 Paypal”“What is PayPal?”的提示,如果你觉得h n 8 { l & L /不好看的话可以用以下方法来删除它:
- add_filj E \ter( 'woocommerce_gateway_icon', 'bbloomer_remove_what_is_paypal', 1{ a H w 3 ) s 80, 2 );
- function bbloomer_t J d x q u Mremove_what_is_paypall : k \ L = ; {0; $icon_html, $gateway_id ) {
- // the apply_filters comes with 2 parameters: $ic{ a @ k #on_html, $this->id
- //W ? p T R hence we declare 2 p\ @ %arameters witS ^ # v : M + 2 khin the function
- // and the hok 5 z \ A V C %ok above takes the "2" as we decided toz ! C pass 2 variables
- if( 'S 6 e vpaypal' == $gateway_id ) {
- // we use one of the passed variables to make sure we only
- // run tR x Uhis functia D mon f- 9 } j #or the gateway ID == 'paypal'
- $icon_html = '<img src="wzfou.com/wp-content/plugins/woocommerce/includes/gateways/paypal/assets/images/paypal.png" alt="P\ F 0 = ( MayPb h @al Acceptance Mark">';
- // in here we define our ownx 2 E [ ? F E j f $icon_html
- // note there is no menF o W S Z D @tion oO 2 h o Jf the "What is PayPal"
- // all we want is to repeat the part with the paypal logo
- }
- // endif
- return $icon_html;
- // we send the $icon_html variable back to the system
- // if PayPal, the s? 3 x 7 [ } ( Pystem will use our custom $O - ? K i A 4icon_html
- // if not, the system will use the original $icon_htmlc S o M Z } \ % s
- }
显` \ ; 4 k q w a c示用户已经购买过的产品
如果你想让用户首先在 WooCommerce 的个人订单管理页面看到自己曾经购买过的产品列表,可以先在 function.php 文件中添加以下代码:
- /**
- * @snippet Displa3 G G _ 9 L + ]y All Products Purchased by User via ShE a b d 1 a ) [ortcode - WooCommerceP U ; I 3 t G
- * @author Rodolfo Melogli
- * @com! V f r y Spatible Woo 3.4.5
- */
- // Note: this will only return purchased products for completed and p3 R z y 7 H _rocessing orv 4 8 D @ders
- add_shortcode( 'my_pror [ Z KductQ \ C a Us', 'bbloomer_user_products_b! & T 0ought' );
- function bbloomer_user_products_bought() {
- global $product, $woocommerce, $wooE f \ ~ 1 ^ Q m 0commerce_loop;
- $columns = 3;
- $c} 7 2 nurrent_n K Buser = wp_get_current_user();
- $args =d R V J s } B array(
- 'postI s o Z m h |_type' => 'product',
- 'post_status' => 'publish',
- 'posts_per_page' => -1
- );
- $loop = new WP_Query] w w L m r x !0;$args);
- ob_start();
- woocommerce_product_loop_start();
- while ( $loop->have_posts(o 2 & K /) )X q f B L /; : $loop-E u v { 4 L , d>the_post();
- $theid = get_the_ID();
- if ( wc_customer_bought_produ= i c a P 5 D } @ct( $curreg & + j 9nt_user->use/ P u t X D 7r_email, $current_user->ID, $theid ) &h 6 [ J#N y 2 h h41; {
- wc_get_template_part( 'content', 'product' );
- ) T U /25;
- endwhile;
- woocommerce_p, P O F 4 g j x _rodu| 8 h t , ?ct_loop_end();
- woocommerce_reset_loop()4 G K e ~ 5 G;
- wp_reset_py ? X z 9ostdata();
- return '
- ' . ob_get_cQ 1 5 { & ] jlean() . '
- ';
- }
然后在你需要显示用户所购买过的所有j J y * B产品的页面添加以下短代码即可:
- [my_products]
添加新的菜单到账户中心
默认的话,在 WooCommerce 的账户中心只显示资料、订单、地址、退出等菜单,我们可以用以下方法来添加新的菜单。d v l w , + v 7 L
- //添加my-account自O E 4 ^定义导航及页面
- /**
- * @snippet WooCommeG 0 h 0 / -rce Add New Tab @ My Account
- * @credits https://github.com/U E Qwol 7 u Iothemes/woocommerce/wiki/2.6-Tabbed-My-Account-page
- * @author Rodolfo Melogli
- * @testedwithf N x y Z : n * WooCommerce7 Y = ] u 3.4.5
- */
- // ——————
- // 1. Register new endpf R 3oin2 U U j ~ % d )t to use for My Acco@ E } # Funt pagL 1 Z * p we
- // Noter 7 T P S d _: Resave Permalinks or it will give 404 error
- func$ 8 ztion bbloomer_add_premium_support_endpoint() {
- add_rewrite_endpoint( 'premium-support', EP_ROOT | EP_PAGES );
- ] * + v C 2125;G G = & 1
- add_action( 'init', 'bbloomer_add_premium_support_endpoint' );
- // ——————
- // 2. Add new query var
- function bbloomer_premium_support_query_vars( $vb ! W F o l ` 3 3ars ) {
- $vars[] = 'premium-support';
- return $vars;
- }
- add_filter( 'query_vars', 'bbloomer_premium_support_query_vars', 0 );
- // ——————
- // 3. Insert the new endpoinU I c h 9 ct into the My Ac( x ; A V x 6 7count menu
- function bbloomer_add_premium_suppo$ O Xrt_link_my_account( $items ) {
- $items['premiumq z ` = O . 0 1 X-support'] = '联系我们~ 3 c A b v , 4';
- return $items;
- }u e x / Q ; ^ V
- add_filter( 'woocommerce_account_menu_E ? T x [ Qitems', 'bbloomer_aF { y .dd_premium_support_link_my_account' );
- // ——————
- // 4. Add content to the new endpoint
- function bb! q ,loomer_premium_sM r O fupport_content() {
- echo '<h3>联系我们</h3><p>有任何问题,欢迎与站长Qi取得联系。Qi的QQ号:xxxxxx,微信号:xxxxx。添加好友请注明o K U _ D“店铺订单”字样。更多的联系方式在:<a href=&qI H # \ S quot;//wuyanshu6 6 M V C Wo.cn/contact/" target=""1 F 6 h q 1_blank" rel="noopener">联系站长</a>。</p>';
- //d B y g ( ? 4 t echo doY k z : !_shortcode( ' /* you] \ x M O Dr shortcode here */ ' );
- }
- add_actQ # 7 wion8 i J = 30; 'woocommerce_acZ M A m a bcount_premium-support_endpoint', 'bblooe 5 L + E G jmer_premium_support_cop g c qntent' );
- // Note: addV Z ; = d V 8_action must3 a d follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format
WooCommerJ l b N E e #ce 虽然说是国外? 5 e , O t r *人开发的插件,但是却提供非常多的 Hook,\ i 0 $我们可以通过主题的函数文件自定义 WooCommerce 各种设置,上面的代码只是 wzfou.c{ _ G 5 - D 7om 在使用过程觉得可以用得上的,A ? J F实际上官方还提供非常多的自定义函数。
当然u H 2 z ? @ m q,也有朋友会觉得修改代码有些困难,WooCommerce 其实已经有类似的插件了,例如 WooCommerce 菜单插件,可以方便你自由地添加自定义链接到“我的账户”中,另外相关 WooCommerce 优化插件,基本上是整i ! G n t A 3合了以下的代码。