Archived topic

WooCommerce Sub-category Page images

7 replies · Started by Juned on January 13, 2021

Viewing posts 1–8 of 8

January 13, 2021 at 2:27 am #1616696

Hi,

I want to give some designing to image's border at Shop Page and Sub-category Page for product images.

Please help me with this.

(Presently I copy pasted some css for shop pages background from your previous answers in forum)

Thanks in advance.

January 13, 2021 at 3:20 am #1616738

Hi there,

to add a matching border to your category thumbnails you can try adding this CSS:

.woocommerce ul.products li.product-category a img {
  border-right: 2px solid rgba(0, 0, 0, 0.07);
  border-bottom: 2px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}

January 13, 2021 at 3:24 am #1616745

Thanks.

Its only for category images. And not for sub-category images?

January 13, 2021 at 3:30 am #1616753

That CSS applies to the top Level Categories ( ie. Shop ) and Sub-category images ( eg. Stationery ). What am i missing ?

January 13, 2021 at 3:37 am #1616760

Home / Shop / Pest Control Services / Cockroach Control

i.e. Home / Shop / Category / Sub-Category

The Sub-category Page Images are not having any effect with above CSS. Although its working fine for Shop & Category Pages.

January 13, 2021 at 4:00 am #1616785

Ok so to include the Product images as well - change the CSS to this:

.woocommerce ul.products li.product a img {
  border-right: 2px solid rgba(0, 0, 0, 0.07);
  border-bottom: 2px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 0 10px rgba(232, 234, 237, 0.5) !important;
}

January 13, 2021 at 4:21 am #1616808

Thanks.

January 13, 2021 at 4:26 am #1616810

You're welcome

This archived topic is closed to new replies.

Start building better websites today.