Astra 主题 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 商店的显示内容和功能结构。这些钩子覆盖了页面样式、按钮文字、行为控制、字段展示等多个方面，开发者可按需组合使用，打造契合项目需求的高效商城页面。代码建议统一维护在子主题中，方便管理与升级。

最新文章

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息