CSS customition

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

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

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

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