Put price top in product archive

Hello support team,

In product archives, I would like to put the price just below the name of the product, like in the screenshot below. Is this possible?
For the product style in archives settings, I have chosen the second option (display all information on image).

Thank you

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the URL of the page to check it myself and help you out accordingly.

Best Regards

Hello Aizaz,

It concerns the pages with products grids, like the following:
– Shop page: https://jubilefrance.com/collection-printemps-ete/
– This Ajax product grid: https://jubilefrance.com/les-fondamentales/
– Cross-sell products in the bottom of product pages, like this one: https://jubilefrance.com/produit/boucles-cylindre-lineaire/

I was able to change the typography of the price from advanced typography > Product grid price, so they must be a specific class that regroup price appearance for all these page at once.

You’ll find admin access below if helpful.

Thank you

Hello,

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.wd-hover-info .bottom-information .price {
margin-bottom: 150px;
}

Best Regards

Hello Aizaz,

Thank you it works well.
For potential other readers : I put the margin in % so that the position of the price is right on every page, and customize it for computer (102%), tablet (85%) and mobile (75%).
Finally, in archive settings, careful to set titles to be displayed on 1 line only, otherwise they might overlap with the price.

1/ Aizaz, I noticed an issue that appears with this line of code, for mobile only. When I touch the product image while scrolling, the price disappears (see screenshot below). I tried to add these line to the css you sent but it doesn’t make any change :

display: inline-block !important;
    visibility: visible !important;

Could you please help me with this issue?

2/ Finally, I realize that on mobile, when we hover the product image, nothing happens. On the computer, when we hover, there is a second image that appears and zooms in. Would it be possible to have something like this for mobile as well, i.e. to be able to see the second image when swiping the first one for example?

Thank you

Attachments:

You must be logged in to view attached files.

Hello,

You are Most Welcome.

1. I am unable to see this issue on your website. Please clear the cache and check back.

2. Sorry but it is not possible to add the hover image effect on mobile.

Best Regards

2/ No problem, it would just have been a cool feature but it’s okay.

1/ For this one, I cleared all caches and it still happens. This concerns only mobile display.
It was working fine until I added a custom css provided by your support in order to put the price color to transparent on a product grid I have in my menu for computer.

.wd-dropdown-menu .wd-products-element .product-grid-item .price > .amount {
    color: transparent;
}

However I don’t understand why it would impact other product grids, especially on mobile. Any idea on this?
Otherwise I’ll remove the custom css.

Thank you

Hello,

1. Please try and move the CSS to Custom CSS for Desktop area then check back.

Best Regards

Hi Aizaz,

I tried your solution and I also tried to remove the custom css and, after clearing all caches, result is still the same: price disappears or blinks when the product image is touched.
I also asked other people to try and they have that as well.

Would you have another idea on how to solve this please?
Thank you

Hello,

Please provide a video explanation of the issue because I am not able to see the issue on your website.

Best Regards

Hello Aizaz,

You’ll find below a video showing the prices disappearing when touched on mobile.

Thank you

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.wd-hover-info .bottom-information .price {
display: block !important;
color: white !important;
}

Best Regards

Hello Aizaz,

I just tried it. Unfortunately I didn’t work.

I tried your code adding :hover at the end of the last selector as well as at the end of all selectors but it didn’t work either.

Hello,

Please try removing this CSS from the Custom CSS for Mobile area then check back.

Screenshot: https://gyazo.com/80370ffb9e6d40cfc656c39c1bbea8bc

Best Regards

Hello Aizaz,

Yes it works without this line of code.
However the price is back at the bottom of the product images now.
Should we write this code differently?

Thank you

Hello,

You are Most Welcome.

Please try adding the following Custom CSS for that in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.product-grid-item.wd-hover-info .bottom-information {
    bottom: auto;
    top: 35px;
}

Best Regards

This one works great, thank you!

Hello,

You are Most Welcome.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts