Woocommerce Storefront Galleria adding category name so it permanently shows over the category thumbnail

Question

I currently use the wootheme galleria, the product category names show on the desktop when you hover over the category image and on the phone they show under the category image.

here is how galleria currently shows the category names when you hover over them

I have looked at another wootheme called Proshop, this shows the product category name over the product category.

here an example

I don't really like proshop as a whole however I love the the way the category names are clear and easy to read and no hovering is needed.

I have spent some time trying to find the code that relates to how this is shown but everything I add to my custom css (taken from the css file in proshop) fails to work, most likely because I am adding the wrong or not enough parts of the code and because there are some functions that also need adjusting of which I cannot work out. So this is the css I was trying:

ul.products li.product.product-category .woocommerce-loop-category__title, ul.products li.product.product-category h2, ul.products li.product.product-category h3 {
font-size: 1.1em;} 

ul.products li.product.product-category h3, ul.products li.product.product-category h3 mark, ul.products li.product.product-category h2, ul.products li.product.product-category h2 mark, ul.products li.product.product-category .woocommerce-loop-product__title, ul.products li.product.product-category .woocommerce-loop-product__title mark {
color: #ffffff;}

ul.products li.product.product-category h3, ul.products li.product.product-category h2, ul.products li.product.product-category .woocommerce-loop-product__title {
background-color: #d84b2f;}

ul.products li.product.product-category h3, ul.products li.product.product-category h2, ul.products li.product.product-category .woocommerce-loop-product__title {
position: absolute;
bottom: .618em;
left: -.618em;
background-color: #d84b2f;
text-transform: uppercase;
padding: .618em 1em;
color: #fff;
z-index: 99;}

ul.products li.product h3, ul.products li.product h2, ul.products li.product .woocommerce-loop-product__title {
margin-bottom: 1em;}

So to sum up I would like to be able to show the category names as shown in Proshop but while using the galleria theme, if any body is able to help with this I'll be forever grateful.

Here is the Galleria theme in use on our current site: https://www.hippyclothinguk.co.uk

Any help with this would be grand, I hope I've provided all the information you need but please let me know if there is anything else needed to help resolve this, thanks for your help. Sy