给 WooCommerce 商店创建高级报告应用程序
lyc054211Astra 主题 WooCommerce 钩子实用指南：打造灵活的电商页面
在使用 Astra 主题开发 WooCommerce 商店时，钩子（Hooks）是一种强大手段，它能实现功能扩展、界面优化和前端行为调整。本文汇总 Astra 与 WooCommerce 的常用钩子，适合希望增强网站表现的开发者参考。所有代码建议放置于子主题的 functions.php 文件中。
基础钩子：优化电商组件
修改侧边栏标题标签为 <h4>
将侧边栏小工具标题标签改为 <h4>，有助于提升页面结构清晰度，有利于 SEO。
商店页使用：
add_filter( 'astra_woocommerce_shop_sidebar_init', 'widget_title_tag', 10, 1 );
function widget_title_tag( $atts ) {
$atts['before_title'] = '<h4 class="widget-title">';
$atts['after_title'] = '</h4>';
return $atts;
}
商品页使用：
add_filter( 'astra_woocommerce_single_sidebar_init', 'widget_title_tag', 10, 1 );
隐藏空购物车数量显示
当购物车为空时，将数量显示为空白。
add_filter('astra_woo_header_cart_total', 'remove_cart_count');
function remove_cart_count( $default ) {
return WC()->cart->get_cart_contents_count() == 0 ? false : $default;
}
修改购物车显示文字与样式
更改移动端购物车文字：
add_filter( 'astra_header_cart_flyout_shopping_cart_text', function() {
return '我的购物车';
});
禁用购物车数量显示：
add_filter( 'astra_header_cart_count', '__return_false' );
自定义购物车标题：
add_filter( 'astra_header_cart_title', function() {
return '自定义标题';
});
添加购物车样式类名：
add_filter( 'astra_cart_in_menu_class', function( $args ){
return array_merge($args, ['custom-class-1', 'custom-class-2']);
});
禁用默认购物车图标：
add_filter( 'astra_woo_default_header_cart_icon', '__return_false' );
WooCommerce 页面钩子
关闭 Astra 的 WooCommerce 集成功能
用于恢复 WooCommerce 原生页面结构。
add_filter( 'astra_enable_woocommerce_integration', '__return_false' );
隐藏商店页面父分类
add_filter( 'astra_woo_shop_parent_category', '__return_false' );
更换“缺货”提示文字
add_filter( 'astra_woo_shop_out_of_stock_string', function() {
return '暂无库存';
});
Astra Pro 插件钩子（需已安装）
自定义“无更多商品”提示语
add_filter( 'astra_shop_no_more_product_text', function() {
return '没有更多商品了';
});
更换加入购物车后的跳转页面地址
add_filter( 'astra_woocommerce_add_to_cart_redirect', function() {
return 'https://yourdomain.com/custom-cart/';
});
更换“加载更多”按钮文字
add_filter( 'astra_load_more_text', function() {
return '查看更多';
});
前端行为钩子
商品链接在新标签页打开
remove_action( 'woocommerce_before_shop_loop_item','woocommerce_template_loop_product_link_open', 10 );
add_action( 'woocommerce_before_shop_loop_item', function() {
echo '<a target="_blank" href="' . get_the_permalink() . '" class="woocommerce-LoopProduct-link">';
}, 10 );
在加入购物车按钮上方显示库存数量
add_action( 'astra_woo_shop_add_to_cart_before', function() {
global $product;
echo wc_get_stock_html( $product );
});
页面内容扩展
商店页面添加自定义内容
摘要前添加：
add_action( 'astra_woo_shop_before_summary_wrap', function() {
echo '<div>摘要前内容</div>';
});
摘要后添加：
add_action( 'astra_woo_shop_after_summary_wrap', function() {
echo '<div>摘要后内容</div>';
});
添加“继续购物”按钮至购物车和结账页面
add_action( 'woocommerce_after_cart_table', function() {
$url = get_permalink( wc_get_page_id( 'shop' ) );
echo '<div><a href="'.$url.'" class="button">继续购物</a></div>';
});
add_action( 'woocommerce_before_checkout_form', function() {
$url = get_permalink( wc_get_page_id( 'shop' ) );
echo '<div class="woocommerce-message"><a href="'.$url.'" class="button">继续购物</a> 还想看看其他商品？</div>';
});
商品字段展示扩展
在商品列表中显示 SKU
add_action( 'woocommerce_after_shop_loop_item_title', function() {
global $product;
echo "<p style='color:#444;'>SKU: " . $product->get_sku() . "</p>";
}, 20 );
商店页标题前后添加字段
add_action( 'astra_woo_shop_title_before', function() {
echo '<div>标题前字段</div>';
});
add_action( 'astra_woo_shop_title_after', function() {
echo '<div>标题后字段</div>';
});
商品详情页标题前后添加字段
add_action( 'astra_woo_single_title_before', function() {
echo '<div>商品标题前字段</div>';
});
add_action( 'astra_woo_single_title_after', function() {
echo '<div>商品标题后字段</div>';
});
总结
通过合理运用 Astra 提供的钩子，可以轻松调整 WooCommerce 商店的显示内容和功能结构。这些钩子覆盖了页面样式、按钮文字、行为控制、字段展示等多个方面，开发者可按需组合使用，打造契合项目需求的高效商城页面。代码建议统一维护在子主题中，方便管理与升级。
最新文章
了解 宝藏号 的更多信息订阅后即可通过电子邮件收到最新文章。 © 版权声明 文章版权归作者所有，未经允许请勿转载。 相关文章
lyc054211
Astra主题与Elementor：模块间隙调整与模板保存技巧（08）lyc054211
怎样在WooCommerce中集成Airwallex支付网关lyc054211
WooCommerce 已更新以解决跨站点脚本漏洞lyc054211 暂无评论... |
|---|