如何使WooCommerce产品属性更加突出
WooCommerce产品属性是一个非常有用的功能,但是默认情况下,它们在页面的“ 其他信息”部分中被隐藏了很深。 根据您的主题,在用户单击选项卡之前,它们可能不可见,这意味着许多用户可能不会看到它们。
有时,将它们与产品类别一起列出在单个产品页面的上部会更有帮助。 在本教程中,我将向您展示如何将产品属性从“ 其他信息”标签移动到页面的顶部。
您需要什么
要继续进行,您需要:
- WordPress的开发安装。
- 代码编辑器。
- WooCommerce已安装并激活。
- 添加的产品-我已经导入了WooCommerce随附的虚拟产品数据; 有关如何执行此操作的详细信息,请参阅本指南 。
- 添加了一个或多个产品属性(带有虚拟数据的内置颜色属性无法以标准方式运行)。
- 激活了与WooCommerce兼容的主题,我正在使用Storefront 。
要在单个产品页面顶部附近添加属性,我们将执行以下操作:
- 创建一个空插件并激活它。
- 查看WooCommerce源代码,以识别控制添加到页面底部标签的产品属性的过滤器。
- 添加连接到该过滤器的函数,以删除属性选项卡。
- 再次查看源文件,以确定在页面顶部引入内容的挂钩。
- 与此挂钩的功能。
让我们先来看一下默认情况下产品属性的显示方式。 我创建了一个名为Size的属性,并向其中添加了三个值:small,medium和large。 此处显示在产品页面底部的“ 其他信息”部分中:
我们希望将这些产品属性从屏幕底部移到产品说明下方的左上角。
创建插件
在您的wp-content / plugins文件夹中,创建一个新文件。 我叫woocommerce-prominent-product-attributes.php
。 打开该文件,然后添加以下内容:
<?php/*** Plugin Name: WooCommerce Prominent Product Attributes* Plugin URI: https://code.tutsplus.com/tutorials/making-woocommerce-product-attributes-more-prominent--cms-25438* Description: Make WooCommerce product attributes more prominent by moving them out of the "more information" tab onto the top of the page on single product pages (requires WooCommerce to be activated).* Version: 1.0.0* Author: Rachel McCollin* Author URI: http://rachelmccollin.co.uk* License: GPL-3.0+* License URI: http://www.gnu.org/licenses/gpl-3.0.html* Domain Path: /lang* Text Domain: tutsplus*/
保存文件,然后转到WordPress仪表板中的“ 插件”屏幕。 激活插件。
WooCommerce源代码:产品属性显示
让我们首先确定用于输出产品属性的函数和挂钩。 这涉及浏览一些插件文件:
- 输出单个产品页面的
woocommerce/templates/single-product.php
是woocommerce/templates/single-product.php
。 - 在该文件中,有一个对
content-single-product.php
文件的get_template_part()
调用。 - 在该文件中,有一个名为
woocommerce_after_single_product_summary
的操作。 它具有三个功能:我们需要查看的一个功能是woocommerce_output_product_data_tabs()
。 - 您可以在
woocommerce/includes/wc-template-functions.php
找到woocommerce_output_product_data_tabs()
woocommerce/includes/wc-template-functions.php
。 - 该函数使用
wc_get_template()
获取另一个模板部分,在本例中为wooocommerce/templates/single-product/tabs/tabs.php
。 - 在那个文件中(我保证到达那里),有一个名为
$tabs
的变量,定义为apply_filters( 'woocommerce_product_tabs', array() );
。 - 因此,要删除产品属性选项卡,我们需要创建一个函数来删除该选项卡,并将其挂接到
woocommerce_product_tabs
过滤器。
! 我们到了最后。
使用过滤器从选项卡中删除产品属性
幸运的是,WooCommerce文档提供了有关如何使用此过滤器删除选项卡的指南 ,这使我们的工作更加轻松。
在您的插件文件中,添加以下代码:
/*** Removes the "Additional Information" tab that displays the product attributes.* * @param array $tabs WooCommerce tabs to display.* * @return array WooCommerce tabs to display, minus "Additional Information".*/
function tutsplus_remove_product_attributes_tab( $tabs ) {unset( $tabs['additional_information'] );return $tabs;}add_filter( 'woocommerce_product_tabs', 'tutsplus_remove_product_attributes_tab', 100 );
此函数将$tabs
作为其对象,因为这是我们正在使用的变量。 它从$tabs
变量存储的值数组中删除'additional_information'
选项$tabs
。 请注意,在挂钩函数时,我使用了100
的高优先级,以确保它在首先添加选项卡的函数之后触发。
保存文件并刷新产品页面:
因此,该选项卡已删除。 现在,我们需要在页面顶部重新添加产品属性。
在代码中查找要添加属性的位置
我们再次需要确定在代码中的何处需要添加一个函数来显示产品属性。 换句话说,我们需要找到一个动作挂钩。
回到content-single-product.php
文件,有一个名为woocommerce_single_product_summary
的钩子,由七个函数使用,每个函数输出有关产品的不同数据,即:
- 标题
- 等级
- 价格
- 摘录(即简短描述)
- 添加到购物车按钮
- 元数据
- 分享连结
我想在用于元数据的部分中添加我的属性,因此让我们看一下输出该属性的函数。
该函数位于wc_template_functions.php
文件中,它使用wc_get_template()
调用另一个包含文件woocommerce/templates/single/product/meta.php
。
在meta.php
文件中,有代码来对产品输出的元数据,与woocommerce_product_meta_start
前钩和woocommerce_product_meta_end
后钩。 因此,我们可以使用这两个挂钩之一来输出我们的产品属性。 让我们使用最后一个,因为这将使属性出现在类别和标记之后。
编写函数以输出产品属性
复制WooCommerce已经提供的代码
要输出我们产品的分类术语列表,我们可以使用WooCommerce提供的名为list_attributes()
的函数。 您可以在templates/single/product/tabs/additional-information.php
文件中找到此功能。
在您的插件文件中,添加以下内容:
/*** Displays product attributes in the top right of the single product page.* * @param $product*/
function tutsplus_list_attributes( $product ) {global $product;$product->get_attributes();}add_action( 'woocommerce_product_meta_end', 'tutsplus_list_attributes' );
请注意,您不需要使用优先级,因为WooCommerce没有将任何其他功能挂钩到该动作挂钩。
现在刷新您的产品页面:
现在显示属性。 他们使用的是带有Storefront主题的类似于选项卡的界面,因为这是为默认的“ 其他信息”选项卡设置的,输出HTML使用了一个表,该表提供了默认的布局。
没有表的替代方法
该表并不理想:最好有一个产品属性列表,以使其上方的产品类别列表匹配。 来做吧。
WooCommerce将属性存储为自定义分类法。 当将属性存储到数据库时,为每个属性值创建的pa_
前面带有pa_
后缀。
但是,它不会像在WordPress中注册常规自定义分类法时那样将这些分类法存储在wp_term_taxonomy
表和wp_terms
表中。 相反,WooCommerce为属性创建表,这意味着数据存储方式不同。 这意味着在输出列表时,我们必须采取一种更round回的方法来访问每种分类的标签。
在您的tutsplus_list_attributes()
函数中,删除函数内部的两行。 用以下代码替换它们:
global $product;
global $post;$attributes = $product->get_attributes();if ( ! $attributes ) {return;}foreach ( $attributes as $attribute ) {// Get the taxonomy.$terms = wp_get_post_terms( $product->id, $attribute[ 'name' ], 'all' );$taxonomy = $terms[ 0 ]->taxonomy;// Get the taxonomy object.$taxonomy_object = get_taxonomy( $taxonomy );// Get the attribute label.$attribute_label = $taxonomy_object->labels->name;// Display the label followed by a clickable list of terms.echo get_the_term_list( $post->ID, $attribute[ 'name' ] , '<div class="attributes">' . $attribute_label . ': ' , ', ', '</div>' );}
该代码的作用如下:
- 它定义了全局
$product
变量(这是我们函数的对象)。 - 它使用
$product->get_attributes()
来获取此产品的所有属性。 - 如果不存在,则不执行任何操作。
- 如果有属性,它将为每个属性打开一个
foreach
循环。 - 为了获取标签,它使用
wp_get_post_terms()
和get_taxonomy()
函数为该帖子获取与此分类法有关的数据数组。 - 然后,它回显分类法(或属性)的名称(或
label
),然后使用get_the_term_list()
列出每个值的档案链接列表。
现在,属性显示在列表中:
好多了!
致谢:感谢 Isabel Castillo 提供了用于显示属性标签的代码。
摘要
在产品页面中移动产品属性需要花费大量时间来研究WooCommerce源代码,并确定在显示产品属性中起作用的模板文件,挂钩和函数。
通过找到控制输出哪些选项卡的过滤器,我们能够删除“ 其他信息”选项卡,该选项卡从屏幕底部删除了属性。 然后,通过向页面上方的挂钩添加新功能,我们可以将它们输出到所需的位置。
如果您有兴趣将其他WooCommerce功能整合到您的网站中,请查看市场上可用的功能 。
翻译自: https://code.tutsplus.com/tutorials/how-to-make-woocommerce-product-attributes-more-prominent--cms-25438
如何使WooCommerce产品属性更加突出相关推荐
- WooCommerce适合企业电子商务吗?
目录 成功开展电子商务业务变得比以往任何时候都容易.市场上有几个现成的平台,完全有可能将一个初步的想法快速转变为在线贸易业务,并源源不断地收到订单. 什么是 WooCommerce? 为什么您应该考虑 ...
- wordpress图像大小_8个WordPress插件来创建令人敬畏的图像效果
wordpress图像大小 Images are (or at least should be) an integral part of any website. They compel. They ...
- Effective C++连载
第一章 从C转向C++ 对每个人来说,习惯C++需要一些时间,对于已经熟悉C的程序员来说,这个过程尤其令人苦恼.因为C是C++的子集,所有的C的技术都可以继续使用,但很多用起来又不太合适.例如,C+ ...
- WooCommerce SEO:电商平台和商城系统SEO的权威指南
点击阅读WooCommerce SEO:电商平台和商城系统SEO的权威指南原文 如果您使用WooCommerce建立网购商城或商城系统,那么您来到对地方.我们知道且一次又一次的被问到,关于实用性的向您 ...
- WooCommerce入门指南:产品标签,类别和属性
在本系列有关WooCommerce的前几篇文章中,我讨论了不同的设置及其配置,包括添加产品. 然后,我们探索了四种带有特色图像和产品图库的不同产品. 在产品部分中,有产品标签,类别和属性的选项. 这就 ...
- woocommerce产品选项卡描述_适合WooCommerce卖家的7款Dropshipping插件+功能介绍
为了能在激烈的竞争中立于不败之势,在WooCommerce店铺列出高质量.独特且受欢迎的dropshipping(代发货)产品尤为重要,为你的店铺找到好的dropshipping(代发货)供应商,本文 ...
- php页面增加自选项,php - 添加自定义设置选项卡,Woocommerce的设置客户列表内容 - SO中文参考 - www.soinside.com...
有很多代码中的错误和失误.我深深重新审视你的代码,使它更亮: // Add a custom setting tab to Woocommerce > Settings section add_ ...
- 如何使用WooCommerce简码
WooCommerce简码(shortcode)可以让我们将产品.购物车等内容加入到页面或者文章中.我们在外贸建站时,可以直接通过Elementor Pro的Product元素块来配置产品的展示,但如 ...
- 最佳会员WooCommerce插件比较
WooCommerce和WordPress是在线商务的强大组合. 他们一起在网上经营着37%的电子商务业务. 充分利用这两点,可以完美组合在线销售实物产品,数字商品和服务. 但是拥有最出色的WooCo ...
最新文章
- Algorithm之EM:Expectation Maximization简介、代码实现
- MyBatis从缓存查找数据的依据
- android怎么打开wifi的组播功能
- 东华大学计算机年薪,东华大学公布应届毕业生薪酬:本科生月薪中位数6637元...
- php curl登陆邮箱,php利用CURL函数登入163邮箱并获取自己的通讯录
- python顺序查找算法解释_顺序查找算法详解(包含C语言实现代码)
- 鼎信通达gsm网关和asterisk对接的调试
- python没有pygame_教程丨python 做一个简单的MP3
- IP Scanner Pro for mac(局域网IP扫描)
- Java后端开发工作 - 写接口
- Windows 11 Insider Preview Build 22000.132 官方简体中文版 iso 下载
- 杭州电子科技大学2020计算机研究生考研经验贴
- MySQL临时表创建及旧表建新表
- 【精品软件】WeGo(微博PPC客户端) Release Note (更新至v1.05 Build20110117)
- css中“~”(波浪号)、“,”(逗号)、 “ + ”(加号)和 “ > ”(大于号)是什么意思?
- 口腔医学会计算机专业委员会,2019年中华口腔医学会口腔医学计算机专业委员会第十七次全国口腔医学数字化学术会议第二轮会议通知...
- 数据结构 java c_数据结构——链表(用Java实现C语言的指针,思想)
- python 串口读取地磅仪表_地磅串口数据读取解决办法
- MySQL之DML和DQL
- 海信威武!吞并日本东芝,又一家日本巨头倒下