- This topic has 21 replies, 2 voices, and was last updated 3 years, 11 months ago by Skandha.
-
AuthorPosts
-
April 2, 2020 at 11:19 am #241085Ian BarnesParticipant
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
IanApril 3, 2020 at 4:30 am #241152SkandhaParticipant@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,
SkandhaApril 3, 2020 at 6:25 pm #241192Ian BarnesParticipantHi 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
IanApril 7, 2020 at 5:00 am #241617Ian BarnesParticipantHi 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
IanApril 7, 2020 at 5:17 am #241620SkandhaParticipant@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,
SkandhaApril 7, 2020 at 5:19 am #241621Ian BarnesParticipantHi Skandha,
Many thanks for sending this through.
I would really appreciate it if you could provide the CSS to change font sizes.
Many thanks
IanApril 7, 2020 at 5:28 am #241624SkandhaParticipant@barnes100180: Hello Ian,
Please let me know for which texts you would like to change the font size.Kind Regards,
SkandhaApril 7, 2020 at 5:41 am #241628Ian BarnesParticipantI 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
IanApril 7, 2020 at 5:42 am #241629Ian BarnesParticipantAlso for the text when the bsaket is empty please
April 7, 2020 at 6:40 am #241635SkandhaParticipant@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,
SkandhaApril 7, 2020 at 8:12 am #241639Ian BarnesParticipantSo 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 buttonThank you so much in advance.
Ian
April 7, 2020 at 8:13 am #241641Ian BarnesParticipantAlso the Added to basket text and button text please.
April 8, 2020 at 3:08 am #241747SkandhaParticipant@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,
SkandhaApril 8, 2020 at 7:41 am #241784Ian BarnesParticipantHi 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
IanApril 8, 2020 at 8:15 am #241788Ian BarnesParticipantApologies, just seen thet I also need the CSS for the Showing all results text on the same page http://chloeclay.co.uk/shop/
April 8, 2020 at 9:13 am #241791SkandhaParticipant@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,
SkandhaApril 8, 2020 at 2:10 pm #241923Ian BarnesParticipantSkandha,
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
IanApril 9, 2020 at 12:58 am #241985SkandhaParticipant@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,
SkandhaApril 9, 2020 at 9:32 am #242046Ian BarnesParticipantHi 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
IanApril 10, 2020 at 12:18 am #242143SkandhaParticipant@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 -
AuthorPosts
- The topic ‘Woo Commerce Buttons’ is closed to new replies.