It is possible that the CSS selectors with the .page-id-8178 class are being overridden by another CSS rule with a higher specificity. In CSS, the specificity of a rule determines which rule will take precedence when there are conflicting rules for the same element. Rules with higher specificity have a greater weight and will override rules with lower specificity.
One way to increase the specificity of your CSS selectors is to use the !important rule, as you have done in your code. However, this is not always the best solution, as it can make your CSS code more difficult to maintain and can cause other issues.
A better solution might be to use more specific CSS selectors that are less likely to be overridden by other rules. For example, you could try using a more specific selector such as .page-id-8178 .entry-title or .page-id-8178 h1.page-title, which targets the title specifically on the homepage with the ID 8178.
Alternatively, you could try using the :not() pseudo-class to exclude the homepage from the rule that is currently overriding your styles. For example:
:not(.page-id-8178) .woocommerce-products-header__title {
display: none;
}
:not(.page-id-8178) .page-title {
display: none;
}
This will apply the display: none rule to all elements with the woocommerce-products-header__title and page-title classes, except on the homepage with the ID 8178.
I hope this helps! Let me know if you have any further questions or need additional assistance.