Change price font size for regular price only on product page

Change price font size for regular price only on product page

swayurindia
Excursionist
144 0 9

Change price font size for regular price only on the product page. I ONLY want to change the price font for PRODUCT PAGE only. And that also for PRODUCT CONTAINER ONLY. (NOT FOR SEARCH BAR AND RELATED PRODUCTS)

 

And I have tried many codes till now but haven't got any proper solution.

 

Below I am attaching example for product which is on sale and product which is not sale:

 

On sale: https://www.swayur.com/products/jhaveri-organic-cold-pressed-peanut-oil-15-l-tin

Not on sale: https://www.swayur.com/products/patanjali-cows-ghee-1-l

 

And in this ON SALE product the final product price font is 22px, and on NOT ON SALE product also I want the font-size to be 22px (regular price). And not change the line-through price font size on sale product page.

 

I hope you understand my problem?

 

Regards,

Harsh 

Swayur India

Replies 3 (3)

Harsita
Shopify Partner
46 10 23

Hi @swayurindia 

 

Thank you for reaching out to the Shopify community.

 

In order to change the font of regular price of price on sale you have to go to your theme code editor and search for the file component-price.css in Assets folder, there search for class .price--on-sale .price-item--regular and  change the font-size property.

 

.price--on-sale .price-item--regular {
    text-decoration: line-through;
    color: rgba(var(--color-foreground),.75);
    font-size: inherit;   //font-size of your choice
    font-weight: 500;
}

 

 

Now the font size would have been changed for regular price.

 

Please give this a try and let me know if this was helpful.

 

Thanks

Harshita || Recurpay Subscriptions

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
swayurindia
Excursionist
144 0 9

It is not working, I just want to change FONT-SIZE on NOT ON SALE product. For more info you can go through the problem again. Also visit the link of the product then you might come to know what's the exact issue I am facing.

 

One more thing I want a solution for is that I want to remove the hover/shadow effect from the add to cart button I have attached a screenshot for the same you can check below:
add-to-cart-hover.JPG

 

in this the left side product is on focus/hover mode and the right side product is not on focus at present. I hope you're understanding.

Harsita
Shopify Partner
46 10 23

Hi @swayurindia 

 

If you want to change the font size of product price on not on sale product page, then make changes in class .price__regular .price-item--regular

 

.price__regular .price-item--regular {
    margin-right: 0;
    font-size: 22px;
}

 Thanks

Harshita || Recurpay Subscriptions

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution