为属性添加 WooCommerce CSS 类

Question

如何在 Woocommerce 中为产品属性添加 CSS 类？例如，我需要通过 :before & :after 伪元素为每个属性显示单独的图标。

提前致谢！

附：抱歉耽搁了 我以为您熟悉 Woocommerce 的语法。 Woocommerce 还使用操作和挂钩来显示一些信息。例如在产品页面上显示属性。我想用单个图标显示 Woocommcerce 产品属性。现在我在 content-product.php 的钩子之后添加了 php 代码（woocomemrce 模板以循环显示产品）

/**
 * woocommerce_after_shop_loop_item_title hook.
 *
 * @hooked woocommerce_template_loop_rating - 5
 * @hooked woocommerce_template_loop_price - 10
 */
do_action( 'woocommerce_after_shop_loop_item_title' );
/** ATTRIBUTES BEGIN **/

// Get the attributes
$attributes = $product->get_attributes();
// Start the loop
foreach ( $attributes as $attribute ) : 

// Check and output, adopted from /templates/single-product/product-attributes.php
    if ( $attribute['is_taxonomy'] ) {
        $values = wc_get_product_terms( $product->id, $attribute['name'], array( 'fields' => 'names' ) );
        echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );
    } else {
        // Convert pipes to commas and display values
        $values = array_map( 'trim', explode( WC_DELIMITER, $attribute['value'] ) );
        echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );
    }

 endforeach; 
 /** ATTRIBUTES END **/

通过这种方法，我可以显示产品属性并为属性添加图标。但我只能添加一个图标，因为在 Woocommerce 中没有为每个属性添加 CSS 类的功能。

Answer 1

我了解到您需要为每个属性添加不同的类（针对 CSS）。 为此，您必须在 woocommerece 中编辑以下 php 文件。在您的 wordpress 中转到 wp-content\plugins\woocommerce\templates\single-product 并打开 product-attributes.php 文件。 替换以下代码。 注意：您可以直接在插件中编辑，也可以将此文件复制到您的子主题中。

<?php
/**
 * Product attributes
 *
 * Used by list_attributes() in the products class.
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/product-attributes.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see 	    https://docs.woocommerce.com/document/template-structure/
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     3.1.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<table class="shop_attributes">
	<?php if ( $display_dimensions && $product->has_weight() ) : ?>
		<tr>
			<th><?php _e( 'Weight', 'woocommerce' ) ?></th>
			<td class="product_weight"><?php echo esc_html( wc_format_weight( $product->get_weight() ) ); ?></td>
		</tr>
	<?php endif; ?>

	<?php if ( $display_dimensions && $product->has_dimensions() ) : ?>
		<tr>
			<th><?php _e( 'Dimensions', 'woocommerce' ) ?></th>
			<td class="product_dimensions"><?php echo esc_html( wc_format_dimensions( $product->get_dimensions( false ) ) ); ?></td>
		</tr>
	<?php endif; ?>
   <?php
		//Here I added a variable for incrementing.
		$class_name=1;
	 ?>
	<?php foreach ( $attributes as $attribute ) : $class_name++; ?>
		<tr>
			<th class="my_classname_<?php echo $class_name++; ?>"><?php echo wc_attribute_label( $attribute->get_name() ); ?></th>
			<td><?php
				$values = array();

				if ( $attribute->is_taxonomy() ) {
					$attribute_taxonomy = $attribute->get_taxonomy_object();
					$attribute_values = wc_get_product_terms( $product->get_id(), $attribute->get_name(), array( 'fields' => 'all' ) );

					foreach ( $attribute_values as $attribute_value ) {
						$value_name = esc_html( $attribute_value->name );

						if ( $attribute_taxonomy->attribute_public ) {
							$values[] = '<a href="' . esc_url( get_term_link( $attribute_value->term_id, $attribute->get_name() ) ) . '" rel="tag">' . $value_name . '</a>';
						} else {
							$values[] = $value_name;
						}
					}
				} else {
					$values = $attribute->get_options();

					foreach ( $values as &$value ) {
						$value = make_clickable( esc_html( $value ) );
					}
				}

				echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );
			?></td>
		</tr>
	<?php endforeach; ?>
</table>

Answer 2

如果您想为每个 Woocommerce 特定属性值分配 CSS 类，您可以使用以下代码：

/** ATTRIBUTES BEGIN **/

// Get the attributes
$attributes = $product->get_attributes();
// Start the loop
foreach ( $attributes as $attribute ) : 

// Check and output, adopted from /templates/single-product/product-attributes.php
    if ( $attribute['is_taxonomy'] ) {
        $values = wc_get_product_terms( $product->id, $attribute['name'], array( 'fields' => 'names' ) );
        if($attribute['name'] == 'pa_usl_otpuska'){ 
        foreach($values as $value){ 
        $value_classname = $value; // how can I get the value name??
    }     
        echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize('<span class="lbl ' . $value_classname . '">'. implode( '</span><span class="lbl ' . $value . '">', $values ).'</span>' ) ), $attribute, $values );
    } else {
  echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );
    }
} else {

    // Convert pipes to commas and display values
       $values = array_map( 'trim', explode( WC_DELIMITER, $attribute['value'] ) );
    echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );

    }
 endforeach; 
 /** ATTRIBUTES END **/

例如，我在钩子后将这段代码添加到 Woocomemrce - content-product.php 中：

do_action( 'woocommerce_after_shop_loop_item_title' );

并添加了一些这样的 CSS 代码：

.lbl.reciept:before{
    font-family: FontAwesome;
    content: "\f0f6";
    padding-right:10px;
    color:#FF9F41;
    font-size:25px;
}