Return to previous page

How to change how the categories display

This topic has 8 replies, 3 voices, and was last updated 8 years, 1 months ago ago by Eva Kemp

Tamara

Participant

March 8, 2016 at 02:22

Hi,

My website is almost complete but I need to make a few changes.

Any of the shop pages that show product categories or subcategories such as these:

https://xtendedbeauty.com.au/shop/
https://xtendedbeauty.com.au/range/hairextensions/

display a banner like thing over the top of the images which I want to have removed. If you have a look at:

https://xtendedbeauty.com.au/

you can see how I have made my own custom animated icons with boxes and buttons for the 3 categories using one of the VC features.

Is it possible to have the exact same thing for the actual categories in the shop pages? If not, how can I remove the layover thing completely so only my category image is displayed?

Any help would be AMAZING!

Thanks heaps guys xx

#116475 Copied

7 Answers
Jack Richardson

Support staff

March 8, 2016 at 12:04
Hello,

If you want you can put mask text under the image with this code:
```
.categories-mask {
    position: static !important;
}
```
To remove them use this code:
```
.categories-mask {
   display: none;
}
```
Add the code in Theme Options > Custom CSS > Global Custom CSS.

Best regards,
Jack Richardson.
#116503 Copied
Tamara

Participant

March 8, 2016 at 14:25

Thanks for that, I ended up removing the mask, but now the I’m frustrated because no matter what, these category images are giving me such a hard time!

Ive created new images for the categories and subcategories for the pages in the previous comment, and they are good resolution, png, fits perfectly in the sections, however on my desktop when they are larger they are crystal clear, then on my phone/responsive mode it is blurry.

Pleeeeeeeeeeease heeeeelllppp lol! 😀

#116515 Copied
Jack Richardson

Support staff

March 9, 2016 at 08:48
Hello,

Try to use this code in Theme Options > Custom CSS > Global Custom CSS:
```
.category-grid img {
    width: 100%;
}
```
Best regards,
Jack Richardson.
#116552 Copied
Tamara

Participant

March 9, 2016 at 12:02

Hi I tried the code you gave me but it just stretched the images and made them more blurry

#116602 Copied

Eva Kemp

Support staff

March 10, 2016 at 09:01

Hello,

Please provide us with WP admin panel credentials in Private Content.

Regards,
Eva Kemp.

#116760 Copied

Tamara

Participant

March 10, 2016 at 09:19

Sure please see private comments 🙂

Please, contact administrator
for this information.

#116765 Copied

Eva Kemp

Support staff

March 10, 2016 at 11:28

Hello,

Please set images sizes in Woocommerce > Settings > Products > Display as described in the documentation https://www.8theme.com/demo/docs/woopress/#!/woocommerce and regenerate thumbnails in Tools section.
After that check product images.

Regards,
Eva Kemp.

#116808 Copied
Viewing 8 results - 1 through 8 (of 8 total)