Product pics discount percentage value how to move
-
Hello,
How to move the percentage discount value( those little circles) on single product pics from top to bottom corner of the pics.
On descstop it is at the top right corner, on mobile top left. I’d like to move it to bottom right corner both mobile and descstop. Also how can I change to color of the background of those discount bubbles?
Thanks!
Woodmart + Elementor
Attachments:
You must be
logged in to view attached files.
Hello,
Please add this code to the Theme Settings > Custom CSS > Global:
.woocommerce-product-gallery .product-labels[class*=labels-rounded] {
top: 500px;
right: 30px;
}
Try to add the following code for background color:
.product-label.onsale {
background-color: red;
}
Best Regards
hello,
I tried this but it didn’t work. Please see screenshot attached. The discount bubbles are still top left and blue color.
Thanks!
Attachments:
You must be
logged in to view attached files.
Hello,
Can you please share the WP admin login details of your site so I can check and give you a possible solution?
Best Regards.
ok, please see user and pass
login info attached as a Extra information (visible to moderators only
Hello,
The previous code is working fine on your site:
Screenshot for clarification:
https://ibb.co/6Z2QL5c
Sometimes, outdated or cached files can cause display issues. Check back your site after completely clearing the browser cache.
Best Regards.
Hello,
I cleared browser history (cashe) but product category page and home page also, the location of the discount signs didn’t change. Please see screenshot attached
Attachments:
You must be
logged in to view attached files.
Hello,
Please check the issue in incognito mode and let me know.
Best Regards.
Hello,
Yes, checked many times with different browsers, all cashe cleared and in incognito mode.
Well, on the category pages, the location of the element is still on the top left side of the image. At least the color changed to red as requested.
On the singe product pages the element moved to the bottom right corner of the images, but this is only on Single Product pages.
Anyway, Google Search Console detected issue with these changes, becaause on Mobile Usability the element is located out of the image frame and too close to the header. Please see all screenshots attached.
So my suggestion is: How to edit the Global CSS code you sent me at the beginning so the discount element move to the top right corner of the images ( both single product and category pages grid)
Attachments:
You must be
logged in to view attached files.
Hello,
I have unable to access your site:
https://ibb.co/PcQ5LfB
Please give the site so i will further check and give you a possible solution.
Best Regards.
Well, I removed the previous code today because of the mobile issue. Could you please move the object to the top right corner of the product images in product category page and single product page.
Hello,
Try to use the below code, define it in Theme Settings -> Custom CSS -> Custom CSS for desktop:
.product-grid-item .product-labels {
position: relative;
left: 230px;
}
Try to use the below code, define it in Theme Settings -> Custom CSS -> Custom CSS for mobile:
.product-grid-item .product-labels {
position: relative;
left: 287px;
}
Best Regards.
.
