CSS customition

Hi

1-I want to put the “SOLD OUT” at the bottom of the product card in the catalog like image out-of-stock.jpg
2- Want to change the count-down and discount like this image: Screenshot-2024-01-02-141852.png

Don’t Share anything of my site anywhere,
give me the css code, and I will replace it, if it doesn’t work, I will share the image and access with you

Hello,

Could you please send me a URL link to the live site so I can check which product style you have?

Thank you for your time.

Kind Regards

Hello Luke,

Cheek private

25 hours!
Are you going to answer?

Hello,

I apologize for the delay.

For now, it’s possible to change the position of all labels and set it at the bottom of the image, you can use the below code and check how it looks:

.product-grid-item .product-labels {
    top: auto;
    bottom: 0;
}

2. The below code will help to change the position of the countdown timer:

.product-grid-item .wd-product-countdown {
    order: 1;
}

.product-grid-item .product-element-top  {
    order: 2;
}

https://prnt.sc/FS7fN24LrHSw

Kind Regards

Excellent!

This is what happened when I used your code…

Thanks for your attention to destroying my site

Don’t Share anything of my site anywhere,
give me the css code, and I will replace it, if it doesn’t work, I will share the image and access with you

Hello,

I didn’t share your website. Please try to use the below code instead of the previous one.

.product-grid-item .wd-product-countdown {
    order: 1;
}

.product-grid-item .product-element-top  {
    order: 2;
}

.product-grid-item .product-element-bottom  {
    order: 3;
}

Kind Regards

I’m tired of you misunderstanding everything I told you

cheek private content

1-I want to put the “SOLD OUT” at the bottom of the product card in the catalog like image SOLD-OUT.jpg
2- Want to change the count-down and discount like this image: Screenshot-2024-01-02-141852.png

first cheek the private area
then login to site, import 1 demo and then apply the changes

Hello,

1. Changing the position of the countdown timer is possible but your staging site uses the old version of the theme, in the newest version the structure of the product grid was changed so the code custom will not work correctly if on the production you use the 7.4 update and above. So please update the theme on the staging platform and I will send you the custom code for changing the position of the countdown timer.

2. There is no way to make only the “discount” and “Sold out” at the bottom like on your image, Such modification requires complicated code customization which is not covered by our support.

Kind Regards

Hi
Just tell me about number 2. witch file is responsible, I will change my self

Hello,

It depends on the design that you have selected in Theme Settings. In wp-content/themes/woodmart/woocommerce you can see files that start as content-product-and ends with the name of the design: https://prnt.sc/ooIy52x0IXwC so check which design you have in Theme Settings and edit an appropriate file.

Thank you for your time and have a good day!

Kind Regards

Hi

I found the files and edited them, but if I update the theme, all modifications will be removed,
Want to put them in a chiled theme,
do you have any experience?

Hello,

You can copy the path to the appropriate design to the child theme, e,g child theme/woocommerce/content-product-buttons-on-hover.php thus you override the default file with your custom via child theme.

Let me know if you have any questions.

Kind Regards

[Author]

Posts