I am using shortcode for product categories. I have added a bit of css to scale the image icon on mouse-over. It appears overflow: hidden, will not work for me, so how can I crop the image to contain it within it’s space.

Css (neither of the overflow kicks in):

/*** product_categories - Grid Image Styling ***/
.woocommerce ul.products li.product a img {
	border-radius: 25px;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}

.woocommerce ul.products li.product a img:hover {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	overflow: hidden !important;
}


/**** Category Image Container in Grid ****/
  ul.awf-product-categories li.product-category,
  ul.awf-product-categories li.product-category.last,
  ul.awf-product-categories.columns-3 li.product-category,
  ul.awf-product-categories.columns-4 li.product-category,
  ul.awf-product-categories.columns-5 li.product-category,
  ul.awf-product-categories.columns-6 li.product-category {
	position: relative;
	margin: -3px 1px;
	width: 24,5%;
	overflow: hidden !important;
}

How can I fix this?

https://pastebin.com/ZRjZuS7k

The output code is not adding directory type or featured posts CSS selectors.

This is needed when trying to do custom styling on a directory and on listing in that directory. Perhaps it can be added with a function, but would be a useful addition.

Selector for directory type when viewing directory, category in that directory, single post in that directory.

Selector saying a post is featured.

Thanks.

I am looking for help changing the display color of the labels that display to the left of the product options as seen on the product page listed. It shows up as darkgrey, which makes the text very difficult to read.

I’m rather new to CSS styling, so anyhelp there will be awesome. Thanks!

https://thisisurbanmade.com/product/medium-canine-credenza/

On a slightly different matter, I added custom buttons (Listen to Audio) on shop and product pages and the one on the shop page looks fine, but the one on the product page is different and I’m not sure why …

Many thanks,

Jo

My form is not currently registering the custom colors I’ve selected.

I’ve selected #ffc805 as the color that the Submit Button should be, as well as the Border Color on Hover. The correct color is showing up in Elementor, as well as in the Forminator settings, but when I view the page, the yellow coloring doesn’t stay — it defaults back to standard blue.

I’ve cleared my cache and given it 24 hours, but it still isn’t showing up correctly.

Any help would be greatly appreciated.