WooCommerce 可视钩子指南:存档/店铺/购物车页面

redmaomail 2024-07-24 17:23 阅读数 68 #WooCommerce

红帽云邮外贸主机

嗨再次 Woo 开发者

在这篇文章中,我为 WooCommerce Archive 页面创建了一个可视化的 HTML 钩子指南(这是与 Shop,Category,Tag 页面相同的页面)。这个视觉指南属于我的 “ 可视钩指南系列 ”,我已经放在一起,以便您可以通过查看他们的实际位置(您也可以复制/粘贴)快速轻松地找到 WooCommerce 钩。如果您喜欢本指南,对您有帮助,请在评论中通知我!

感谢这个 WooCommerce Archive Visual Hooks 指南,现在可以转到您的模板的 functions.php 文件,并使用 “ add_action(’place-hook-here’,’your-PHP-function-here’); “ – 然后,您可以将您的自定义功能准确地放在您喜欢的地方!

请享用!

 

WooCommerce 存档页 [Visual Hook Guide]

woocommerce_before_main_content

woocommerce_archive_description

woocommerce_before_shop_loop

显示全部 4 条结果

默认排序按受欢迎程度排序按平均值排序按新价格排序按价格排序:从低到高按价格排序:从高到低

woocommerce_after_shop_loop

woocommerce_after_main_content

WooCommerce 存档页面默认 add_actions

// These are actions you can unhook/remove!

add_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );

add_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
add_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );

add_action( 'woocommerce_before_shop_loop', 'wc_print_notices', 10 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );

add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );

add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

add_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );

add_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );

如何添加此代码?

1 、您可以将 PHP 代码片段放置在主题或子主题的 functions.php 文件的底部(如果是 CSS 代码,请添加到子主题的 style.css 文件底部)修改之前建议先备份原始文件,若出现错误请先删除此代码。

2 、 WordPress 4.9 后改进了主题编辑器,对于 CSS 代码也可打开网站前台编辑器的【自定义】,复制代码添加到自定义 css 中。

此代码是否可用?

如需帮助或是您有更好的方案想分享?请到薇晓朵 WooCommerce 中文论坛留言告知,我们希望可以帮到更多国内的 WooCommerce 用户也希望您的参与。

文章没看懂?代码不会用?需要帮助您可以

红帽云邮外贸主机

分享到:
版权声明:本站内容源自互联网,如有内容侵犯了你的权益,请联系删除相关内容。
    红帽云邮外贸主机
热门
    红帽云邮外贸主机
    红帽云邮外贸主机