Tagged: , , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 27, 2018 at 4:59 pm #1015388
    chartinboy

    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;
}
    September 27, 2018 at 7:18 pm #1015471
    Jordan Shannon

    Hey chartinboy,

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

    Best regards,
    Jordan Shannon

    September 27, 2018 at 8:59 pm #1015516
    chartinboy

    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.

    September 27, 2018 at 9:26 pm #1015520
    Jordan Shannon

    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

    September 27, 2018 at 9:44 pm #1015525
    chartinboy

    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.

    September 27, 2018 at 10:52 pm #1015535
    Jordan Shannon

    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

    September 28, 2018 at 9:04 am #1015640
    chartinboy

    Thanks for the reply, user details in private section

    September 28, 2018 at 9:25 am #1015650
    Dude

    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

    September 28, 2018 at 10:11 am #1015672
    chartinboy

    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.

    September 28, 2018 at 11:20 am #1015702
    Dude

    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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.