Hello Summer Sale!
Exclusive season-opening discount on TheGem theme.
Limited time offer.

Okay
  Public Ticket #1991716
Color BG options for Woocommerce
Closed

Comments

  • OneDoorLand started the conversation

    Attached are images to help explain.
    I need to customize some BG colors for woocommerce shop to match my dark style theme. Also want to change side menu background color. Also want to remove social icons from woocommerce. See attached images. Thanks

    Woocommerce BG colors - TheGemFixes_00000.jpg


    Side Menu background color - TheGemFixes_00001.jpg


    Woocommerce Product - hide social icons -TheGemFixes_00002.jpg

  •  5,055
    Michael replied

    HI!

    pls. use following css:

    body .checkout-steps .checkout-step, 
    body .checkout-steps .checkout-step:before, 
    body .checkout-steps .checkout-step:after {
        background-color: #aaa;
    }
    .woocommerce .checkout .form-row .input-text, 
    .woocommerce .edit-address-form .form-row .input-text, 
    .woocommerce .checkout .form-row textarea.input-text, 
    .woocommerce .edit-address-form .form-row textarea.input-text, 
    .select2-search .select2-input, 
    .woocommerce .checkout-login .login .form-row .input-text, 
    .woocommerce .lost_reset_password .input-text, 
    .woocommerce .my-account-signup .register .form-row .input-text {
        background-color: #aaa !important;
        border-color: #aaa !important;
    }
    .woocommerce-checkout-one-page .checkout-payment {
        background-color: #aaa !important;
    }

     

    6707465710.png

    2) pls. use following css:

    .header-layout-fullwidth_hamburger #primary-menu.no-responsive {
        background: #aaa !important;
    }

     

    6707465710.png

    3) pls. use following css:

    .single-product-content-left .socials-sharing.socials.socials-colored-hover {
        display: none;
    }

     

    6707465710.png
  • OneDoorLand replied

    Thank you very  much, that worked for most of the woocommerce edits. Here are a few more colors I need to find in options or with css. 

    Change color of background in white areas


    Thanks

  •  5,055
    Michael replied

    HI!

    pls. use following css:

    .woocommerce .woocommerce-shipping-calculator .form-row input.input-text {
        background: transparent !important;
    }
    .woocommerce input[type="text"].coupon-code {
        background: transparent !important;
    }
    .woocommerce .cart_totals table th {
        background-color: transparent !important;
    }
    .woocommerce .shop_table tr.cart_item:nth-child(2n) td {
        background: transparent !important;
    }
    .checkout-order-review-pattern {
        display: none !important;
    }

     

    6707465710.png
  • OneDoorLand replied

    Perfect thank you! That worked great

  •  5,055
    Michael replied

    Welcome! Have a nice day!