Easiest Way To Change WooCommerce Button Color

WooCommerce buttons’ colors are governed by the theme your site is running. By default, WooCommerce does come with some style for their buttons. However, theme makers nowadays usually add their own styling.

In the screenshot below, I have my button with black background:

If I use a different theme, chances are my button’s color is different.

In this post, I’m going to show you the quickest method to change WooCommerce’s buttons color. You can apply this method for other buttons on your site as well.

Let’s get started.

Get the CSS selector of the button

The first step is to get the CSS selector of the button. Open your site in Chrome, right click on the button and select Inspect:

You should see a new window appears. You should see something like this:

That’s is our button, in HTML code.

Now, pay attention to the class part. As I’m in single product page, the button has three classes:

  1. single_add_to_cart_button
  2. button
  3. alt

If the button is at a different page, you may see different classes.

If you know CSS, you should have no problem writing CSS selector for this button.

In case you don’t know, here is the selector:

button.single_add_to_cart_button.button.alt

How do we use this selector? Let’s find out in the next step.

Writing CSS rules to change WooCommerce buttons’ colors

First thing first, let’s pick a color for our button. The quickest way to get a color is to go to Google and search for colorpicker:

Let’s drag the sliders (the round buttons) to select the color you want to use. For example, I pick pink as my button’s background color:

Copy the code starts with # under HEX. That’s the color code we need for our CSS rule.

Now, let’s go to your theme customizer by navigating to Appearance->Customize-> Additional CSS and put the follow code at the end of the code box:

button.single_add_to_cart_button.button.alt {
	background-color: #d92bb3;
	
}

The box should look like this:

Click on the Publish button at the top of the page, then go to the product page, you should see the button’s background is now pink:

woocommerce buttons background color changed to pink

Bonus tip: How to change the button’s text color

In my opinion, white text on a dark pink background looks great. However, what if you don’t like this combination. Maybe you want to have yellow text. How can you achieve that?

Let’s go to the color picker on Google and select a color for your button’s text. Then, enter the following line in the customize->additional CSS box:

color: #f2fc2b;

#f2fc2b is a bright yellow color. Your code in the additional CSS box should look like this:

changing text color for woocommerce button

Then, publish the code again and you should see the result as expected:

button text color is now yellow

What if all of this doesn’t work?

This method works on most themes. However, there are some cases it may not work. Why so? It’s is because some plugins or themes may have stronger CSS rule applied to the button. The CSS people call it rules’ specificity.

If you face such problems, you need to come up with stronger rule, with higher specificity. How can you do that? By preceding the button’s selector with its parents selectors.

Sounds confusing? Yes, it is if you don’t know CSS.

If you don’t want to go through the hassle dealing with writing CSS, let’s try my plugin out. It lets you change button’s color, text, icon… and even the quantity box.

Checkout ultimate add to cart button plugin here.

Conclusion

As you can see, changing WooCommerce button’s color is quite simple. Though, it requires some work with CSS. If you don’t want to work with CSS, try out Ultimate Add To Cart Button Plugin. With this plugin, you can create awesome WooCommerce button in just a few minutes.

#1 Plugin To Customize WooCommerce Related Products

WooCommerce related products, in case you are not aware are the products that displayed at the end of any single product page. By default, WooCommerce get related products for any product by looking for products in the current product’s categories. In addition, products that share the same tag(s) are considered related.

Let’s take a look at the default display of WooCommerce related products in my demo site ( running WooCommerce 3.7.0 & Storefront).

Default woocommerce related products display

In my case here, I’m viewing a dress and the related products are also dressed since they are from the same category.

What if you want to change the products that display in this section. Maybe you want:

  • Show products from different categories
  • Pick some specific products to display in the related product section of this product
  • Set a different set of related products for one or a few products only

Let me show you how to do that with my new plugin BC Ultimate Related Products.

Before we begin, here are the product categories on my demo site:

List of categories

Set related products for a category from other categories

Let’s dig into our first case. For example, I want that when people view products of Dress, in the related products section, products from Jeans and Hoodies are shown.

I know this may not make sense. This is just a demonstration of the way the plugin works.

Let’s go to the BC Ultimate Related Products screen. Here is what we have:

Set related products for a category from other categories

To achieve what we need in this case, we only focus on the first section: Pick related products for category by categories

Here is what we are going to do. First, as we need to set two categories as related, let’s click the leftmost plus sign to add another category select box:

Add new related category

Now we have the structure set up, let’s configure the categories.

As you can remember, we need to display products from Jeans and Hoodies as related products when viewing products from Dress. So, here is the correct setting:

Selecting related product category

Save the settings and view one product from Dress category. Here is what we have:

Related products display correctly

As you can see, we have successfully complete the case. Products from Jeans and hoodies are shown in the related products section.

Let’s try another case.

Select specific products as WooCommerce related products for a category

In this case, instead of selecting categories for related products, we choose some specific products as related products for all products in a particular category.

If that’s sound confusing, let me give you an example.

Take the Dress category again. This time, we want to setup that when visitors view any product in Dress category, they will see three products that we pick.

Let’s get started.

We are going to focus on the second section of the plugin:

Selecting multiple related products for a category

Similar to the above case, we select Dress in the left. However, on the right, it’s not a select box. Instead, it’s a box where you can search products by typing a few characters. There is no limit on how many products you can select.

Let me pick 3 random products for the sake of demonstration.

Done selecting multiple related products for a category

Save the settings and check one product from Dress category again.

Selected products for category display correctly

As you can see, I got exactly three products in picked displayed here in the related products section.

We have one case left, let’s begin.

Pick WooCommerce related products for a single product

For some reason, I want to treat some products specially. For example, I want to select only two related products for the dress we use from the beginning of this post.

Here is how to achieve that with BC Ultimate Related Products.

Let’s focus on the third section of the plugin.

adding related products for a single product

On the left, there is a box where you can search for products and pick one product. On the right, it’s similar to the #2 case. It’s a product search box where you can pick multiple products.

Let me quickly pick two products as related product for the TSE Cashmere… product.

pick two related products for one product

Let’s save the settings and view the product page:

related products shown

As before, we achieved what we planned!

Conclusion

As you can see, this plugin is very helpful when you want to customize related products section for a category or a single products. Please let me know if you have any questions.

How To Randomize Products On Category & Shop Page In 5 Minutes

I recent got a request from a friend of my to randomize the products display on his store’s categories. The reason is his site has so many categories and many of them have parent-child relationship. As a result, the display of many categories are identical.

Let me give you one example. My friend sells furniture. He has one category for indoor decoration (category A) and another for living room decoration (category B). A is B’s parent, obviously. When viewing the category page of B, you’ll see only B’s products. However, when viewing the category page of A, you’ll see category B’s products too. If B has enough products (more than the limit products per page), you may see category A’s page looks exactly like that of B.

Possible solution

We came up with two possible solutions. One is to manually setup the products for each category page. This is time consuming and requires more coding works. The other is to randomize the display of products on every category page so they don’t look the same.

We end up going for the 2nd solution since it’s faster and easier.

How to randomize products in category page

It turned out, the solution is very simple. Simply put the following code at the end of your theme’s functions.php file (make sure to use a child theme).

add_action('woocommerce_product_query', function($q){
	$q->set('orderby', 'rand');
});

Save the file and check your category pages. You should see the products are displayed in different order every time you refresh the page.

This works on shop page too.

What if you want to exclude shop page? If you want to keep the order on your shop page intact, read on.

How to exclude shop page products from being randomized

To exclude shop page, simply replace the code above with this:

add_action('woocommerce_product_query', function($q){
	if (is_shop())
		return $q;
	$q->set('orderby', 'rand');
});

As you can see, I added a conditional tag to exclude shop page. If you know PHP, the code above should be easy to understand.

Conclusion

Randomize products in category pages is an easy way to avoid duplication. This method is not ideal, of course. If you want to configure exact products for each category, you’ll need to get or build a plugin. However, for a quick solution, this one is good.

And my friend is happy.

How To Create Pre-Order Products With WooCommerce

Pre-order products are not something strange to us. We see them all the time. For example, game producers usually let people order their games before the release date.

The main benefit of pre-order products is to get some funding even when the product is not available. For example, you may need a bit of capital upfront to develop the product. Another benefit is to see how much your customers want the product you are making (stocking…) Whatever the reason, pre-order products can be a great option for your store.

How to create pre-order products in WooCommerce

WooCommerce itself doesn’t support pre-orders by default. However, there are many plugins available to help you accomplish this. I’ve tried some and found the one from WooCommerce store itself is the easiest to use. You can get it below to get started.

Get WooCommerce Pre-Orders

Create a Pre-order product

Now I assume that you have WooCommerce Pre-Orders plugin installed and activated. Let’s create a product that enable your customers to pre-order it.

Now, go to Products->Add new and scroll down to product data area, you’ll see there is a new tab called pre-orders:

The details of that tab is quite simple but enough for your to enable a product to be pre-orderable (That’s my made-up word)

I’ll explain the fields briefly since they are straightforward enough:

  1. Enable pre-orders: This is obvious. If you want to enable pre order for the current product, check this box
  2. Availability Date/Time: The date, time that this product is available for the customer to use. It should be the day you deliver the product to your customer
  3. Pre-order Fee: Do you want to charge an EXTRA fee for this pre-oder. Note that this fee will not be deducted from the product price. Most products I see on the market don’t charge a pre-order fee.
  4. When to charge: You can either charge now or charge when the product is shipped to the customer. Normally, stores will charge upfront. However, if you don’t need cash upfront, you can choose to charge later (upon release)

Now let’s quickly fill some details to make a valid pre-order enabled product.

As you can see that, the test product is a simple product that has regular price at $60 and sale price $45. Let’s make a test order.

Making a test order on pre-order product

Let’s click on the pre-order now button and walk through the checkout flow. Note that if your customer has other products in cart, those products are removed since pre-order products must be order separately.

Let’s go to the cart page. You’ll notice that other than an available notice right below the product name, there isn’t any difference from a cart page of normal products:

Let’s finish the checkout. As the admin of the site, you’ll see the pre-order appears in WooCommerce->Pre-orders:

Some cautions

Now you see that creating pre-orders products in WooCommerce is quite simple. However, as I mentioned above, pre-order products must be ordered separately. That means you can’t have two pre-order products in one cart.

You may say that you can use grouped products to group multiple products together. That doesn’t work too.

The only option as I know now is to create a product bundle (you will need another plugin from WooCommerce :O). However, using product bundle doesn’t bring much flexibility. Your customer still can’t order two or more random pre-order products together.

Conclusion

As you can see, with the help of WooCommerce pre-orders plugin, you can create pre-order product quite easily. However, this plugin works best if you only have one product in store (think about a video game that has its own domain) or a store that people will buy products separately. If your customers usually order multiple products including “buy it now” products, this product may not be your choice.

If this plugin fits your need, great! Click here to get it now

How To Add/Remove Sidebar To WooCommerce Shop Page

Customizing WooCommerce shop page is not an easy task, especially for people who don’t know code. However, if you follow this tutorial closely, you’ll have no problem adding or removing sidebar to your WooCommerce shop page. Let’s get started.

Understand shop page template

Your activated theme usually comes with many .php files. Some of them are template files, which the file that tell how content should be displayed on your site.

To display shop page, WordPress first look into your current theme folder to find a file named “archive-product.php”.

If that file is available, then it will use that file to display your shop page.

If that file is not available, WordPress will find a file named archive.php. If the file is found, the search stops and archive.php will be used to display your shop page.

If both archive-product.php and archive.php are not found, then WordPress will use index.php to display the shop page. index.php is available in all serious WordPress themes.

Steps to add/remove sidebar to WooCommerce Shop page

Now, let’s get our hands dirty. Our plan is first, create child theme of your current theme, then activate it. After that, we create a file called archive-product.php in that child theme and customize that file to achieve our desired result.

Step 1: Create a child theme and activate it

If you are not familiar with child themes and don’t know how to create one, I’ve made a child theme tutorial here. Please create one first then come back here when you are that child theme activated. Don’t worry, your current looks and feels of your site is safe.

Step 2. Create the file archive-product.php in your child theme folder

You need to access to your server to get this step done. You can either use FTP or cPanel or SSH to login to your server, navigate to your child theme folder and create archive-product.php file. Then, copy and paste the content from here to that file.

Now, we are ready to either add or remove sidebar from our shop page.

Step 3. Add sidebar to your WooCommerce shop page

If you view your shop page now, you’ll see that it now has a sidebar. Why is that? Because of this part in the template file:

adding-sidebar-to-woocommerce-shop-page

So, if you want to add sidebar to your shop page, you are done. How great is that?

Step 4: Remove sidebar from your shop page

If you want to remove sidebar from your shop page, there are extra works. Remember from the step above, I mentioned that parts that display the sidebar? Well, we need to remove that.

So, I’m going to comment out the the two lines that I underlined red in the screenshot above by adding a double slash at the beginning of the line.

comment out sidebar to hide it in woocommerce shop page

Now save the file and view the shop page, surely you’ll see no sidebar:

sidebar removed from shop page

 

However, if your shop page looks like mine, there are more works to do. We need to make the products fill the width of our page, not leaving a blank space on the right like this.

Step 5: Make the shop page content full width

Now, you need to add some custom CSS code to make the shop page full width. So, the first step is to find the CSS selector of the part that contains the products.

On Chrome, right click on any place on your page and select inspect. If you know CSS, you have no problem finding the container. However, if you don’t know CSS, let’s hover the cursor over the elements in the inspection window (the window appears after you select inspect) until you see this:

finding product list class

This is the right element to pick CSS selectors.

So, in my case, the CSS selector would be:

.product-wrapper.products-list

And here is the rule I put in Appearance->Customize->Additional CSS:

.product-wrapper.products-list {
    width: 100%;
}

If you view your shop page now, you’ll see the products occupy full page’s width.

If this is your desired result, congratulations!

Conclusion

Adding and removing sidebar from WooCommece shop page requires a bit of coding. However, I hope you find the tutorial is easy to follow. If you have any question or need help with your shop page, please leave a comment below.