Tagged: woocommerce category
-
AuthorPosts
-
July 4, 2020 at 7:27 pm #1227950
Hi.
Is it possible that the wocommerce category thumbnails are the same as the product thumbnails when you configure the “minimum overlay with thumbnail centered text”?An image with dark overlay and centered caption text?
Thank you very much!July 7, 2020 at 11:49 am #1228542Hey mtmundarain,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaJuly 8, 2020 at 4:44 pm #1228905I need the category images to look the same as the products
CATEGORIES: https://breadandcheese.cl/wp-content/uploads/2020/07/1.jpg
PRODUCTS: https://breadandcheese.cl/wp-content/uploads/2020/07/2.jpgThanks!
July 9, 2020 at 5:31 am #1229053Hi mtmundarain,
Can you give the link to the page shown in the first screenshot?
I found a category page and it uses the same setup.
Link in private content.Best regards,
NikkoJuly 9, 2020 at 1:57 pm #1229168Nikko
Thanks.There are 3 ways in which woocommerce allows you to present the category pages, this is configured through the wp menu: appearance> customize> woocommerce> product catalog>
1.- Show products
2.- Show categories
3.- Show categories and productsIt is currently set to 1 (second screenshot)
But I would like to set it to 2 (first screenshot)I need to show the images with setting 2 and the look of the first screenshot: With a black overlay and the category name on the image
Thank you!
July 14, 2020 at 5:59 am #1230152Hi mtmundarain,
I apologize for the delayed response.
Can you try adding this CSS code in Quick CSS, located in Enfold > General Styling:#top .products .product-category .woocommerce-loop-category__title { color: white; text-align: center; margin-top: -11px; position: absolute; top: 50%; left: 0; z-index: 310; width: 100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #top .products .product-category a:hover .woocommerce-loop-category__title { opacity: 0; visibility: hidden; } #top .products .product-category .image-overlay { background-color: black; opacity: 0.35 !important; } #top .products .product-category a:hover .image-overlay { opacity: 0 !important; } #top .products .product-category .image-overlay-inside { display: none; }
Best regards,
Nikko -
AuthorPosts
- You must be logged in to reply to this topic.