Return to previous page

Edit Single Product Page - by capri_2794

This topic has 9 replies, 2 voices, and was last updated 6 years, 6 months ago ago by Rose Tyler

capri_2794

Participant

November 20, 2018 at 01:48

Hello,

I want to make a few changes to the single product page:

1. I want to display Product name instead of “Product Description”. This way it will have Blooming Flower Earrings on top.
2. I need to make price bold
3. I need to move Add to Cart to left side and change its colour (idle as well as hover colours)
4. I need to change text colour in idle stale (make white)
http://prntscr.com/lkh0qr

Kindly help in this regard

Regards

Please, contact administrator
for this information.

#204193 Copied

8 Answers
Rose Tyler

Support staff

November 20, 2018 at 09:56
Hello,

1) Theme Options > Single product page > Show Product Title.
To remove this http://prntscr.com/lkkx34 –

.product-information-inner .product-navigation { display: none; }

Styling of this title http://prntscr.com/lkkxf7 can be changed in Theme Options > Typography > Page Content > H3.
2)

.product-information .price { font-weight: 600; }

3,4) Try to change this code

.product-information .cart button[type="submit"] { float: left; }

in your Global custom css to:

.product-information .cart button[type="submit"] { float: left; background-color: red; color: white; } .product-information .cart button[type="submit"]:hover { background-color: #151110 !important; color: #f6bf98; }

Regards
#204220 Copied
capri_2794

Participant

November 20, 2018 at 18:50

Thank you. It’s done.

Kindly tell how I can move the ADD TO CART button to extreme left. http://prntscr.com/lkssb9
I also want to make it shorter.

Plus, I want to add a “Buy now” button on each product too which will directly open payment section for quick checkout.

#204269 Copied
Rose Tyler

Support staff

November 21, 2018 at 13:18
1)

.product-information .cart button[type="submit"] { margin-left: 0px; width: 200px !important; }

2) This requests additional customization in files. Additional customization is not included in our basic support, unfortunately.

Regards
#204304 Copied
capri_2794

Participant

November 21, 2018 at 17:16

Okay, the first one is done. Thanks.

#204329 Copied

Rose Tyler

Support staff

November 22, 2018 at 10:47

You’re welcome!

Regards

#204613 Copied

capri_2794

Participant

November 30, 2018 at 06:21

I have added following codes in Theme Global CSS but the prices are the same black colour and normal weight. Please tell how to change the font size and weight.

.product-information .price {
font-size: 16px;
font-weight: 600;
color: #FF6D14;
}

.price {
font-size: 16px;
font-weight: 600;
color: #FF6D14;
}

#205118 Copied

capri_2794

Participant

November 30, 2018 at 08:33

The price on single product page in mobile version is centered. I want it to be left aligned. Please suggest how to do it.

#205127 Copied
Rose Tyler

Support staff

November 30, 2018 at 09:56
Hello,

Please change this code:

.price { font-size: 16px; font-weight: 600; color: #FF6D14; }

to

.price { font-size: 16px !important; font-weight: 600 !important; color: #FF6D14 !important; }

and this one:

.product-information .price { float: left; margin-left: 0px; font-size: 16px; font-weight: 600; color: #FF6D14 !important; }

to:

.product-information .price { font-size: 16px !important; font-weight: 600 !important; color: #FF6D14 !important; }

Also, add this code in Custom CSS for mobile area:

.product-information .price { text-align: left !important; }

Regards
#205145 Copied
Viewing 9 results - 1 through 9 (of 9 total)