Showing Labels on Single Product Page

Hi,

Please tell me – what WordPress theme you are currently using? Also – are you using any page builder plugins to customize the product page?

Regards

I use the Flatsome Theme and UX blocks to build pages, but I do have custom css trying to force my product cards to equalize in the catalog.

Please try the following – open UX blocks editor and edit single product page template. Before Product Title block add a new Text block with the following value:

[awl_get_product_labels position="before_title"]

This must solve your problem add display the labels with Before Title position.

Perfect thank you for HTML, anyway to make it bigger when it’s on the single product page? Is there anyway to have my Sale tag be on the top left of the product card instead of the product image when it’s displaying?

Thanks again!

To change the position of the image label you can add the following shortcode right before?Image?block inside Flatsome UX Builder:

[awl_get_product_labels position="on_image"]

About making label bigger for single product page – please try following custom css:

.single-product .row.has-block .awl-product-label {
    font-size: 17px !important;
}

Where am I applying “.single-product .row.has-block .awl-product-label { font-size: 17px !important; }”

also for the Sale label is there a way to put it on the product card/background instead of on the product image, I am trying to have it basically on the top left of the card when viewed in catalog mode, but I guess if I did that it wouldn’t show up on the single product page.

The best way for adding this custom css – by opening Appearance -> Customize -> Additional CSS and adding needed CSS code inside the option field.

About label position changing – to can try to play with Hooks option from the plugin settings page. With this option you can change default hooks that are used to display product labels and, as I result, the position of labels.

Hmm, I had put it in additional CSS and didn’t notice any changes even with 25px on incognito mode. I really appreciate all your help!

So to make things clear – you want to make bigger only On Image labels and only for the main product inside the product single page. Is that correct?

I only want to make “FREE SHIPPING” bigger on the single product page. sorry for the confusion.

Thanks for your explanation. Please add this additional css:

.single-product .product-price-container + .advanced-woo-labels .awl-product-label {
    font-size: 17px !important;
}

Hmm doesn’t seem to do anything, the advanced woolabels is in an html block of its own, but I see the code saying product price container? maybe that’s issue? idk anything about coding so.

Such css selector with product price container is needed to make changes only for label of main product and doesn’t change any others.

I see that your custom css section contains following styles:

.product-small > .box-image {  height: 130px !important;  aspect-ratio: 1/1 !important;;}
}

.single-product .product-price-container + .advanced-woo-labels .awl-product-label {
    font-size: 30px !important;
}

First css contains some mistakes. Please change it to

.product-small > .box-image {  
    height: 130px !important;  
    aspect-ratio: 1/1 !important;
}

.single-product .product-price-container + .advanced-woo-labels .awl-product-label {
    font-size: 30px !important;
}

Perfect thanks again! I should be all set.