Woocommerce Storefront Galleria添加类别名称，以便它永久显示在类别缩略图上方

Question

我目前使用wootheme画廊，将产品类别名称悬停在类别图片上时会显示在桌面上，而在电话上它们会显示在类别图片下。

当您将鼠标悬停在类别上时，这是当前他们如何显示类别名称

我看过另一个叫做Proshop的wootheme，它显示了产品类别名称，而不是产品类别。

这里是一个示例

我实际上并不整体上喜欢proshop，但是我喜欢类别名称清晰易读且无需悬停的方式。

我花了一些时间尝试查找与此显示方式相关的代码，但是我添加到自定义css中的所有内容（取自proshop中的css文件）均无法正常工作，很可能是因为我添加了错误的或没有足够的代码部分，因为有些功能还需要调整，我无法解决。这就是我正在尝试的CSS：

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;}

因此，总而言之，我希望能够显示Proshop中显示的类别名称，但是在使用Galleria主题时，如果有任何机构可以帮助您，我将不胜感激。

以下是当前网站上正在使用的Galleria主题： https://www.hippyclothinguk.co.uk

任何与此有关的帮助都将非常有用，我希望我已提供了您需要的所有信息，但是如果有其他需要解决的问题，请告诉我，谢谢您的帮助。 y