如何使WordPress主题WooCommerce准备就绪

使您的WordPress主题WooCommerce与这些有用的代码片段兼容

因此,您想在主题中添加一家商店-太棒了! WooCommerce是一个不错的选择。从技术上讲 所有 主题是“ WooCommerce兼容”,因为它是一个插件。从理论上讲,任何插件都可以与任何WordPress主题配合使用(编码正确).


但是,作为主题开发人员,您可能希望调整WooCommerce的输出以更好地适合您的主题,或者向WooCommerce设置中不易使用的最终用户提供选项(例如更改商店中的列数)。在下面,您将找到一些有用的代码片段,可用于在主题中为WooCommerce提供“更好”的支持和/或更改特定设计的内容。.

重要:以下许多摘录仅使用WooCommerce中提供的功能。因此,请确保这些片段不只是转储在创建用于分发的主题中的functions.php文件的底部。如果您打算与他人共享主题或出售主题,请确保仅在WooCommerce插件处于活动状态时才将片段放置在加载的文件中.

检查是否启用了WooCommerce

在我的主题中,我想定义一个自定义常量,该常量可用于检查是否以这种方式启用了WooCommerce,只有在WooCommerce处于活动状态时,我才能包括文件或运行函数(如果尚未查看,请参阅上面的重要消息).

//添加新常量,如果WooCommerce处于活动状态,则返回true
define('WPEX_WOOCOMMERCE_ACTIVE',class_exists('WooCommerce'));

//检查WooCommerce是否处于活动状态
如果(WPEX_WOOCOMMERCE_ACTIVE){
// 做一点事...
//例如,在所有Woo编辑中包括一个新文件.
}

声明WooCommerce支持

这是添加到主题中的第一个也是最重要的一段代码,可以“启用” WooCommerce支持并防止插件告知最终用户该主题不兼容的警告.

add_action('after_setup_theme',function(){
add_theme_support('woocommerce');
});

删除WooCommerce CSS

我个人更愿意覆盖WooCommerce样式,以防止第三方WooCommerce插件出现任何可能的问题。但是,如果要删除所有WooCommerce样式,这很容易.

以下代码段用于删除所有WooCommerce样式:

//删除所有Woo样式
add_filter('woocommerce_enqueue_styles','__return_empty_array');

此代码段是有条件删除特定CSS样式的示例:

函数wpex_remove_woo_styles($ styles){
unset($ styles ['woocommerce-general']);
unset($ styles ['woocommerce-layout']);
unset($ styles ['woocommerce-smallscreen']);
返回$ styles;
}
add_filter('woocommerce_enqueue_styles','wpex_remove_woo_styles');

启用WooCommerce产品库,缩放和灯箱(v3.0 +)

在WooCommerce 3.0中,他们引入了新的产品库,缩放和灯箱。如果您想在主题中使用它们,则必须通过“ add_theme_support”将其全部启用.

add_theme_support('wc-product-gallery-slider');
add_theme_support('wc-product-gallery-zoom');
add_theme_support('wc-product-gallery-lightbox');

删除店铺名称

许多主题已经具有显示存档标题的功能,因此此代码从WooCommerce中删除了多余的标题,最好是通过CSS隐藏它.

add_filter('woocommerce_show_page_title','__return_false');

更改商店的档案名称

如果您的主题使用archive_title()或get_archive_title()函数显示档案的标题,则可以通过过滤器轻松调整主题,以获取产品页面的名称,而不是商店档案的标题.

函数wpex_woo_archive_title($ title){
如果(is_shop()&& $ shop_id = wc_get_page_id('shop')){
$ title = get_the_title($ shop_id);
}
返回$ title;
}
add_filter('get_the_archive_title','wpex_woo_archive_title');

更改商店每页显示的产品数量

用于更改商店和产品档案(类别和标签)上每页显示的产品数量.

//每页更改WooCommerce商店帖子
函数wpex_woo_posts_per_page($ cols){
返回12;
}
add_filter('loop_shop_per_page','wpex_woo_posts_per_page');

更改每行显示在商店中的列数

我不明白为什么WooCommerce会以这种方式工作,但您不能仅更改“ loop_shop_columns”过滤器,还必须将唯一的类添加到body标签中,以使列起作用。 Woo简码的div包装器具有正确的类,而商店页面则没有,这就是为什么我们需要两个功能.

//修改商店栏
函数wpex_woo_shop_columns($ columns){
返回4;
}
add_filter('loop_shop_columns','wpex_woo_shop_columns');

//为商店列添加正确的正文类
函数wpex_woo_shop_columns_body_class($ classes){
如果(is_shop()|| is_product_category()|| is_product_tag()){
$ classes [] ='columns-4';
}
返回$ classs;
}
add_filter('body_class','wpex_woo_shop_columns_body_class');

更改下一个和上一个分页箭头

该代码段将使您可以调整商店中的分页箭头以匹配主题中的箭头.

函数wpex_woo_pagination_args($ args){
$ args ['prev_text'] ='';
$ args ['next_text'] ='';
返回$ args;
}
add_filter('woocommerce_pagination_args','wpex_woo_pagination_args');

更改销售徽章文字

在使用其他语言或删除感叹号的网站上特别有用,我不喜欢.

函数wpex_woo_sale_flash(){
返回''。 esc_html __('Sale','woocommerce')。 '';
}
add_filter('woocommerce_sale_flash','wpex_woo_sale_flash');

更改产品图库的缩略图列

您可能要根据您的布局更改单个产品库缩略图的列数,而此功能将完成此操作.

函数wpex_woo_product_thumbnails_columns(){
返回4;
}
add_action('woocommerce_product_thumbnails_columns','wpex_woo_product_thumbnails_columns');

更改显示的相关产品数

用于更改单个产品页面上为相关产品显示的产品数量.

//设置相关产品以显示4个产品
函数wpex_woo_related_posts_per_page($ args){
$ args ['posts_per_page'] = 4;
返回$ args;
}
add_filter('woocommerce_output_related_products_args','wpex_woo_related_posts_per_page');

更改产品相关和追加销售部分的每行列数

就像商店一样,如果您想在单个产品页面上适当地更改相关产品和追加销售产品的列数,则必须过滤这些列并相应地更改主体类别.

//过滤追加销售的列
函数wpex_woo_single_loops_columns($ columns){
返回4;
}
add_filter('woocommerce_up_sells_columns','wpex_woo_single_loops_columns');

//过滤相关的参数
函数wpex_woo_related_columns($ args){
$ args ['columns'] = 4;
返回$ args;
}
add_filter('woocommerce_output_related_products_args','wpex_woo_related_columns',10);

//过滤主体类以添加列类
函数wpex_woo_single_loops_columns_body_class($ classes){
如果(is_singular('product')){
$ classes [] ='columns-4';
}
返回$ classs;
}
add_filter('body_class','wpex_woo_single_loops_columns_body_class');

在菜单中添加动态购物车链接和购物车费用

此代码段会将WooCommerce购物车项目添加到您的菜单中,以显示购物车中项目的成本。另外,如果您的网站启用了“超赞字体”,它将显示一个小购物袋图标. 重要:不得将这些函数包装在is_admin()条件中,因为它们依赖AJAX来更新成本,您必须确保is_admin()返回true和false时这些函数可用.

//将购物车链接添加到菜单
函数wpex_add_menu_cart_item_to_menus($ items,$ args){

//确保将“ wpex_main”更改为菜单位置 !!!!
如果($ args-> theme_location ==='wpex_main'){

$ css_class ='菜单项菜单项推车类型菜单项woowoo推车';

如果(is_cart()){
$ css_class。='当前菜单项';
}

$ items。='
  • '; $ items。= wpex_menu_cart_item(); $ items。='
  • '; } 返回$ items; } add_filter('wp_nav_menu_items','wpex_add_menu_cart_item_to_menus,10,2); //函数返回主菜单购物车链接 函数wpex_menu_cart_item(){ $ output =''; $ cart_count = WC()->购物车-> cart_contents_count; $ css_class ='wpex-菜单-购物车总计wpex-cart-总计-'。 intval($ cart_count); 如果($ cart_count){ $ url = WC()->购物车-> get_cart_url(); }其他{ $ url = wc_get_page_permalink('shop'); } $ html = $ cart_extra = WC()-> cart-> get_cart_total(); $ html = str_replace('amount','',$ html); $ output。=''; $ output。=''; $ output。= wp_kses_post($ html); $ output。=''; 返回$ output; } //使用AJAX更新购物车链接 函数wpex_main_menu_cart_link_fragments($ fragments){ $ fragments ['。wpex-menu-cart-total'] = wpex_menu_cart_item(); 返回片段 } add_filter('add_to_cart_fragments','wpex_main_menu_cart_link_fragments');

    结论

    WooCommerce默认情况下可以使用任何主题,但是添加了对插件的一些额外支持,使其更适合您的主题非常容易做到。我实际上是在编写纽约WordPress博客和商店主题时写的这篇文章的,所以这些调整大部分都包含在我们的主题中。或者,如果您愿意购买该主题以查看如何完成所有操作(请参阅wpex-new-york / inc / woocommerce中的文件),这可能是您更轻松地学习如何正确添加的方式通过查看已经编码的主题对WooCommerce插件的自定义支持.

    您是否认为其他片段属于此列表,或者在开发新的支持WooCommerce的主题时会有所帮助?

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map