How To Change Your WooCommerce Store Appearance

With simple codes & no plugin needed

Here’s how you do it

On the menu bar go to

Appearance > Customize > then you will be on the live editing page

> select Additional CSS at the very bottom on the menu bar 

Adding your code here will change your theme. It will do all the same as when you use the Simple CSS plugin.

So this post will be the compilation of the codes that you need to change the theme color of your shop with WooCommerce.

I’ll be listing it down below.

When you need it, you can always come back to this page and get these codes to set up your shop (now you’re a completely independent writer/author). Because you don’t have to sell your book or product only on Amazon or other platforms. I can now sell on your own website + together with other platforms if you like. How cool is that!

Change a Sale Badge color

.woocommerce span.onsale {

background-color: #eb4731;

color: #ffffff;

}

Change “ADD TO CART” button color

(I use black, gray color here. You can change to other colors if you like)

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

background-color:#1F1F1F !important;

color:white !important;

text-shadow: transparent !important;

box-shadow: none;

border-color:#FF9900 !important;

}

.woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover {

background-color:#1f1f1f !important;

color:white !important;

text-shadow: transparent !important;

box-shadow: none;

border-color:#FF9900 !important;

}

.woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {

background-color:#1F1F1F !important;

color:white !important;

text-shadow: transparent !important;

border-color:#FF9900 !important;

}

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

background-color:#1F1F1F !important;

box-shadow: none;

text-shadow: transparent !important;

color:white !important;

border-color:#FF9900 !important;

}

Change the Price color

.woocommerce-Price-amount.amount {
color: #1F1F1F;
}

Change the underline + the line-through color (on the price)

/* WooCommerce Price (Regular Price) */

.woocommerce div.product span.price del, .woocommerce div.product p.price del, .woocommerce #content div.product span.price del, .woocommerce #content div.product p.price del, .woocommerce-page div.product span.price del, .woocommerce-page div.product p.price del, .woocommerce-page #content div.product span.price del, .woocommerce-page #content div.product p.price del, .woocommerce ul.products li.product .price del, .woocommerce-page ul.products li.product .price del, .product-price del, .woocommerce ul.cart_list li .quantity del, .woocommerce-page ul.cart_list li .quantity del, .woocommerce ul.product_list_widget li .quantity del, .woocommerce-page ul.product_list_widget li .quantity del {

color: #777777;

font-size: 0.85em;

text-decoration: line-through;

}

/* WooCommerce Price (Sale Price) */

.woocommerce ul.products li.product .price ins, .woocommerce-page ul.products li.product .price ins, .woocommerce div.product span.price ins, .woocommerce div.product p.price ins, .woocommerce #content div.product span.price ins, .woocommerce #content div.product p.price ins, .woocommerce-page div.product span.price ins, .woocommerce-page div.product p.price ins, .woocommerce-page #content div.product span.price ins, .woocommerce-page #content div.product p.price ins, .product-price ins, .woocommerce ul.cart_list li .quantity ins, .woocommerce-page ul.cart_list li .quantity ins, .woocommerce ul.product_list_widget li .quantity ins, .woocommerce-page ul.product_list_widget li .quantity ins {

color: #333333;

text-decoration: underline;

}

Remove underline on the Price

.woocommerce ul.products li.product .price ins, .woocommerce-page ul.products li.product .price ins, .woocommerce div.product span.price ins, .woocommerce div.product p.price ins, .woocommerce #content div.product span.price ins, .woocommerce #content div.product p.price ins, .woocommerce-page div.product span.price ins, .woocommerce-page div.product p.price ins, .woocommerce-page #content div.product span.price ins, .woocommerce-page #content div.product p.price ins, .product-price ins, .woocommerce ul.cart_list li .quantity ins, .woocommerce-page ul.cart_list li .quantity ins, .woocommerce ul.product_list_widget li .quantity ins, .woocommerce-page ul.product_list_widget li .quantity ins {

text-decoration: none;

}

Remove a Sale Badge

/*Hide WooCommerce On Sale Badge*/

.woocommerce span.onsale {

display: none;

}


Here is the finished look of my store (before/after)


Personal experience

I don’t want to say that the internet is everything. But I learned many important things from the internet.

Today I taught myself to set up my shop on my website (you can find the tab ‘Shop‘ to see how it looks on the top menu bar.

I use WooCommerce plugin. It’s quite simple to set up (install, activate, put your product, set the price, and now you got it.)

Usually, you can change the look of your store page, button, text, and sale badge colors using Elementor plugin. (The best theme is the Storefront, which will be easy to work on.)

But I don’t like using Elementor because it slows down my website while working. And the Storefront is not suited to my blogging style.

I want to continue using my current theme. So I have to find another way to change the look of my store without changing my theme and no Elementor plugin.

But why do I have to change it anyway? 

Well, this is the picture of the original store with the WooCommerce default setting. 

Default setting by WooCommerce

I don’t want to say it’s ugly but I don’t like it.

It shows the green sale badge + green price with the purple button. (Which are not very nice green + purple tone)

It’s too many colors on one page.
Plus, my book cover is already colorful. So I want something more simple, plainer.

The problem is WooCommerce does not have the function to change all this without Elementor. I needed to find another way to do it.

First, I learned that you need to add a Simple CSS plugin, and then add code to it (Appearance > Custom CSS > write your code). That worked well.

However, adding more plugins slows down my website. So I deleted the plugin and found a simpler way to do it as I showed you in this post.


Thanks for reading!

Find me on Twitter

Resources: