woocommerce customization / styling

  • jeanzz

    (@jeanzz)


    8 years, 9 months ago

    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/

    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/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.
    • This topic was modified 8 years, 9 months ago by jeanzz.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Tom

    (@edge22)

    8 years, 9 months ago

    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

    (@janburg)

    8 years, 9 months ago

    @jeanzz I just looked at your 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.