Home › Forums › WoodMart support forum › Changing the position of the “New” label on the product page

Changing the position of the “New” label on the product page

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 9, 2024 at 8:22 am #610952

    Ecommerce
    Participant

    Hello,

    The “New” label appears on the left in the grid layout but on the right on the single product page. How can I make the label appear on the left on the single product page? Also, I’d like to make the label a bit larger—could you provide the CSS code to help with this?

    The relevant image was sent from the private area

    November 9, 2024 at 10:30 am #610994

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Try adding the following Custom CSS in the desktop Custom CSS area under Theme Settings >> Custom CSS.

    .single-product .woocommerce-product-gallery .product-labels[class*="labels-rounded"] {
    inset-inline-end: 500px !important;
}
.single-product .woocommerce-product-gallery .product-labels.labels-rounded .product-label {
    min-width: 80px !important;
    min-height: 80px !important;
    font-size: 40px;
}

    Best Regards

    November 9, 2024 at 10:46 am #611000

    Ecommerce
    Participant

    These codes are broken, and the left alignment does not appear on the mobile version; it disappears. We kindly request that you develop a solution to allow the “New” tags to be adjustable in both mobile and desktop versions through the theme settings. This is an essential update for all users, as it is necessary to adjust the badge’s appearance on both mobile and desktop.

    November 9, 2024 at 11:43 am #611012

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Try adding the following Custom CSS in the desktop Custom CSS area under Theme Settings >> Custom CSS.

        .single-product .woocommerce-product-gallery .product-labels[class*="labels-rounded"] {
        left: 20px !important;
    }
    .single-product .woocommerce-product-gallery .product-labels.labels-rounded .product-label {
        min-width: 80px !important;
        min-height: 80px !important;
        font-size: 40px;
    }

    Try adding the following Custom CSS in the mobile Custom CSS area under Theme Settings >> Custom CSS.

    .single-product .woocommerce-product-gallery .product-labels[class*="labels-rounded"] {
        left: 10px !important;
    }
    .single-product .woocommerce-product-gallery .product-labels.labels-rounded .product-label {
        min-width: 60px !important;
        min-height: 60px !important;
        font-size: 30px;
    }

    Best Regards

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)