Edit Single Product Page

• 

  capri_2794

  |

  Participant

  | November 20, 2018 at 1:48 am

  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

  

  Content is visible for topic creator and
  support staff only.

  #204193 copied to clipboard
  

  Rose Tyler

  |

  Keymaster

  | November 20, 2018 at 9:56 am

  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 to clipboard
  

  capri_2794

  |

  Participant

  | November 20, 2018 at 6:50 pm

  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 to clipboard
  

  Rose Tyler

  |

  Keymaster

  | November 21, 2018 at 1:18 pm

  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 to clipboard
  

  capri_2794

  |

  Participant

  | November 21, 2018 at 5:16 pm

  Okay, the first one is done. Thanks.

  #204329 copied to clipboard
  

  Rose Tyler

  |

  Keymaster

  | November 22, 2018 at 10:47 am

  You’re welcome!

  Regards

  #204613 copied to clipboard
  

  capri_2794

  |

  Participant

  | November 30, 2018 at 6:21 am

  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 to clipboard
  

  capri_2794

  |

  Participant

  | November 30, 2018 at 8:33 am

  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 to clipboard
  

  Rose Tyler

  |

  Keymaster

  | November 30, 2018 at 9:56 am

  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 to clipboard
Viewing 9 results
1 through 9 (of 9 total)