Display Products Discount Percentage

garocchi

Hi again,
I wanted to set the products with two differents additional info:
- a bubble with a percentage off on top right of the picture (on the place of the SALE! label you have as default)
- a label with "Free Shipping" beow the pic.
I bought the woothemes plug-in "woocommerce advanced label" but it seems that it's not worokking as I think your theme code come first and it doesn't allow that plug-in working...
Is there a way to let this plug-in working or at least display in some way the percentage of discount?
I hope I've been clear with my english... :-)

Air

1. Try removing or renaming file fame\woocommerce\content-product.php - this should remove our changes to this part of WC templates. Please tell if that enabled this plugin features.
2. I will need access to this plugin so I could check which filter it uses to display this labels. If you can please send it to info@apollo13.eu

With kind regards.

Air

I need ZIP file with this plugin, not access to your site:-)

garocchi

Hi, did you received the plug-in? :-)

Air

I have checked and merging both behaviours, it is:
1. customizations in theme
2. changes by this plugin

Are not easy, as it looks like it would require modificating plugin, or advanced overwriting its actions/filters.
As I said before

Air said: Try removing or renaming file fame\woocommerce\content-product.php - this should remove our changes to this part of WC templates. Please tell if that enabled this plugin features.

It will remove some of our styling, but it will make this plugin work.

Other way is to go to fame\woocommerce\content-product.php line ~47 and under do_action( 'woocommerce_before_shop_loop_item' ); add this
do_action( 'woocommerce_before_shop_loop_item_title' );

This will produce double image, but then we can try to make something with CSS.

Try it first.

With kind regards.

Air

Custom CSS

.wapl-flash{
    z-index: 5; /* take label above image */
}
.woocommerce-page ul.products li.product > img{
    display: none; /* hide image from plugin*/
}

Tested, works for me :

garocchi

Hi Air,
sorry for not answering yesterday but internet was not working.
I did as you told me and it seems working.
I need a pleasure if you know how to do it.
I need to put the labl "Free Shipping" I have in the image not above the picture box but just under between the picture and the product title. This should be the normal position but with these changes it has gone there.
I've been tried to use the css (where I'm not really a genius!!)
.wapl-label {
position: relative;
top: -200px;
}
but if the label in the bigger pics go in the right position on the little picture on the right disappear.
So do you have any idea of how to put it just under the picture?
Thanks
Gabriele

Air

Can you explain me how to add both labels to one product? Meanwhile I will search for solution for bottom one.

With kind regards.

garocchi

Hi...
from the plug-in I gave you yesterday (if installed) you should go to woocommerce--settings and press on Global Labels and then you can create the labels.

Air

Oooo, couldn't find that :-)

OK, so instead of hiding plugin "product image" lets hide theme's one.

Instead of previous CSS try this

.woocommerce ul.products li.product a.thumb {
    display: none;
}

With kind regards.

garocchi

Hi Air,
i will check it later as I'm outside... This css will keep the circle up and the free shipping label down?

Air

Yes :-)

garocchi

It works... But i'm seeing it on ipad and the free shippimg label goes behind the star of the product... I don't know on a nirmal screen how it looks like...

garocchi

Always in ipad.. Do you see the little products on the right? Text go over the one beside.. Is it possible to set this point?

Air

garocchi said: Do you see the little products on the right?

You shouldn't use 3 products in such small space this looks and feels bad.

Try adding such custom CSS:

.touch li.product .thumb-space .wl_button, .touch li.product .thumb-space .add_to_cart_button, .touch li.product .thumb-space .added_to_cart, li.product:hover .thumb-space .wl_button, li.product:hover .thumb-space .add_to_cart_button, li.product:hover .thumb-space .added_to_cart {
    bottom: 30px;
}

It will push star and cart higher.

With kind regards.

garocchi

Hi Air,
label's perfect...
For the space on the top rated rpducts I set 3 colums and 2 products, but even with two products the writings go on the others... I mean on IPad...

garocchi

I sent you a coffe with donuts... ahahhaha you're helping me a lot...

Air

Thanks for coffee man ;-)

There is just not enough space there so you could display 3 normal products, and set of small products in same row. You have to break it in two rows to have good effect. They just can't behave correctly in this kind of layout.
That what I was trying to say previously :-)

With kind regards.

garocchi

HI... yes I understood that but visual composer only allow me to set min. 3 colums for that space... and even if I change the custom setting colum with 2/4 for the big space and 1/4 + 1/4 for the top rated products I will risk to have the same two top rate products.
Am I right? Or is there a way to set 2 colums for the top rated space?

Air

I am not expert in "fun with VC", but still I want to say you shouldn't have all this in one row, but break it into two rows.
I will send Daniel here.

Here is screen shot of my solution:


With kind regards.

garocchi

Mmmm.... i will prefer the way it is now on big screen ... If I cannot find a solution I will keep it in the way it is with writer on the other... :-) :-)

Air

garocchi said: i will prefer the way it is now on big screen

I understand:-) This is just not responsive way to do it.

I think you could make some rules in VC that will tell it when row should be broken on lower resolution. However I have never used it and I don't know if this even work as I described :-)

With kind regards.

garocchi

I don't know either... it's the first time I use this plug-in as I saw it in your theme... :-)
I don't know anything of css or programming so I have to find secondary solutions.. aaahaha

Air

I have just noticed that Daniel already explained you how to set this area in your other topic http://support.apollo13.eu/discussion/comment/12952/#Comment_12952

To have it like on our demo page you have to follow his instructions and put there sidebar. Have you done that already?

With kind regards.

garocchi

this can be a solution... I did what Daniel told me in another part of the site... but I can use this method for this problem too... thanks a lot..

garocchi

Hi Air,
I found out this new problem .. (actually it casued on this same title's item)... when I pass on a picture with cursor I cannot select it...
I saw that the problem should be caused by this css you gave me

.woocommerce ul.products li.product a.thumb {
display: none;
}

Before this css I have two same pictures of the same product (as you told me once), one not checkable and the other working fine.
By inserting this css the image become just one, but I cannot press on it... any idea how to solve this?
I will put the site online again ..
thanks

Air

Yeah, you are right, in that plugin image is not linked. Annoying situation.
Here is complete solution, remove ALL things we did previously.

Next do as follows:

Custom CSS:

.wapl-flash{
    z-index: 5; /* take label above image */
}
.woocommerce-page ul.products li.product > img{
    display: none; /* hide image from plugin*/
}

Go to fame\woocommerce\content-product.php line ~106 and before echo '<div class="product-meta">'; add this
do_action( 'woocommerce_before_shop_loop_item_title' );

Effect(link working, all theme things works):


This should end this case:-)

With kind regards.

garocchi

This is perfect... thanks for your help...
let me thank you with another donut.. :-)

Air

Too much sweetness ;-) Thanks a lot!

Have a great day.

garocchi

Hi my friend,
how are you today? I got a new issue for you under this post.
Remember you solved me the label displaying? It works fine, but it works only with discounted prices set on product page.
I'm explaining better....
I'm using a plugin that allows to set discounted prices directly to a category - dynamic pricing (from woothemes).
When I set for istance a discount of 10% on one specific category only the price at the button change, the label "sale" and the discount bubble don't show.
Any idea of how to set this?
thanks a lot

Air

Hello there:-)

Thanks, lately I am working hard to move our team forward, and it is lot of new things to learn for me, and many are not obvious. You asked ;-)

Main question:
I don't think that plugin that you mention work in same matter as default sale mechanics. It must affect prices directly, not via sale. Label of "sale" only show when $product->is_on_sale() returns true and this is default woocommerce mechanics for that.
Maybe you have to mark some bonus option in that plugin so WC would know it is on sale.

Seek answer for that with this plugin author, as he/she will know more :-)

With kind regards.

garocchi

Hi... you were right... but that plug-in is not working at all... :-)
I will told them..
thanks :-)