Before you ask please READ THIS

How to make all pages contain woocommerce page background completely black?

in Rife Posts: 16
How to make all pages contain woocommerce page background completely black? Just like https://www.doghousetw.com/

Comments

  • AirAir
    Posts: 10,709
    Hello :-)

    I think the first way to do it is to change background color in Customizing → General settings → Content .

    It will change the color of the content across the website.

    Please let me know is it solution that fits you.

    With kind regards.
  • Posts: 16
    how to set Black writing on white background?
    1629177528775.jpg
    1297 x 818 - 346K
  • Posts: 16
    how to set Text white?
    1629177732509.jpg
    1211 x 751 - 252K
  • AirAir
    Posts: 10,709
    Hello :-)

    Please add such custom CSS to make desired changes:
    
    .products_variant_under .product-details {
        background-color: #000000;
    }
    .woocommerce div.product .product_title {
        color: #ffffff;
    }
    .woocommerce div.product p.price, .woocommerce div.product span.price {
        color: #ffffff;
    }
    .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li.active a {
        color: #ffffff;
        border-bottom: 2px solid #222222; /* change this color as well if you need*/
    }
    With kind regards.
  • Posts: 16
    how to set Text white?
    1629264746136.jpg
    1876 x 867 - 147K
  • AirAir
    Posts: 10,709
    Can you share a direct link to where this form can be found?
    I am not sure what it represents.

    With kind regards.
  • Posts: 16
    thank you
  • Posts: 16
    How to set large fonts
  • AirAir
    Posts: 10,709
    Here is the custom CSS for those labels:
    .woocommerce-page form .form-row label, #payment label {
        color: #ffffff;
    }
    fanhsing said: How to set large fonts
    Could you elaborate on what do you mean?

    With kind regards.
  • edited August 26 Posts: 16
    How to set the text color to black?
    https://www.driven-f1.com/checkout-2/

    1629952515914.jpg
    1393 x 756 - 146K
    Post edited by fanhsing on
  • edited August 26 Posts: 16
    How to set the text color to white?
    https://www.driven-f1.com/cart-2/
    1629951539773.jpg
    1449 x 640 - 82K
    Post edited by fanhsing on
  • AirAir
    Posts: 10,709
    Please add such custom CSS:

    For the cart
    
    .woocommerce table.shop_table .product-name a {
        color: #fff;
    }
    .woocommerce-cart table.shop_table .product-subtotal{
        color: #fff;
    }
    .woocommerce table.shop_table th, .woocommerce table.wishlist_table thead th {
        color: #fff;
    }
    .woocommerce .cart-collaterals .cart_totals h2 {
        color: #fff;
    }
    .woocommerce-cart .cart-collaterals .cart_totals tr.order-total td {
        color: #fff;
    }
    and for the checkout:
    .woocommerce-page form .form-row label, #payment label {
        color: #000;
    }
    Hope that helps.

    With kind regards.
  • Posts: 16
    How to set the text color to white?

    https://www.driven-f1.com/checkout-2/
    1630298679510.jpg
    1202 x 846 - 99K
  • Posts: 16
    How to set the text color to white?

    https://www.driven-f1.com/my-account-2/
    1630298728469.jpg
    1248 x 840 - 136K
  • AirAir
    Posts: 10,709
    Please add such custom CSS:

    For the checkout:
    .woocommerce-checkout-review-order td.product-name {
        color: #fff;
    }
    .woocommerce-checkout-review-order tr.order-total td {
        color: #fff;
    }
    


    For the my-account it seems it colides with CSS I gave you previous time for the checkout.

    So please remove this CSS:
    .woocommerce-page form .form-row label, #payment label {
        color: #000;
    }
    and instead add this CSS:
    .woocommerce-page form #customer_details .form-row label {
        color: #000;
    }


    Hope that helps.

    With kind regards.
  • edited September 6 Posts: 16
    If you don't have multiple product images, you can center the main image of the product, don't there be a blank in the red box?
    https://www.driven-f1.com/product/logo-collection/
    1630916435122.jpg
    502 x 806 - 130K
    Post edited by fanhsing on
  • AirAir
    Posts: 10,709
    Hello :-)

    You can switch to default thumbnails in Customizing → Shop(WooCommerce) settings → Single product → Theme thumbnails → Disable.
    It will remove this space.

    By the way, how did you make , that it doesn't display any thumbnail near the main product photo, even when there is only one photo. In my case it looks like this in such case:image

    With kind regards.
    screenshot-192.168.1.2-2021.09.06-15_13_24.png
    482 x 433 - 85K
  • Posts: 16
    I haven't made any changes, I thought it was normal.
  • AirAir
    Posts: 10,709
    Interesting. I will look around is there any setting in the WooCommerce that creates such an effect.

    With kind regards.
  • AirAir
    Posts: 10,709
    It seems WooCoomerce updates old products with a single thumbnail while you enter edit mode.
    I have just added styles for such a scenario. Thanks for pointing this out!

    With kind regards.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!