建站教程 2022-01-26

WooCommerce 实用代码汇总自定义WooCommerce功能

用过了一段时间后，发现 WooCommerce 在打造商城这一块功能相当强大，也很成熟了。但是在刚刚接触 WooCommerce 时却遇到了不少的麻烦，一是中文相关的 WooCommerce 参考资料真的是太少了，不知道与国内的用户少有关系。

另一方面发现 WooCommerce 对于国人来说还存在很大的“改进”空间。例如添加到购物车，只有简单的链接，没有像淘宝那样的购物车侧边栏。最大的问题就是 WooCommerce 的账户管理中心功能简陋，想要的东西没有（当然，提供了接口可以自已添加）。

最先想到解决 WooCommerce 这些问题，是通过 WooCommerce 插件来搞定。搜索了一下 WooCommerce 的相关插件，确实非常多，几乎想要的功能都可以找到对应的 WooCommerce 插件。但是本着少用插件的原则，最后还是找到一些 WooCommerce 实用代码，作用与插件是一样的。

大家在使用这些 WooCommerce 代码记得先学习一下 WooCommerce 的官方文档，实际上相当多的代码 WooCommerce 官方已经给出了示例，我们只需要在的函数文件中调用即可。另外，WooCommerce 的版本也在不断地更新当中，有些代码可能在某些版本的 WooCommerce 没有效果，请注意看自己用的版本和代码对应的版本有没有出入。

本篇文章就来分享一下 WooCommerce 实用代码，涉及到购物车、订面、店铺首页、商品详情页面、结算页面等，通过这些代码我们可以有针对性地进行相应的调整。

第一次接触 WooCommerce 商城的朋友，请参考：WordPress 商城搭建-WooCommerce 安装和 Paypal,支付宝,微信设置。注意：代码如果没有特别说明，就放在 functions.php 文件的”?>”前面。

文章目录

1 购物车中排除已设置为隐藏的产品
2 若商品在购物车中已存在，则重名“添加到购物车”按钮
3 调整货币符号
4 在店铺页面按照库存排序显示产品
5 店铺首页中显示商品品牌
6 店铺显示某用户已经购买过某商品
7 禁用或者修改面包屑导航位置
8 产品没有描述时设置一个默认的描述
9 隐藏相关产品推荐
10 添加“继续购物”按钮
11 使用视频作为产品展示而不是静态的图片
12 调整相关产品的数量
13 WooCommerce 订单管理中添加自定义栏
14 去掉结算页面的“什么是 Paypal”“What is PayPal?”
15 显示用户已经购买过的产品
16 添加新的菜单到账户中心
17 联系我们
18 相关文章
19 发表评论
20 热门文章
21 站长必备
22 热销模板
23 按文章类型进行搜索
24 分享到微信朋友圈
25 觉得文章有用请给作者打赏！
26 觉得文章有用请给作者打赏！
- 26.1 我的购物车

购物车中排除已设置为隐藏的产品

WooCommerce 有些设置为隐藏的商品，如果用户购买了后会显示在购物车中，利用以下代码就可以将设置为隐藏的产品在购物车中不可见。

/**

1

/**
* @snippet Exclude Hidden Products from Cart Count - WooCommerce

1

* @snippet Exclude Hidden Products from Cart Count - WooCommerce
* @author Rodolfo Melogli

1

* @author Rodolfo Melogli
> * @compatible WooCommerce 3.4.5

1

> * @compatible WooCommerce 3.4.5
*/

1

*/
1
// PLEASE NOTE: EMPTY THE CART BEFORE TESTING

1

// PLEASE NOTE: EMPTY THE CART BEFORE TESTING
1

$hidden = 0;

1

$hidden = 0;

}

1

}
$quantity -= $hidden;

1

$quantity -= $hidden;
return $quantity;

1

return $quantity;
}

1

}

若商品在购物车中已存在，则重名“添加到购物车”按钮

如果想要 WooCommerce 在用户点击添加到购物车后，提示该商品已经在购物车中了，你可以用以下方法。

>/**

1

>/**
* @snippet Change "Add to Cart" Button Label if Product Already @ Cart

1

* @snippet Change "Add to Cart" Button Label if Product Already @ Cart
>* @testedwith Woo 3.3.4

1

>* @testedwith Woo 3.3.4
*/

1

*/
1
// Part 1

1

// Part 1
1
// Edit Single Product Page Add to Cart

1

// Edit Single Product Page Add to Cart
1

}

1

}
}

1

}
1
return $label;

1

return $label;
1
}

1

}
1
// Part 2

1

// Part 2
// Edit Loop Pages Add to Cart

1

// Edit Loop Pages Add to Cart

}

1

}
}

1

}
1
}

1

}
return $label;

1

return $label;
}

1

}

调整货币符号

将澳元的货币符号从默认的$改为 AUD$。

switch( $currency ) {

1

switch( $currency ) {

}

1

}
return $currency_symbol;

1

return $currency_symbol;
}

1

}

在店铺页面按照库存排序显示产品

WooCommerce 默认的的店铺首页会有按钮热度、关注度、价格等来排序，我们可以自己添加一个自定义排序，设置按照产品库存排序。

1: Sort Products by Stock Status @ WooCommerce Shop

/**

1

/**
* @snippet Sort Products By Stock Status - WooCommerce Shop

1

* @snippet Sort Products By Stock Status - WooCommerce Shop
*/

1

*/
1

}

1

}

2: Sort Products SHORTCODE by Stock Status

/**

1

/**
* @snippet Sort Products Shortcode By Stock Status

1

* @snippet Sort Products Shortcode By Stock Status
* @author Rodolfo Melogli

1

* @author Rodolfo Melogli
* @compatible WooCommerce 3.4.5

1

* @compatible WooCommerce 3.4.5
*/

1

*/
1
// Note: products shortcode docs https://docs.woocommerce.com/document/woocommerce-shortcodes/#section-6

1

// Note: products shortcode docs https://docs.woocommerce.com/document/woocommerce-shortcodes/#section-6
// In order for the snippet to work, you must add the parameter orderby = "stock" to the shortcode

1

// In order for the snippet to work, 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

1

// You can add more parameters to it of course e.g. limit, paginate, etc. It's all in the docs

}

1

}
return $args;

1

return $args;
}

1

}

店铺首页中显示商品品牌

WooCommerce 默认的不会显示某一个产品的品牌，当然我们可以用以下方法搞定：

1
function bbloomer_show_woocommerce_brands_loop() {

1

function bbloomer_show_woocommerce_brands_loop() {
global $post;

1

global $post;

}

1

}

店铺显示某用户已经购买过某商品

1
function user_logged_in_product_already_bought() {

1

function user_logged_in_product_already_bought() {

global $product;

1

global $product;

';

1

';
}

1

}
}

1

}

禁用或者修改面包屑导航位置

删除禁用默认的面包屑导航

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

1

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

将导航添加到其它位置，例如放在 header.php 中，则直接在 header.php 适当位置插入如下代码

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

1

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

也可以用 add_action 添加，例如

add_action( 'woocommerce_after_main_content', 'woocommerce_breadcrumb' );

1

add_action( 'woocommerce_after_main_content', 'woocommerce_breadcrumb' );

修改面包屑导航的参数：

// Code source： https://gist.github.com/dwiash/4064836

1

// Code source： https://gist.github.com/dwiash/4064836
function my_woocommerce_breadcrumbs() {

1

function my_woocommerce_breadcrumbs() {
return array(

1

return array(
'delimiter' => ' / ',

1

'delimiter' => ' / ',
'wrap_before' => '

1

'wrap_before' => '
',

1

',
'wrap_after' => '

1

'wrap_after' => '
',

1

',
'before' => '',

1

'before' => '',
'after' => '',

1

'after' => '',

);

1

);
}

1

}
1

参数注释：

delimiter：分隔符
wrap_before：起始标签
wrap_after：结束标签
before：起始标签之后、面包屑导航链接之前的内容
after：面包屑导航链接之后、结束标签之前的内容
home：首页文字，例如像给首页加 font-awesome，可以这样设置

'home' => _x( ' Home', 'breadcrumb', 'woocommerce' ),

1

'home' => _x( ' Home', 'breadcrumb', 'woocommerce' ),

产品没有描述时设置一个默认的描述

WooCommerce 的商品页面如何没有描述会显示空白，这显然不怎么好看，我们可以设置一个段描述用于在没有描述的情况作为默认显示内容。

/**

1

/**
* @snippet Show Custom Content When Short Description Empty - WooCommerce

1

* @snippet Show Custom Content When Short Description Empty - WooCommerce
* @author Rodolfo Melogli

1

* @author Rodolfo Melogli
* @compatible WooCommerce 3.4.5

1

* @compatible WooCommerce 3.4.5
*/

1

*/
1

$post_excerpt = '

1

$post_excerpt = '

'

;

1

;

$post_excerpt .= '';

1

$post_excerpt .= '';
}

1

}
return $post_excerpt;

1

return $post_excerpt;
}

1

}

隐藏相关产品推荐

WooCommerce 默认的会在商品的页面下方显示 4 个相关的产品，如果你不想要，可以用以下代码去掉它。

添加“继续购物”按钮

当用户在 WooCommerce 的产品页面点击添加到购物车后，如果你希望增加一个显示“继续购物”的按钮，可以使用以下代码：

1
function bbloomer_continue_shopping_button() {

1

function bbloomer_continue_shopping_button() {

}

1

}

使用视频作为产品展示而不是静态的图片

WooCommerce 默认的是用图片作为产品展示，我们也可以使用以下代码来让产品变成视频展示。

1
function bbloomer_show_video_not_image() {

1

function bbloomer_show_video_not_image() {
1
// Do this for product ID = 282 only

1

// Do this for product ID = 282 only
1

1
}

1

}
1
}

1

}
1
function bbloomer_show_product_video() {

1

function bbloomer_show_product_video() {
1
echo '

1

echo '

';
1
// get video embed from YouTube

1

// get video embed from YouTube
1

1
echo ‘div>’;

1

echo ‘div>’;
1
}

1

}

调整相关产品的数量

WooCommerce 默认的相关产品数量是 4 个，你可以自定义显示数量。

return $args;

1

return $args;
}

1

}

WooCommerce 订单管理中添加自定义栏

以下代码可以在 WooCommerce 的订单管理页面添加到以国家为参数的列。

/**

1

/**
* @snippet Add Column to Orders Table (e.g. Billing Country) - WooCommerce

1

* @snippet Add Column to Orders Table (e.g. Billing Country) - WooCommerce
* @author Rodolfo Melogli

1

* @author Rodolfo Melogli
* @compatible WooCommerce 3.4.5

1

* @compatible WooCommerce 3.4.5
*/

1

*/
1

return $columns;

1

return $columns;
}

1

}

global $post;

1

global $post;

}

1

}
}

1

}

去掉结算页面的“什么是 Paypal”“What is PayPal?”

WooCommerce 在使用 Paypal 付款时会显示一个“什么是 Paypal”“What is PayPal?”的提示，如果你觉得不好看的话可以用以下方法来删除它：

1
// the apply_filters comes with 2 parameters: $icon_html, $this->id

1

// the apply_filters comes with 2 parameters: $icon_html, $this->id
1
// hence we declare 2 parameters within the function

1

// hence we declare 2 parameters within the function
1
// and the hook above takes the "2" as we decided to pass 2 variables

1

// and the hook above takes the "2" as we decided to pass 2 variables
1

1
// we use one of the passed variables to make sure we only

1

// we use one of the passed variables to make sure we only
1
// run this function for the gateway ID == 'paypal'

1

// run this function for the gateway ID == 'paypal'
1

1
// in here we define our own $icon_html

1

// in here we define our own $icon_html
1
// note there is no mention of the "What is PayPal"

1

// note there is no mention of the "What is PayPal"
1
// all we want is to repeat the part with the paypal logo

1

// all we want is to repeat the part with the paypal logo
1
}

1

}
1
// endif

1

// endif
1
return $icon_html;

1

return $icon_html;
1
// we send the $icon_html variable back to the system

1

// we send the $icon_html variable back to the system
1
// if PayPal, the system will use our custom $icon_html

1

// if PayPal, the system will use our custom $icon_html
1
// if not, the system will use the original $icon_html

1

// if not, the system will use the original $icon_html
1
}

1

}

显示用户已经购买过的产品

如果你想让用户首先在 WooCommerce 的个人订单管理页面看到自己曾经购买过的产品列表，可以先在 function.php 文件中添加以下代码：

/**

1

/**
* @snippet Display All Products Purchased by User via Shortcode - WooCommerce

1

* @snippet Display All Products Purchased by User via Shortcode - WooCommerce
* @author Rodolfo Melogli

1

* @author Rodolfo Melogli
* @compatible Woo 3.4.5

1

* @compatible Woo 3.4.5
*/

1

*/
1
// Note: this will only return purchased products for completed and processing orders

1

// Note: this will only return purchased products for completed and processing orders
1

1
function bbloomer_user_products_bought() {

1

function bbloomer_user_products_bought() {

$columns = 3;

1

$columns = 3;

$args = array(

1

$args = array(
'post_type' => 'product',

1

'post_type' => 'product',
'post_status' => 'publish',

1

'post_status' => 'publish',
'posts_per_page' => -1

1

'posts_per_page' => -1
);

1

);

1
ob_start();

1

ob_start();
1
woocommerce_product_loop_start();

1

woocommerce_product_loop_start();
1

$theid = get_the_ID();

1

$theid = get_the_ID();

}

1

}
endwhile;

1

endwhile;
1
woocommerce_product_loop_end();

1

woocommerce_product_loop_end();
1
woocommerce_reset_loop();

1

woocommerce_reset_loop();
wp_reset_postdata();

1

wp_reset_postdata();
1
return '

1

return '

';

1

';
}

1

}

然后在你需要显示用户所购买过的所有产品的页面添加以下短代码即可：

[my_products]

1

[my_products]

添加新的菜单到账户中心

默认的话，在 WooCommerce 的账户中心只显示资料、订单、地址、退出等菜单，我们可以用以下方法来添加新的菜单。

//添加my-account自定义导航及页面

1

//添加my-account自定义导航及页面
/**

1

/**
* @snippet WooCommerce Add New Tab @ My Account

1

* @snippet WooCommerce Add New Tab @ My Account
* @credits https://github.com/woothemes/woocommerce/wiki/2.6-Tabbed-My-Account-page

1

* @credits https://github.com/woothemes/woocommerce/wiki/2.6-Tabbed-My-Account-page
* @author Rodolfo Melogli

1

* @author Rodolfo Melogli
* @testedwith WooCommerce 3.4.5

1

* @testedwith WooCommerce 3.4.5
*/

1

*/
1
1
// ——————

1

// ——————
// 1. Register new endpoint to use for My Account page

1

// 1. Register new endpoint to use for My Account page
// Note: Resave Permalinks or it will give 404 error

1

// Note: Resave Permalinks or it will give 404 error
1
function bbloomer_add_premium_support_endpoint() {

1

function bbloomer_add_premium_support_endpoint() {

}

1

}
1

1
1
// ——————

1

// ——————
// 2. Add new query var

1

// 2. Add new query var
1

return $vars;

1

return $vars;
}

1

}
1

1
1
// ——————

1

// ——————
// 3. Insert the new endpoint into the My Account menu

1

// 3. Insert the new endpoint into the My Account menu
1

return $items;

1

return $items;
}

1

}
1

1
1
// ——————

1

// ——————
// 4. Add content to the new endpoint

1

// 4. Add content to the new endpoint
1
function bbloomer_premium_support_content() {

1

function bbloomer_premium_support_content() {
echo '

1

echo '

联系我们

有任何问题，欢迎与站长Qi取得联系。Qi的QQ号：xxxxxx，微信号：xxxxx。添加好友请注明“店铺订单”字样。更多的联系方式在：。

'

;

1

;
// echo do_shortcode( ' /* your shortcode here */ ' );

1

// echo do_shortcode( ' /* your shortcode here */ ' );
}

1

}
1

// Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format

1

// Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format

WooCommerce 虽然说是国外人开发的插件，但是却提供非常多的 Hook，我们可以通过主题的函数文件自定义 WooCommerce 各种设置，上面的代码只是 wzfou.com 在使用过程觉得可以用得上的，实际上官方还提供非常多的自定义函数。

当然，也有朋友会觉得修改代码有些困难，WooCommerce 其实已经有类似的插件了，例如 WooCommerce 菜单插件，可以方便你自由地添加自定义链接到“我的账户”中，另外相关 WooCommerce 插件，基本上是整合了以下的代码。

本文由云模板作者：发表，转载请注明来源！

也想出现在这里？吧

1年前

292
2年前

804
7年前

1.53K

发表评论

要发表评论，您必须先。

热销模板

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！

DedeCMS WordPress 教程

由于网站搬家，部分链接失效，如无法下载，请联系站长！谢谢支持！
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » WooCommerce 实用代码汇总自定义WooCommerce功能

分享到：

WordPress搜索页显示搜索结果数量

WordPress网站被黑后如何恢复

网站更新了SSL新证书仍显示旧证书的解决方法

WordPress网站如何添加上传用户头像功能

PHP如何将一个数组追加到另一个数组后面

WordPress获取指定ID用户各类信息（用户名、邮箱）

WordPress菜单怎么添加nofollow和target标签

PHP获取某个文件夹下所有文件名

PHP怎么连接WordPress数据库

wordpress分类栏目怎么让置顶文章显示在最前面