Viewing 20 posts - 1 through 20 (of 22 total)
  • Author
    Posts
  • #241085
    Ian Barnes
    Participant

    Hi,

    Please can you tell me how you can change the styling on the Woo Commerce Buttons including those on the shop, basket and checkout pages. I would likle to change the font sizes, background & hover colours and the overall size of the buttons.

    http://chloeclay.co.uk/ is my sites URL

    Many thanks
    Ian

    #241152
    Skandha
    Participant

    @barnes100180: Hello Ian,
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    /* For buttons on shop page */
    .woocommerce ul.products li.product .button {
        color: #fff;
        background-color: #000;
        font-size: 14px;
    }
    .woocommerce ul.products li.product .button:hover {
        background-color: #f23456;
    }
    
    /* For Checkout Button */
    .checkout-button {
        background-color: #123456 !important;
        font-size: 14px !important;
    }
    .checkout-button:hover {
    	background-color: #f23456 !important;
    }
    
    /* For Place Order button */
    #place_order {
        background-color: #123456 !important;
        font-size: 14px !important;
    }
    #place_order:hover {
    	background-color: #f23456 !important;
    }

    You can change the color according to your choice.
    Let me know if this works out!
    Kind Regards,
    Skandha

    #241192
    Ian Barnes
    Participant

    Hi Skandha,
    What you have done so far has been amazing however I have a few other bits that I would like to re-style.

    Can you provide CSS for the buttons found here http://chloeclay.co.uk/product/screaming-monkey/ to match the buttons here http://chloeclay.co.uk/shop/

    Once a product has been added you get another button appear briefly to say that it has been added to a basket. Can you provide CSS for this too please?

    On the basket page can you also provide CSS for the Update Basket button so that I can change colour, hover and font sizes. I have also noticed that when you hover over Update Basket there is a blue border around the button which shifts the container slightly.

    Finally, is there a way to change the font sizes within the theme because I cannot seem to find a way?

    Sorry to bombard you with all this.

    Many thanks
    Ian

    #241617
    Ian Barnes
    Participant

    Hi Skandha,

    Sorry to chase but I just wondered if you had managed to look at my last request? Just keen to get this sorted.

    Many thanks
    Ian

    #241620
    Skandha
    Participant

    @barnes100180: Hello Ian,
    Sorry for the late reply. I seem to have missed your email.
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    .single_add_to_cart_button.button.alt:hover, .button.wc-forward:hover, .woocommerce-cart-form .button:hover {
        background-color: #f23456 !important;
    }
    .single_add_to_cart_button.button.alt, .button.wc-forward, .woocommerce-cart-form .button {
        background-color: #54595F !important;
        color: #fff !important;
    }
    .woocommerce-cart-form .button:hover {
        opacity: 1 !important;
        border:unset;
    }

    There is not option to change the font size from the customizer. You will need to use Additional CSS for that.
    Let me know if this is what you want!
    Kind Regards,
    Skandha

    #241621
    Ian Barnes
    Participant

    Hi Skandha,

    Many thanks for sending this through.

    I would really appreciate it if you could provide the CSS to change font sizes.

    Many thanks
    Ian

    #241624
    Skandha
    Participant

    @barnes100180: Hello Ian,
    Please let me know for which texts you would like to change the font size.

    Kind Regards,
    Skandha

    #241628
    Ian Barnes
    Participant

    I would like to change the text for the product pages which will include the button, descriptions and reviews sections http://chloeclay.co.uk/product/bowl/ which will then apply to all other products that are added.

    It should also apply to the basket text and the text for once something is added to the basket.

    That should cover it unless anything els crops up.

    Thanks
    Ian

    #241629
    Ian Barnes
    Participant

    Also for the text when the bsaket is empty please

    http://chloeclay.co.uk/basket/

    #241635
    Skandha
    Participant

    @barnes100180: Hello Ian,
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    /* To change the font size of the button on single product page */
    .single_add_to_cart_button.button.alt {
        font-size: 10px;
    }
    /* To change the font size of product description on single product page */
    .woocommerce-product-details__short-description, #tab-description {
        font-size: 16px;
    }
    /* To change the text when basket is empty */
    .cart-empty.woocommerce-info {
        font-size: 15px;
    }

    Let me know if this works out!
    Kind Regards,
    Skandha

    #241639
    Ian Barnes
    Participant

    So sorry to keep adding to your workload. With other themes I haven’t had this issue before. I guess Woo Commerce could do with improving customization.

    Please can you also provide the CSS to change the font sizes for the following;

    SKU Numbers
    Description, Additional Info and Reviews Tabs on Single product page
    Basket Table and Basket Totals
    Return to shop and undo removed items from basket button

    Thank you so much in advance.

    Ian

    #241641
    Ian Barnes
    Participant

    Also the Added to basket text and button text please.

    #241747
    Skandha
    Participant

    @barnes100180: Hello Ian,
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    /* To change font size of SKU number */
    .product_meta {
        font-size: 16px;
    }
    /* To change font size of Description and Additional Info tabs  */
    .tabs.wc-tabs li {
        font-size: 16px;
    }
    /* To change font size of basket table and totals */
    .shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents {
        font-size: 15px;
    }
    .cart_totals {
        font-size: 15px;
    }
    /* To change font size of undo removed items  */
    .woocommerce-message {
        font-size: 15px;
    }
    /* To change font size of return to shop button  */
    .return-to-shop {
        font-size: 17px;
    }

    Let me know if this works out!
    Kind Regards,
    Skandha

    #241784
    Ian Barnes
    Participant

    Hi Skandha,

    This all works perfectly and all I have is one last request regarding fonts.

    Please can you provide CSS for the sorting drop down menu found here http://chloeclay.co.uk/shop/

    Many thanks
    Ian

    #241788
    Ian Barnes
    Participant

    Apologies, just seen thet I also need the CSS for the Showing all results text on the same page http://chloeclay.co.uk/shop/

    #241791
    Skandha
    Participant

    @barnes100180: Hello Ian,
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    /* To change the font size of shop product ordering option */
    .woocommerce-ordering select {
        font-size: 15px;
    }
    /* To change the font size of results count text */
    .woocommerce-result-count {
        font-size: 15px;
    }

    Let me know if this works out!
    Kind Regards,
    Skandha

    #241923
    Ian Barnes
    Participant

    Skandha,

    The help and support so far has been excellent.

    I have only just realised that I will now require all the necessary CSS to style the checkout page.

    http://chloeclay.co.uk/checkout/

    This will inlude First Name, Last Name, Company Name, Order Notes, Country/Region, Street Address, Town/City, County, Postcode, Phone, Email Address, Product Sub Total Table

    Not sure if this all comes under one table so one piece of code?

    Let me know if you need any further detail.

    Thanks in advance
    Ian

    #241985
    Skandha
    Participant

    @barnes100180: Hello Ian,
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    /* To change the font size of labels in check out form */
    .woocommerce-billing-fields__field-wrapper p {
        font-size: 15px;
    }

    Let me know if this is what you want!
    Kind Regards,
    Skandha

    #242046
    Ian Barnes
    Participant

    Hi Skandha,

    Thanks for this. It has changed all of the billing fields however the order notes field on the right and the Product and Sub-Total Table still needs CSS to change the font sizes.

    Are you able to get this done for me?

    Many thanks
    Ian

    #242143
    Skandha
    Participant

    @barnes100180: Hello Ian,
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    /* To change the font size of labels order notes */
    #order_comments_field label {
        font-size: 15px;
    }
    /* To change the font size of  Product and Sub-Total tables */
    .shop_table.woocommerce-checkout-review-order-table {
        font-size: 15px;
    }

    Let me know if this works out!
    Kind Regards,
    Skandha

Viewing 20 posts - 1 through 20 (of 22 total)
  • The topic ‘Woo Commerce Buttons’ is closed to new replies.