php - Add class to WooCommerce pages via custom checkbox in WooCommerce product settings

Question

I have a problem with the code below. With that code, we can select specific product and give them a different style in the shop archive. This is working.

However, I guess there is a error in the code.

Once I activated the checkbox for a product, it always appears in the new style even when I uncheck the checkbox. I assume that I made a error with the get_post_meta object.

Can someone help me with that?

Code to display the check box in the general product settings and add the class, based on the value in the check box

// 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 to style the specific products:

/* 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;
}

question from:https://stackoverflow.com/questions/65937802/add-class-to-woocommerce-pages-via-custom-checkbox-in-woocommerce-product-settin

Answer 1

Replace

// 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 );

With

// 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 );

---

That should suffice for your code to function fully