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
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
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