Title: woocommerce customization / styling
Last modified: August 1, 2017

---

# woocommerce customization / styling

 *  [jeanzz](https://wordpress.org/support/users/jeanzz/)
 * (@jeanzz)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/woocommerce-customization-styling/)
 * hi, would greatly appreciate any help for the below please. thank you!
 * **1. how to change the entire border color for “what are people saying” tab? **
   
   [http://project1.x10host.com/product/butterfly-sky/](http://project1.x10host.com/product/butterfly-sky/)
 * below is the code im using:
 * .woocommerce-tabs .tabs li,
    .woocommerce-tabs .tabs li a { color: #ff69b2 !important;
   border-color: #ff69b2 !important; }
 * **2. how to remove the reviews title, and edit the content in the tab?**
 * **3. i will like the price to be aligned center on the shop page, and the price
   to be aligned left on the single products page. but my codes are not working.
   below fyr.**
 * [http://project1.x10host.com/shop/](http://project1.x10host.com/shop/)
    [http://project1.x10host.com/product/butterfly-sky/](http://project1.x10host.com/product/butterfly-sky/)
 * .woocommerce-loop-product__title {
    color: #000000; letter-spacing: 0.1em; font-
   size: 15px!important; text-align: left; font-family: Roboto, sans-serif; text-
   transform: uppercase;
 * }
 * .woocommerce-Price-amount.amount {
    color: #ff69b2; font-size: 16px!important;
   font-family: Roboto, sans-serif; letter-spacing: 0.1em; text-align: left; display:
   block; }
 * .woocommerce .product .add_to_cart_button.button{
    background-color: #ffffff;
   color: #ff96c9; font-size: 12px!important; letter-spacing: 0.1em; font-family:
   Roboto, sans-serif; text-transform: uppercase; padding: 0.7em 0.7em !important;
   border: 2px solid; border-color: #ffadd5 }
 * .woocommerce .product .add_to_cart_button:hover.button:hover{
    background-color:#
   ffadd5; color: #ffffff; font-size: 12px!important; letter-spacing: 0.1em; font-
   family: Roboto, sans-serif; text-transform: uppercase; padding: 0.7em 0.7em !
   important; border: 2px solid; border-color: #ffadd5 }
 * .woocommerce ul.products li.product .price,
    .woocommerce-page ul.products li.
   product .price { text-align: left; color: #F00; /* This is what you MAY want 
   to change color */ font-weight: 100; font-size: 0.9em; }
 * ul.products li{
    text-align: left }
 * .single-product .product .single_add_to_cart_button:hover.button:hover{
    background-
   color: #ff69b2; color: #ffffff; font-size: 12px!important; letter-spacing: 0.1em;
   font-family: Roboto, sans-serif; text-transform: uppercase; padding: 0.7em 0.7em!
   important; border: 2px solid; border-color: #ff69b2 }
 * .product_title {
    font-size: 23px !important; color: #000000; letter-spacing:
   0.1em; text-align: left; font-family: Roboto, sans-serif; text-transform: uppercase;}
 * .single-product .product .single_add_to_cart_button.button{
    background-color:#
   ffadd5; color: #ffffff; font-size: 12px!important; letter-spacing: 0.1em; font-
   family: Roboto, sans-serif; text-transform: uppercase; padding: 0.7em 0.7em !
   important; border: 2px solid; border-color: #ffadd5 }
    -  This topic was modified 8 years, 9 months ago by [jeanzz](https://wordpress.org/support/users/jeanzz/).
    -  This topic was modified 8 years, 9 months ago by [jeanzz](https://wordpress.org/support/users/jeanzz/).

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Theme Author [Tom](https://wordpress.org/support/users/edge22/)
 * (@edge22)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/woocommerce-customization-styling/#post-9372498)
 * Hi there,
 * 1. It looks like you’re just missing this CSS:
 *     ```
       .woocommerce div.product .woocommerce-tabs ul.tabs::before {
           border-color: #ff69b2;
       }
       ```
   
 * 2. Like this:
 *     ```
       .woocommerce-Reviews-title {
           display: none;
       }
       ```
   
 * I’m not sure how to edit the rest of the content in there, as it’s handled inside
   WooCommerce. Might be a better questions for their support team.
 * 3. Give this a shot:
 *     ```
       .woocommerce:not(.single) span.price {
           text-align: center !important;
       }
       ```
   
 * Let me know 🙂
 *  [janburg](https://wordpress.org/support/users/janburg/)
 * (@janburg)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/woocommerce-customization-styling/#post-9395285)
 * [@jeanzz](https://wordpress.org/support/users/jeanzz/) I just looked at your 
   [http://project1.x10host.com/shop/](http://project1.x10host.com/shop/) page, 
   it appears that you were able to separate the lines as you wanted. How did you
   do that – that’s what I need also! Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘woocommerce customization / styling’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/generatepress/3.6.1/screenshot.
   png)
 * GeneratePress
 * [Support Threads](https://wordpress.org/support/theme/generatepress/)
 * [Active Topics](https://wordpress.org/support/theme/generatepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/generatepress/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/generatepress/reviews/)

 * 2 replies
 * 3 participants
 * Last reply from: [janburg](https://wordpress.org/support/users/janburg/)
 * Last activity: [8 years, 9 months ago](https://wordpress.org/support/topic/woocommerce-customization-styling/#post-9395285)
 * Status: not resolved