in shop page there is section
showing all result and
default sorting i want wrap this two section with div, and want apply condition, let say:
if
category-1 then
background-color: green
if
category-2 then
background-color: red
if
category-3 then
background-color: blue
but i could find the template/hook from where it is been derived. can anyone suggested me the location from where this sections (‘showing all result, default sorting’) show that i could apply condition for background according category
Hello, as far as i am concerned I would use Jquery to set a different color for each category : slight_smile:
To add a Jquery code to wordpress, please add the following code to the functions.php file of your template:
function my_theme_scripts() {
wp_enqueue_script( ‘my-great-script’, get_template_directory_uri() . ‘/js/my-great-script.js’, array( ‘jquery’ ), ‘1.0.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_scripts’ );
To set a different color for each category. Try this
Here is the code for my-great-script.js :
jQuery(document).ready(function($) {
// Check each div for a specific category class
$(‘div’).each(function() {
if ($(this).hasClass(‘category-1’)) {
$(this).css(‘background-color’, ‘green’);
} else if ($(this).hasClass(‘category-2’)) {
$(this).css(‘background-color’, ‘red’);
} else if ($(this).hasClass(‘category-3’)) {
$(this).css(‘background-color’, ‘blue’);
}
});
});
You can adapt this piece of code according to your needs
Hope it helps.
Best regards
1 Like
im have found the way, create your customize woocommerce theme or archive page, get the categories name/ slug and and apply conditional css according to category slug
