I am working on this page. https://autentica.no/ the hover state of the product name and the product price is still the default integrity red even though I changed the color of site links in global settings, anywhere I’ve seen the red in the globals settings in fact I have changed it, I have tried adding custum CSS that I have now removed and installing a cache plugin, I can’t see what is causing this here I need some help.
Hello @ariellevate,
Thanks for writing to us.
To change the color of the product title, the hover color of the product title, and the product price, go to the Products element, then open Customize and select Element CSS .
/* Product title & hover */
$el.x-wc-products .products header.entry-header a{color:#FFC107;}
$el.x-wc-products .products header.entry-header a:hover{color:#FF9800;}
/* Product Price */
$el.x-wc-products .products header.entry-header span.woocommerce-Price-amount.amount{color:#FFC107;}
Please feel free to change the color code. The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.If you have no idea about coding, you can subscribe to One, where customization questions are answered.
Hope it helps.
Thanks
Thank you for the response, I do know some code however I don’t want to get into writing code myself, a big reason I like Pro is the easy drag and drop options and the ease of adjustments without the code, I would argue that such a basic thing as changing the color of site links in the integrity stack should apply to all the link or that in your default Integrity stack have the ability to remove or change all the places that that intense red appears, especially on prices. Now when I paste your code the add to cart button becomes the same color as the add to cart button so you cant see the text. See screenshot. And I wanted this to apply not only on this page but also to the show room page (shop page).
Second question: I tried changing the stack to see if this solves the problem, it does, and I kinda like how it looks in Ethos, however, when I add this product section into Ethos the images crop on the home page and there’s a white gap line at the bottom at the product under the price text. This does not appear on the shop page there they look fine, although an additional problem with this is that I have changed the background color to black in ethos and it remains white still.
Hey Ariell,
1.) You are using the Products Prefab element. This prefab element has a default styling for each respective stack to match the stack design.
2.) The product featured image is cropped because this is the default styling as it is a prefab element.
It is highly recommended to create your own product block if you want to modify the colors or change any of the element settings so that you will have full control over the elements. Check out the demo I have created for you as an example.
PS: This Row is only visible if you are logged in.
Best Regards.