The colours you utilize in your web site’s design play an vital function in its consumer expertise (UX). The looks of important components comparable to buttons can affect clients’ buying selections and different key actions. Due to this fact, it’s essential to understand how to change WooCommerce button colours in your on-line retailer.
The excellent news is that there are a handful of fast and straightforward strategies you should use to do that. The most suitable choice for you’ll depend upon a number of components, such because the WooCommerce theme you’re utilizing, whether or not you’re comfy working with code, and when you’re prepared to set up a brand new plugin.
On this publish, we’ll stroll you thru 3 ways to change your WooCommerce button colours. Earlier than getting began, we’d counsel making a backup of your website simply in case.
Should you haven’t arrange your WooCommerce retailer but, additionally try our step-by-step tutorial on how to create an eCommerce web site with WordPress.
Then, you’ll be prepared to bounce proper in!
1. Use Your Theme’s Choices
One of many best and quickest methods to change WooCommerce button colours is to use your theme’s built-in choices. To exhibit how this works, we’ll be utilizing our quick and free WooCommerce theme, Botiga:
Should you’re not utilizing Botiga, that’s okay. There are lots of free and premium WooCommerce themes on the market that provide related performance. Nevertheless, word that each theme has its personal distinctive group and set of choices, so some might offer you extra customization freedom than others.
After you have the Botiga theme put in and activated in your web site, you can begin altering the button colours instantly.
To take action, navigate to Look → Customise → Basic → Buttons:
Right here, you’ll find quite a lot of settings and choices for customizing your web site’s buttons.
These choices will have an effect on your WooCommerce store in addition to any buttons elsewhere in your website. You possibly can regulate their padding, radius, font dimension and case, and background colour:
To change the background colour, you possibly can scroll down to Default State, after which choose the Background Colour possibility:
You should utilize the colour selector instrument or enter a HEX worth. If you’d like to change the textual content colour or add a border colour, you may as well accomplish that below this part.
If you’d like to change the way in which the button seems when a consumer hovers their mouse over it, use the choices within the Hover State part. You possibly can change the background, textual content, and border colours.
You possibly can preview how the button will look within the right-side viewer. While you’re achieved, choose Publish to take your modifications reside.
Creating Your Personal Colour Palette
Should you’re utilizing Botiga, you may as well create a novel colour palette on your WooCommerce retailer. To do that, navigate to Look → Customise → Colors:
On this display screen, you possibly can view and handle the colours for all components of your on-line store. This consists of your hyperlinks, textual content, heading, and background colours.
You possibly can toggle the change subsequent to Create Your Personal Palette?, after which use the colour selector to select your colours. While you’re achieved, you possibly can click on on the Publish button. This can be a smart way to shortly change up your retailer’s look, with out having to make modifications to particular person pages and components.
2. Set up a Devoted Plugin
Another choice for altering your WooCommerce button colours is to use a third-party plugin. This can be a helpful technique in case your theme doesn’t provide a lot management over button look.
One standard answer is SiteOrigin CSS:
This versatile instrument comes with a visible editor that makes customization fast and straightforward. To get began, set up and activate the plugin in your web site.
Subsequent, navigate to Look → Customized CSS. Click on on the attention icon to launch the frontend interface:
It will open the reside editor, the place you possibly can modify a variety of settings.
To alter the button colour, click on on the button, after which choose the Ornament tab alongside the left-side menu:
Subsequent, click on on Background Colour, and choose the colour picker instrument to select your hue. You possibly can repeat this course of for the textual content and border colours as properly. You may as well regulate the button sizing, padding, and so forth.
While you’re achieved, click on on the Save CSS button (the floppy disk icon). Don’t neglect to verify your modifications out on the frontend of your website, to be sure they give the impression of being good.
3. Manually Insert Customized CSS Code
The third manner to change button colours in WooCommerce is to manually add CSS code. This is usually a helpful possibility when you aren’t utilizing Botiga or one other theme with the fitting customization choices, you don’t need to set up a brand new plugin, and also you’re comfy working with code.
To get began, go to the frontend of your web site, discover the Add to Cart button (or no matter button you’d like to alter), right-click on it, and choose Examine:
It will launch DevTools (when you’re utilizing the Chrome browser), the place you’ll find the HTML and CSS code for that button. You’ll want to search for the category title(s) and make word of them. In our instance, the button class title is .wc-block-grid__product-add-to-cart.wp-block-button.
Then, use a colour picker instrument to discover the right shade on your button and replica the HEX worth. Return to your WordPress dashboard, and go to Look → Customise → Extra CSS:
Throughout the textual content discipline, add the next code:
/* Default state */
button.wc-block-grid__product-add-to-cart.wp-block-button {
background-color: #111111;
colour: #ffffff;
border-color: #000000;
}
/* Hover state */
button.wc-block-grid__product-add-to-cart.wp-block-button:hover {
background-color: #444444;
colour: #ffffff;
border-color: #333333;
}
It will allow you to customise the button’s colours, each in its default and hover state.
Change the category title within the above instance with your personal button’s class title, and add the hex code for every colour you need to embrace. You may as well take away the strains for any colours you don’t need to change.
While you’re achieved, you possibly can preview your website on the frontend to be sure your button seems to be right. Then go forward and hit Publish!
One last word: If all you’re doing is altering the button colours in your WooCommerce website, the above technique needs to be ample. Nevertheless, when you plan to make quite a lot of customized CSS tweaks, we’d counsel creating a baby theme and including your modifications there. It will be sure that your customizations keep in place in case your website’s mum or dad theme is up to date, and you’ll preserve the code of the mum or dad and little one theme individually.
Conclusion
If you’d like to enhance the looks of your WooCommerce retailer or make it extra user-friendly, altering the button colours is a superb place to begin. It’s a fast and easy manner to create a model identification, appeal to consideration, and enhance conversions.
As we’ve mentioned, the simplest technique to change your button colours is to use a extremely customizable WooCommerce theme comparable to Botiga. You possibly can merely navigate to the final look settings to regulate quite a lot of button choices, together with the colours. Alternatively, you possibly can set up a devoted plugin or insert some customized CSS code.
Do you may have any questions on altering your WooCommerce button colours? Tell us within the feedback part beneath!
