Hello,
9a. Here is a code for displaying labels from the left side.
.single-product .woocommerce-product-gallery {
flex-direction: row-reverse;
}
.single-product .product-images .product-labels {
right: auto;
left: -14px;
}https://gyazo.com/1a6fd94f32de2ca3e71ffcc9103694d3
9b. Enter this CSS to the “Custom CSS for desktop” area.
12b. In order to reduce spaces for the desktop and laptop, enter the below code accordingly to “Custom CSS for desktop” and “Custom CSS for tablet” areas.
.single-product-page>div:not(:last-child) {
margin-bottom: 20px;
}
.single-product .product-tabs-wrapper {
padding-bottom: 20px;
}https://gyazo.com/23ccfc5161fe281b7f84c1cd04d35c05
Hence the below code enter into the “Custom CSS for mobile” field.
.single-product-page>div:not(:last-child) {
margin-bottom: 10px;
}
.single-product .product-tabs-wrapper {
padding-bottom: 10px;
}13. In your case you have a cache plugin that will always cache the product page therefore the button will always be the same.
https://monosnap.com/file/3FH3xE63IqAY9YNFY8tiSXGnRCYXbL
14. The above code you can use for the desktop (also if you want a bit less indent from below you can reduce the margin-bottom value), so here is the code that you can use for the mobile devices (enter it to the “Custom CSS for mobile” field).
.single-product .website-wrapper .whb-header {
margin-bottom: 35px;
}https://gyazo.com/ff06818d1ebc8bbd2d8c2d76b494bdca
Kind Regards
