Styling Woocommerce [product_categories] shortcode

  • Resolved theblacklodge

    (@theblacklodge)


    4 years, 8 months ago

    Hi all,
    I have been playing around with the woocoomerce [product_categories] shortcode on the test page in the link.

    What I have been attempting to do is to make the displayed image size larger and remove the product category title so there is just the image linking to the product category page.

    There are no images loaded up to display at the moment as this is a live site and I didnt want to mess things up.
    But no matter what size image is uploaded the height is set to 190px, this is what I need to change but for the life of me I can’t figure out how to do that or to remove the category title.

    Any help would be much appreciated.

    Thanks for any and all assistance.

    Chris

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • hannah

    (@hannahritner)

    4 years, 8 months ago

    Hey Chris,
    you can remove the category title with this css:

    .product-category.grid_item a h5 {
    display: none;
}

    Are you wanting to only increase the height of your images? Are you wanting to keep them at three columns?

    Hannah

    Thread Starter theblacklodge

    (@theblacklodge)

    4 years, 8 months ago

    Hi Hannah,
    That worked brilliantly thank you!

    Yes, it is just the height of the images i wanted to increase and if I could keep it at three columns that would be great.

    Chris

    hannah

    (@hannahritner)

    4 years, 8 months ago

    Try adding this css:

    .kt-cat-intrinsic img {
    height: 240px;
}

    Does that work for you?

    Hannah

    Thread Starter theblacklodge

    (@theblacklodge)

    4 years, 8 months ago

    Hi Hannah,
    That was one of the things I tried, that just seems to stretch the image, it doesn’t allow a larger image to be used, whish is what I need.
    If you increase the value to 600px (just to exaggerate the effect) you can see how it is just stretching the placeholder image.

    Chris

    Thread Starter theblacklodge

    (@theblacklodge)

    4 years, 8 months ago

    I have have addded an actually image to one of the categories.
    The image is 490×544 px
    Interestingly when the element is inspected it is displaying the 380×190 version of the image rather than the full height image.

    Not sure if any of that helps?

    Chris

    hannah

    (@hannahritner)

    4 years, 8 months ago

    From Appearance > Customize set “Thumbnail cropping” to “Uncropped”.
    Let me know how that works!

    Hannah

    Thread Starter theblacklodge

    (@theblacklodge)

    4 years, 8 months ago

    Hi Hannah,
    That didn’t solve it but I found a setting under Appearance / Theme Options / Shop Settings, then part way down is a box Shop Category Image Size and Category Image Aspect Ratio. This sets how you want your category images to be cropped, ive set this to 1:1 so its a square.

    Many many thanks for your help, it is really appreciated.

    Chris

    hannah

    (@hannahritner)

    4 years, 8 months ago

    Glad to hear it, Chris!

    Hannah

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Styling Woocommerce [product_categories] shortcode’ is closed to new replies.