[Resolved] special background in shop archive for specific products

Home Forums Support [Resolved] special background in shop archive for specific products

Home Forums Support special background in shop archive for specific products

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1635905
    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 
    
        }
    });
    #1635950
    David
    Staff
    Customer Support

    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 );
    #1636755
    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 );
    #1636814
    David
    Staff
    Customer Support

    Why not just string your CSS selectors eg.

    .your-custom-class-added-by-function .woo-content-wrap {
        /* Styles */
    }
    #1636893
    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;
    }
    #1637147
    David
    Staff
    Customer Support

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

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

    #1637192
    nik9

    I was very close to that! ๐Ÿ™‚ Thanks!

    #1637244
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.