custom field below the price in the product grid view

How can you add a custom field below the price in the product grid view? We would like to show the price per unit below the price, but we can’t get it to display without it being on hover.

Hi goiuri,

Thanks for reaching to us.

Please provide URL of the mentioned page, so I can take a closer look.

Regards,

Hi,
The url is: https://desarrollo.zallo.com

Thanks

Hi goiuri,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

div.wd-products[class*="wd-stretch-cont"] .wd-product {
    z-index: 9;
}

div.wd-hover-with-fade .fade-in-block{
    visibility: visible;
    opacity: 1;
    z-index: 9999;
}

Kind Regards,

Thanks for your support 🙂 How could we put that field below the price or above the button?

Hi goiuri,

Please use the below Custom CSS:

.product-grid-item .product-element-bottom .wd-entities-title {
    order: 1;
}

.product-grid-item .product-element-bottom .wrap-price {
    order: 2;
}

.product-grid-item .product-element-bottom .fade-in-block {
    order: 3;
    position: relative;
}

.product-grid-item .product-element-bottom .wd-add-btn {
    order: 4;
}

Regards,

Hello, I have tried it but it doesn’t work. All the styles move, but the price per unit is not placed above the button or below the price…. 🙁 Is there any other way to solve this problem?

Attachments:

You must be logged in to view attached files.

Hi goiuri,

To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

Kind Regards,

Hello, thank you very much for the support you are giving us.
We would need to know in which file of the child theme we could modify the order of those fields to be able to add it right where we want.
We cannot modify the parent theme because we have enough modifications already made.

Thanks,

Hi goiuri,

Thanks for details.

I’ve fixed your issue. Please check your site again. https://ibb.co/JFv31ZFr

Regards,

Hello, thanks for helping us put the field where we wanted. Now the problem we have is that when a user enters for the first time the styles are not loaded as they should. The fields appear unsquared. Once it is refreshed it is corrected but users who have never entered find the page completely moved. It’s not the cache, it’s disabled and we have entered from the hidden browser. How can we solve it?
Thanks,

Hi goiuri,

Could you please record a short video and describe how we can reproduce the issue on your website so we can check this for you?

Best Regards,

I attach the video where you can see the problem.
The pages that I have already reloaded once inside, the reordered field is displayed correctly, although when I visit the page again at another time it looks wrong again. The CSS does not load correctly.
I’m waiting for a solution,
Thanks

We believe we have corrected it by changing from internal CSS to external CSS in the Elementor settings. We will comment on it. Thank you so much.

Hi goiuri,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

If you have a quick minute we always appreciate a 5-star rating on our theme!

https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/reviews/20264492

Your feedback is the motivation to improve our work and services.

Regards,

Hello again, we’re still having a loading issue with the text that appears below the products. It’s true that you changed the position of these fields using CSS, but it shouldn’t interfere with loading.

The problem is that when we access the website, the elements appear in their actual position, not where we want them to be. When we refresh the website, the elements are correctly positioned but when we access it again, they appear out of place. Could you please provide a solution?
Thanks

Attachments:

You must be logged in to view attached files.

Hi goiuri,

Purge all cache from your caching plugin and check again. If you’re using a CDN, disable it temporarily and see if the issue persists.

Regards,

[Author]

Posts