Return to previous page

Edit Single Product Page - by capri_2794

This topic has 9 replies, 2 voices, and was last updated 6 years 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)