[Resolved] special background in shop archive for specific products

[nik9]

Hello,

We want to promote some product via special card style. For that, we plan to implement a checkbox to select specific product in order to style the cart from them a a little bit.

But I do not know how to add a classin order to style the div from a product cart. (See link to picture)

// Add new checkbox to product edit page (General tab)
  
add_action( 'woocommerce_product_options_general_product_data', 'special_style_checkbox_to_products' );        
  
function special_style_checkbox_to_products() {           
woocommerce_wp_checkbox( array( 
'id' => 'custom_special_style', 
'class' => '', 
'label' => 'Special Style'
) 
);      
}
  
// -----------------------------------------
// Save checkbox via custom field
  
add_action( 'save_post', 'save_special_style_checkbox_to_post_meta' );
  
function save_special_style_checkbox_to_post_meta( $product_id ) {
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
        return;
    if ( isset( $_POST['custom_special_style'] ) ) {
            update_post_meta( $product_id, 'custom_special_style', $_POST['custom_special_style'] );
    } else delete_post_meta( $product_id, 'custom_special_style' );
}

// -----------------------------------------
// special style
  
add_action( 'woocommerce_before_shop_loop_item_title', function () {
    global $product;     
    if ( get_post_meta( $product->get_id(), 'custom_special_style', true ) ) {

// echo 

    }
});

[David]

Hi there,

this really is a question for Woocommerce support. But you can use the woocommerce_post_class filter.

Here’s a basic use of that filter.

function filter_woocommerce_post_class( $classes, $product ) {    
    if ( some_codition_true ) {
        $classes[] = 'your-custom-product-class';
    }
    return $classes;
}
add_filter( 'woocommerce_post_class', 'filter_woocommerce_post_class', 10, 2 );

[nik9]

Thanks David!

Now I have a fully working php snipped (see code below). Now I only have problems to style the background from a product card.

We want to:
– Style the border (WORKS)
– Style the background (DOES NOT WORK)

I know that we made some adjustments with the products listing: https://generatepress.com/forums/search/woo-content-wrap/

We use a white background for our woo-content-wrap class (We can not change that). So then I have to adjust also the background color from woo-content-wrap when special style is activated.

How can I add a class to the <div class="woo-content-wrap"></div>?

// 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 ) {
    $spls = $product->get_meta( '_special_product_listing_style' );
    
    if ( $spls == 'yes' ) {
        $classes[] = 'custom-product-listing-class';
    }
    
    return $classes;
}
add_filter( 'woocommerce_post_class', 'filter_woocommerce_post_class', 10, 2 );

[David]

Why not just string your CSS selectors eg.

.your-custom-class-added-by-function .woo-content-wrap {
    /* Styles */
}

[nik9]

Yes perfect! I didn’t know that it is that simple 😉

A last question:
We also change the border with that CSS. It works nice but only for variable products. This is becasue the class product-type-variable is in that class connection. actually I only want to give a differen border to the li when .custom-product-listing-class is added. But with out li and the whole other classes it does not work. What would be the best way to do that?

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 {
  background: linear-gradient(white,white), repeating-linear-gradient(60deg, #333 0%, #333 5%, #febf28 5%, #febf28 10%);
  background-attachment: padding-box, border-box;
  padding: 5px;
  background-origin: content-box, padding-box;
  background-clip: content-box, padding-box;
}

[David]

To target the LI with that specific class then i would use this selector:

.woocommerce ul.products li.product.custom-product-listing-class

[nik9]

I was very close to that! 🙂 Thanks!

[David]

You’re welcome

[Author]

Posts