css - 更改属性样式,删除项目符号列表
问题描述
我终于找到了这段代码来显示单个产品页面上的属性,但是我想更改属性列表的样式,我想用图标替换项目符号。我该怎么做?提前致谢
function isa_woocommerce_all_pa(){
global $product;
$attributes = $product->get_attributes();
if ( ! $attributes ) {
return;
}
$out = '<ul class="custom-attributes">';
foreach ( $attributes as $attribute ) {
// skip variations
if ( $attribute->get_variation() ) {
continue;
}
$name = $attribute->get_name();
if ( $attribute->is_taxonomy() ) {
$terms = wp_get_post_terms( $product->get_id(), $name, 'all' );
// get the taxonomy
$tax = $terms[0]->taxonomy;
// get the tax object
$tax_object = get_taxonomy($tax);
// get tax label
if ( isset ( $tax_object->labels->singular_name ) ) {
$tax_label = $tax_object->labels->singular_name;
} elseif ( isset( $tax_object->label ) ) {
$tax_label = $tax_object->label;
// Trim label prefix since WC 3.0
if ( 0 === strpos( $tax_label, 'Product ' ) ) {
$tax_label = substr( $tax_label, 8 );
}
}
$out .= '<li class="' . esc_attr( $name ) . '">';
$out .= '<span class="attribute-label">' . esc_html( $tax_label ) . ': </span> ';
$out .= '<span class="attribute-value">';
$tax_terms = array();
foreach ( $terms as $term ) {
$single_term = esc_html( $term->name );
// Insert extra code here if you want to show terms as links.
array_push( $tax_terms, $single_term );
}
$out .= implode(', ', $tax_terms);
$out .= '</span></li>';
} else {
$value_string = implode( ', ', $attribute->get_options() );
$out .= '<li class="' . sanitize_title($name) . ' ' . sanitize_title( $value_string ) . '">';
$out .= '<span class="attribute-label">' . $name . ': </span> ';
$out .= '<span class="attribute-value">' . esc_html( $value_string ) . '</span></li>';
}
}
$out .= '</ul>';
echo $out;
}
add_action('woocommerce_single_product_summary', 'isa_woocommerce_all_pa', 25);
解决方案
使用 :before 伪类定位列表项并以这种方式添加图标。
ul li:before {
content: '';
background-image: url(‘icon.png’);
}
推荐阅读
- javascript - 转换为 django 模板时出现 Javascript 问题
- json - 如何在逻辑应用程序中搜索 Azure 表存储 JSON 响应?
- sql - 带有日期列的动态数据透视表
- html - 如何在背景图像上获取社交媒体图标?
- javascript - 如何将类添加/切换到元素以便将汉堡菜单切换到 X 以便关闭并再次返回
- c# - 通过脚本从 Holotoolkit 更改 Hololens SpatialMapping 预制件的材质?
- python - 替换熊猫中某一年之前的所有单元格
- ios - 如何从 swift 本机代码 (AppDelegate) 调用 (Invoke) dart 方法??“invokeMethod”在 android 上工作,但在 ios 上不工作
- android - 如何执行多个文件复制到共享集合下载,适用于 Android Q,范围存储?
- .net - ValueTuples 可以与 .net 4.5.2 一起使用吗?