通过 WooCommerce 产品设置中的自定义复选框将类添加到 WooCommerce 页面

Posted 2023-03-06

【中文标题】通过 WooCommerce 产品设置中的自定义复选框将类添加到 WooCommerce 页面

【英文标题】：Add class to WooCommerce pages via custom checkbox in WooCommerce product settings

【发布时间】：2021-05-02 09:19:58

【问题描述】：

我对下面的代码有疑问。使用该代码，我们可以选择特定产品并在商店档案中赋予它们不同的风格。这是有效的。

不过，我猜代码有错误。

激活产品的复选框后，即使我取消选中该复选框，它也始终以新样式显示。我假设我在 get_post_meta 对象上犯了一个错误。

有人可以帮我吗？

在常规产品设置中显示复选框并根据复选框中的值添加类的代码

// Add checkbox
function action_woocommerce_product_general_options_product_style_listing_data() 
    // Checkbox
    woocommerce_wp_checkbox( array( 
        'id'             => '_special_product_listing_style', // Required, it's the meta_key for storing the value (is checked or not)
        'label'          => __( 'Special style', 'woocommerce' ), // Text in the editor label
        'desc_tip'       => false, // true or false, show description directly or as tooltip
        'description'    => __( 'Promote a product by changing the style of the product card', 'woocommerce' ) // Provide something useful here
    ) );

add_action( 'woocommerce_product_options_general_product_data', 'action_woocommerce_product_general_options_product_style_listing_data', 10, 0 );
        
// Save Field
function action_woocommerce_product_general_options_product_style_listing_save( $product ) 
    // Isset, yes or no
    $checkbox = isset( $_POST['_special_product_listing_style'] ) ? 'yes' : 'no';

    // Update meta
    $product->update_meta_data( '_special_product_listing_style', $checkbox );

add_action( 'woocommerce_admin_process_product_object', 'action_woocommerce_product_general_options_product_style_listing_save', 10, 1 );

// Is_special style
function filter_woocommerce_post_class( $classes, $product )     
    if ( get_post_meta( $product->get_id(), '_special_product_listing_style', true ) ) 
        $classes[] = 'custom-product-listing-class';
    
    return $classes;

add_filter( 'woocommerce_post_class', 'filter_woocommerce_post_class', 10, 2 );

---

为特定产品设置样式的 CSS：

/* Custom special product listing style */
li.sales-flash-overlay.woocommerce-text-align-left.woocommerce-image-align-center.do-quantity-buttons.product.type-product.post-10800.status-publish.first.instock.product_cat-crafty-beer-club.has-post-thumbnail.featured.sold-individually.taxable.shipping-taxable.product-type-variable.custom-product-listing-class 
    border: 2px solid;
    border-style: dashed;

【参考方案1】：

替换

// Is_special style
function filter_woocommerce_post_class( $classes, $product )     
    if ( get_post_meta( $product->get_id(), '_special_product_listing_style', true ) ) 
        $classes[] = 'custom-product-listing-class';
    
    return $classes;

add_filter( 'woocommerce_post_class', 'filter_woocommerce_post_class', 10, 2 );

有

// Is_special style
function filter_woocommerce_post_class( $classes, $product ) 
    // Get meta
    $spls = $product->get_meta( '_special_product_listing_style' );
    
    // Compare
    if ( $spls == 'yes' ) 
        $classes[] = 'custom-product-listing-class';
    
    
    return $classes;

add_filter( 'woocommerce_post_class', 'filter_woocommerce_post_class', 10, 2 );

---

这应该足以让您的代码充分发挥作用

【讨论】：

是的！那是错误！为什么我必须在这里对变量使用不同的方式？

在编写代码时，如果存在复选框的值，则始终满足 if 条件。在我的代码中，只有当一个值存在并且它等于'yes'时才会执行