Product Page badge size and display issues

Hello,

Thank you for reaching out to us.

1/ XStore Builders > Single Product Builder > edit template > edit width of sections

2/ Here is what we see on a single product page right now – https://prnt.sc/8T5OrjGFPmAX
Kindly describe your desired result in more detail so we can better assist you.

3/ Regarding the display of percentage discounts for variable products:
This is how the discount appears when a product has variations, as each variation may have a different price.
To disable this feature, please go to:
Theme Options > WooCommerce > Shop Elements > Product Badges > Percentage for Variable Products > Set to “Off”.

Should you have any further questions or require additional assistance, please do not hesitate to contact us.

Warm Regards,
The 8Theme Team

Hello,

Custom CSS code can be used:

.single-product .onsale {
    font-size: 20px;
}

https://www.8theme.com/documentation/xstore/additional-customisation/optimal-placement-for-custom-css-code/

Warm Regards,
The 8Theme Team

Hello,

We appreciate your prompt response.

Please change the code to:

.single-product .onsale {
    font-size: 20px;
    top: 30px !important;
}

Warm Regards,
The 8Theme Team

Hello @kmc,

Thank you for reaching out.

Please note that the “new” label is not configured by default to appear on the single product page. If you would like to request this feature, we kindly encourage you to submit your suggestion on our Feature Requests Taskboard. This allows us to evaluate the popularity of the request and consider it for future updates:

https://www.8theme.com/roadmap/

Best regards,
Jack Richardson
The 8Theme Team

Hello @kmc,

We hope this message finds you well.

Kindly add the following custom CSS to your Theme Options under Theme Custom CSS:

body .single_add_to_cart_button.button:has(+input[name=gtm4wp_product_data]) {
    margin-right: 0;
}

This adjustment addresses the extra spacing that appears next to the button, which is caused by a custom input field with the name “gtm4wp_product_data”.

Should you have any further questions or require assistance, please do not hesitate to reach out.

Best regards,
The 8Theme Team

Hello @kmc,

Thank you for reaching out.

Could you please provide us with the URL of the page in question? Additionally, we would appreciate it if you could clarify the desired outcome you are aiming to achieve.

Please note that since you are applying custom CSS globally and across different sections—such as a 6-column product carousel or a 2-column product grid—the size of the sale badge appears consistent across all layouts. If you require a different appearance on a specific page, we recommend applying custom CSS that targets the specific page ID. For your reference, please see the following screenshot: https://prnt.sc/t22i5NjJOkFK

We look forward to your response.

Best regards,
Jack Richardson
The 8Theme Team

Hello @kmc,

We hope this message finds you well.

We have noticed that the following custom CSS has been added under WP Code snippets (https://gyazo.com/139b4c0db26f5de8662ef947565da7ed):

.single-product .onsale {
    font-size: 18px;
    top: 50px !important;
}

Please note that this code applies the specified styles to all .onsale badges displayed across all sections of the single product page.

If your intention is to apply these changes exclusively to the sale badge within the product gallery on the single product page, we recommend updating the code as follows:

.images-wrapper .onsale {
    font-size: 18px;
    top: 50px !important;
}

This adjustment will ensure that the styling is limited to the desired section.

Best regards,
Jack Richardson
The 8Theme Team

Hello @kmc,

We hope this message finds you well.

Kindly consider enhancing the code by including the following snippet as well:

body input[name="gtm4wp_product_data"] ~ .single_add_to_cart_button.button {
    margin-right: 0;
}

Thank you for your attention to this matter.

Best regards,
The 8Theme Team

Hello,

Thank you for reaching out to us.

Custom CSS can be used:

.single-product div.quantity~.single_add_to_cart_button {
    margin-bottom: 20px !important;
}
.single-product button.et-single-buy-now.single_add_to_cart_button.button.alt {
     margin-bottom: 0px !important;
}

Warm Regards,
The 8Theme Team