Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1015388

    Hi there,

    I’ve added a function to add the product category ID to the body classes, so I can change CSS (namely, the background) for every page/product in a specific category. However it looks like the background-image property is actually in the HTML root classes, not the body class anymore. WordPress doesn’t have the equivalent of a body_class filter for the HTML root classes, so how can I adjust the background image by category in this way? Is there a way to move body classes to HTML, or change the background-image if the body has a specific class? Or moving the background-image property back to body?

    The class function I’m using is:

    
    add_filter( 'body_class','my_body_classes2' );
    function my_body_classes2( $classes ) {
    
    if ( is_product() ) {
    
        global $post;
        $terms = get_the_terms( $post->ID, 'product_cat' );
    
        foreach ($terms as $term) {
            $product_cat_id = $term->term_id;
            $classes[] = 'term-' . $product_cat_id;    
        }
    }
    return $classes;
    }
    
    #1015471

    Hey chartinboy,

    Please provide a link to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    #1015516

    Link in the private notes section.

    That’s one example of a product, and I’m trying to style all products under the same category simultaneously, by creating a common class; but the c;ass currently doesn’t reach high enough (The HTML root) for me to add a background.

    #1015520

    Hi,

    So you want to change the background of the product images themselves? So for example the background of the chairs?

    Best regards,
    Jordan Shannon

    #1015525

    Yes, however not individually. I know how to do this using product codes individually; I’m trying to create a system where I can create style rules for entire categories of products at a time (there’s a couple thousand products and that number is constantly growing, styling them individually isn’t an option.)

    I’ve got most of the way there, I just need a way of getting the category class into the HTML root classes of the products, or by moving the background-image load into the body CSS.

    #1015535

    Hi,

    It should be possible to add the class via JS and the .addClass declaration. Please provide admin info in the private area if possible so we can look into this further.

    Best regards,
    Jordan Shannon

    #1015640

    Thanks for the reply, user details in private section

    #1015650

    Hi,

    Is there a way to move body classes to HTML,

    Yes you can use the global $avia_config[‘box_class’] variable to add custom css classes to the html tag. Please add this code to the child theme functions.php:

    
    add_action( 'wp', 'avia_add_custom_html_class' );
    function avia_add_custom_html_class()
    {
    	global $avia_config;
    
        if ( is_product() ) {
    
            global $post;
            $terms = get_the_terms( $post->ID, 'product_cat' );
    
            foreach ($terms as $term) {
                $product_cat_id = $term->term_id;
                $avia_config['box_class'] .= ' term-' . $product_cat_id;    
            }
        }
    }
    
    

    Best regards,
    Peter

    #1015672

    You’re a superhero. Can’t believe the support we get with this great theme.

    Is there a way to do the same for the category pages themselves? Example in the private section.

    #1015702

    Hi,

    Please try this code:

    
    add_action( 'wp', 'avia_add_custom_html_class' );
    function avia_add_custom_html_class()
    {
    	global $avia_config;
    
        if ( is_product() ) {
    
            global $post;
            $terms = get_the_terms( $post->ID, 'product_cat' );
    
            foreach ($terms as $term) {
                $product_cat_id = $term->term_id;
                $avia_config['box_class'] .= ' term-' . $product_cat_id;    
            }
        }
    
        if(is_archive()) {
            $queried_object = get_queried_object();
            if(!empty($queried_object->term_id)) $avia_config['box_class'] .= ' term-' . $queried_object->term_id; 
        }
    }
    
    

    Best regards,
    Peter

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.