Add a picture on tag page

[orlane_azogui]

Hello,

For each of my product, i add a tag. On my website, when people click on the tag, they are redirect to a page with all the products with the same tag. This is really good but I can see that on those pages there is some space for a picture. For now it is just a big grey rectangle. However, I can’t add a picture when I create my tags.

Do you know where I can upload it ?

Thank you,

Best regards,

Laurie

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Sorry for tag page it doesn’t support upload background image for page title.

You can add custom code

.tax-product_tag .jas-wc .page-head {
	background-image: url(http://janstudio.net/claue/demo/wp-content/uploads/2016/10/shop-category.jpg);
	background-size: cover;
	background-repeat: repeat-y;
	background-position: center center;
	background-attachment: scroll;
}

and change http://janstudio.net/claue/demo/wp-content/uploads/2016/10/shop-category.jpg with your image url

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[orlane_azogui]

Hello,

And is that posible to specify for which tag it applies on the custom CSS ? It would be awesome if I could decide one picture for one tag. For example I have one tag named “Jordane Somville” and another one named “Ombre Claire” and I would like to add custom CSS for each of those tags.

Is that possible ?

Thanks a lot,

Best regards,

Laurie

[Harry]

Yes,
You can add specific background for specific tag by add tag class name to css

Example: for this screen shot http://take.ms/77Xun

.term-121.tax-product_tag .jas-wc .page-head {
background-image: url(http://janstudio.net/claue/demo/wp-content/uploads/2016/10/shop-category.jpg);
background-size: cover;
background-repeat: repeat-y;
background-position: center center;
background-attachment: scroll;
}

You can follow this video to check tag class http://take.ms/z7C9F

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[orlane_azogui]

Hello,

Thanks a lot this is really clear !

Best regards,

Laurie

[mikestar]

Hi Harry,

For multiple tags, how do we add background images for each tag individually?

[Harry]

Hi Mike,

It doesn’t support in theme option. Please add code to Claue > Theme Option > General Layout > Custom CSS

.term-women .jas-wc .page-head, .jas-wc-single .page-head {
	background-image: url(http://janstudio.net/claue/demo/wp-content/uploads/2016/10/shop-category.jpg);
	background-size: cover;
	background-repeat: repeat-y;
	background-position: center center;
	background-attachment: scroll;
}

change term-women as your tag name term-tagname

and change path http://janstudio.net/claue/demo/wp-content/uploads/2016/10/shop-category.jpg to your image page

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[mikestar]

Harry, suppose I want to add different images on 3 tag pages, so do I need to add 3 times the code like following?

.term-121.tax-product_tag .jas-wc .page-head {
background-image: url(http://janstudio.net/tag1image.jpg);
background-size: cover;
background-repeat: repeat-y;
background-position: center center;
background-attachment: scroll;
}

 

.term-165.tax-product_tag .jas-wc .page-head {
background-image: url(http://janstudio.net/tag2image.jpg);
background-size: cover;
background-repeat: repeat-y;
background-position: center center;
background-attachment: scroll;
}

.term-198.tax-product_tag .jas-wc .page-head {
background-image: url(http://janstudio.net/tag3image.jpg);
background-size: cover;
background-repeat: repeat-y;
background-position: center center;
background-attachment: scroll;
}

Can’t there be a combined code for the above requirement?

[mikestar]

No worries Harry. I’ve used the above codes individually without any hassle and it works fine.

[Author]

Posts