Home Forums WoodMart support forum Change the location of discounts on the product page

Change the location of discounts on the product page

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #717992

    raeelio
    Participant

    How can I move the discount to the right side, like in the image I uploaded? And how can I enlarge this label?

    Attachments:
    You must be logged in to view attached files.
    #718059

    Serg Sokhatskyi
    Keymaster
    Xtemos team

    Hi,

    Here is the custom code to change the Sale Label position to the right side of the product loop thumbnail. Please add the following code to Theme Settings > Custom CSS > Global:

    .product-grid-item .product-labels {
    	inset-inline-end: 7px;
    	max-width: 100%;
    }
    
    .product-grid-item .product-label.onsale {
    	position: absolute;
    	inset-inline-end: 0;
    }

    Additionally, here is the custom code to increase the padding and font size of the Sale Label on product loop. You can adjust the values within the code to suit your specific needs:

    .product-grid-item .product-label.onsale {
    	padding: 8px;
    	font-size: 16px;
    }

    Best regards

Viewing 2 posts - 1 through 2 (of 2 total)