"New" and "On Sale" badges « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Abundance

"New" and "On Sale" badges

20 posts from 6 voices

Started 2 months ago by Bill Karkavos
Latest reply from amaule07
This topic is closed
This topic is resolved

Tags:

Bill Karkavos
Member

Hey Kriesi team,

I'm on Abundance theme, is there a way to have these kind of badges on the image thumbs on taxonomy pages (product categories and product tags) just like shown on Replete theme?

Thank you a lot in advance,

Bill

Posted 2 months ago #
Devin
Moderator
Hi Bill,

Not exactly no but try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```
#top .onsale {
display: block;
background: rgba(0,0,0,0.8);
z-index: 10;
}
```
Regards,

Devin
Posted 2 months ago #
Bill Karkavos
Member

Hey Devin,

thank you very much that worked like a charm!

so I reckon there is not an easy way to do the same with "New" Badges applied to specific products?

Thanks again

Best,

Bill

Posted 2 months ago #
Devin
Moderator

Hi Bill,

I don't see any code for it but if you can link me to a page showing a new product and point it out I'll double check if anything gets generated :)

Regards,

Devin

Posted 2 months ago #
Bill Karkavos
Member

Hi Devin,

I don't think I have made myself clear; I am looking for the ability to have, on the image thumbs on product categories, a badge just like the SALE one. This time I wonder if it would be possible to assign different texts like NEW on some thumbs, or PRE ORDER for others.

Thank you!

Posted 2 months ago #
Devin
Moderator

Not with anything we could help with via support. I only meant if the plugin was already automatically adding the code but its currently set to invisible we could make it visible.

You would have to look into a plugin or custom coding for something like what you want to do.

Regards,

Devin

Posted 2 months ago #
amaule07
Member

Just randomly came across this thread, I've been looking for something like this. Is there anyway I can make the sale price more evident, i.e. the price that gets crossed out when it's on sale? I want to make it bigger or more obvious - is there anyway to do this? Is there anyway to change the text of the "SALE" image that comes up with the CSS above? Thank you!

Posted 2 months ago #
Devin
Moderator
Hi amaule97,

Add this to your quick css or custom.css file:
```
#top span.onsale {
background: green;
color: #fff;
min-height: 32px;
min-width: 32px;
padding: 4px;
font-size: 12px;
position: absolute;
text-align: center;
line-height: 32px;
top: 6px;
left: 6px;
margin: 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
display: block;
}
```
You can then modify it however you want. The text can be changed with a plugin like: http://wordpress.org/extend/plugins/woocommerce-onsale-extender/ though I think it requires the "pro" version to change it manually.

Regards,

Devin
Posted 2 months ago #
amaule07
Member

Thank you Devin, what about on a page like this though: http://www.vyanayoga.com/shop/bamboo-camisole-open-heart/

Where you have to select the item you want from the drop down and then it shows the price that is crossed out? Is it possible to show the crossed out price by default at the top of the page (where the price is bigger)?

Posted 2 months ago #
Devin
Moderator

I actually don't know about that. I think with the way woocommerce outputs variable products, it just checks the lowest possible price and then puts that as the "base" . So it wouldn't really check to see if the variable as a whole is on sale since it isn't actually capable of it.

Regards,

Devin

Posted 2 months ago #
Femme_Fatale
Member

Hi,
Is there any way to get a badge like the 'sale' one but for out of stock items, saying 'out of stock'? With constantly fluctuating stock levels I really would like it for customers to be able to see out of stock items from the category page :)

Posted 2 months ago #
Dude
Dude

Hey!

You can try http://61extensions.com/shop/woocommerce-inventory-notices-extension/

Regards,
Peter

Posted 2 months ago #
Femme_Fatale
Member

Thanks Peter! i went and purchased that and have now activated it, but they are showing behind the product images. Is this something you can help with? Here's an example page http://femmefatalecosmetics.com.au/product-category/enchanted-polish/
You can see the red 'out of stock' box appearing just behind some of the OOS items. What can i do to put that in front of the image?

Posted 2 months ago #
Dude
Dude
Hey!

Add following code into the quick css field:
```
.sod_inv_notice {
z-index: 10;
}
```
Regards,
Peter
Posted 2 months ago #
boudoirs
Member

to femme fatal: it seems you're using woocommerce, which is already made for you to be able to display the available stock for your products.

Posted 2 months ago #
Femme_Fatale
Member

@ Boudoirs you can display remaining stock levels on the product page, is that what you mean? I haven't seen any option in the settings to show product 'out of stock' and 'low stock' badges on the product image int he catalogue page though.

Posted 2 months ago #
Dude
Dude

Hey!

Afaik the badges are not included by default.

Regards,
Peter

Posted 2 months ago #
amaule07
Member

Devin if I wanted to make the badges round circles and align left how would I do that? On second glance it appears to be round circles and aligned left on product page and is a rounded rectangle/bar on category pages. How do I make them the same? I'm referencing the code above, i.e.

#top span.onsale {
background: green;
color: #fff;
min-height: 32px;
min-width: 32px;
padding: 4px;
font-size: 12px;
position: absolute;
text-align: center;
line-height: 32px;
top: 6px;
left: 6px;
margin: 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
display: block;
}

Posted 2 days ago #

Devin
Moderator

You just need to add a width it looks like:

#top span.onsale {
background: red;
color: #fff;
min-height: 32px;
min-width: 32px;
padding: 4px;
font-size: 12px;
position: absolute;
text-align: center;
line-height: 32px;
top: 6px;
left: 6px;
margin: 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
display: block;
width: 32px;
}