CODEWITHSUNDEEP
phpcsswordpress
user5057930
user5057930

Reputation:

Add Css class to a specific div in PHP Wordpress

Below php code removes the sidebar From the page when that is on 2nd depth but on same when this function removes the sidebar on same page i want to change the class of the below div to "Fullwidth" as my page has side bar the same css is applicable on page where sidebar is not present and the page is of half width.

    function so_32165017_conditionally_remove_sidebar(){
        if( is_product_category()){
            $t_id = get_queried_object()->term_id;
            if( so_32165017_get_product_cat_depth( $t_id ) < 2 ){
                remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
                // could be theme specific ex: Storefront
                remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );




            }
        }
    }
add_action( 'woocommerce_before_main_content', 'so_32165017_conditionally_remove_sidebar' );

HTML:

From:

<div id="primary" class="content-area">

To: 

<div id="primary" class="fullwidth">

Upvotes: 0

Views: 5822

Answers (3)

ansuman chauhan
ansuman chauhan

Reputation: 437

You can use js/jquery for this, which is applied after the page loads.

$("#primary").removeClass("content-area");

$("#primary").addClass("fullwidth");

Upvotes: 1

stackers
stackers

Reputation: 385

you need to do this.

 $('#testID2').addClass('fullwidth').removeClass('content-area');

Upvotes: 0

ansuman chauhan
ansuman chauhan

Reputation: 437

For your case just replace your code with this one...

function so_32165017_conditionally_remove_sidebar(){
        if( is_product_category()){
            $t_id = get_queried_object()->term_id;
            if( so_32165017_get_product_cat_depth( $t_id ) < 2 ){
                remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
                // could be theme specific ex: Storefront
                remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );


                echo '<script type="text/javascript">
                    $(document).ready(function() {
                        $("#primary").removeClass("content-area"); 
                        $("#primary").addClass("fullwidth"); 
                    });
               </script>';

            }
        }
    }

Upvotes: 0

Related Questions