Category: WooCommerce Design

Posted on by — 2 Comments

Easiest Way To Change WooCommerce Button Color in 5 Minutes

WooCommerce button 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:

change woocommerce button color

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.

Steps To Change WooCommerce Button Colors

Changing WooCommerce button colors requires some

Step 1: 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:

Inspect the button to get its class

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

The default add to cart button in the inspector

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 CSS selector:

button.single_add_to_cart_button.button.alt

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

Step 2: 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:

Get the new color for the add to cart button

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:

Easiest Way To Change WooCommerce Button Color in 5 Minutes 1

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:

Easiest Way To Change WooCommerce Button Color in 5 Minutes 2

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.

Posted on by — 3 Comments

How To Add Extra Text To WooCommerce Price Field Without Using A Plugin

woocommerce customize price field

By default, WooCommerce only shows the price of the product on the product page (a long with the currency symbol). In most case, this info is enough. However, there are cases you want to add some extra details to the price field. For example in the case below, you want to add “per kg” after the price:

woocommerce add extra text to price field

If you think that you can enter text into the price field of the product, you will be surprised to find out that is not possible. We can only input number in the price field of the product. This is for a good reason.

So, what can you do?

The easy way to add extra HTML content to WooCommerce price field, without using a plugin

Let me show you how to achieve this. First, you will need to create a child theme. If you don’t know how, read my post on how to create child theme here. It’s short and to the point.

Why do you need a child theme? It’s because we are going to add some custom code and using child theme is the best way to add additional code to your WordPress website.

Now, let’s go to Appearance->Theme Editor and select the functions.php file of your child theme. Make sure it’s the active theme.

Here is the code we are going to add at the end of the file:

add_filter( 'woocommerce_get_price_html', 'binary_carpenter_add_extra_price_content', 10, 2 );
add_filter( 'woocommerce_get_variation_price_html', 'binary_carpenter_add_extra_price_content', 10, 2 );

function binary_carpenter_add_extra_price_content($price, $product)
{
  return ($price) . " per kg";	
}

Or, what is it look like on my site:

adding custom code to add extra content to woocommerce price field

And that’s done! That’s how I added the “per kg” text after the price. Make sure you don’t forget the dot (.). Without it, the code will not work.

As you can see, you can add the text before or after the price. It’s all depend on you.

Conclusion

This is a quick method to add additional text to the price field on your WooCommerce product page. This method is suitable for a quick fix or a store that have few products, or that all the products share a common way to calculate the price. The text you add here will appear on EVERY product page so be careful when you use this method.

If you want a per product approach, it’s probably best to use a plugin. If you need for advanced functions that the plugin I mentioned doesn’t cover, please let me know.

Thanks for your interest in the post. Have a good day!

 

 

Posted on by — 10 Comments

How To Customize WooCommerce Shop Page In 5 Minutes Without A Plugin

How To Customize WooCommerce Shop Page In 5 Minutes Without A Plugin 3

Want to customize the shop page using page builders such as Elementor, Beaver? Check this guide out.

WooCommerce shop page is like a category page in WordPress, there is no built in tool (like the editor) to customize its look. If you have been trying to customize WooCommerce shop page without any success, you are at the right place.  At the end of this post, you will know everything you need to customize your shop page to your liking. Let’s get started.

Here are the steps we are going to do to customize the shop page:

  1. Create a child theme of your current theme (if you haven’t)
  2. Create the folder structure for the WooCommerce shop page template in your child theme
  3. Creating content for your WooCommerce shop page

Create a child theme of your current theme (if you haven’t)

Creating a child theme is necessary to customize woocommerce shop page. Actually, if you want to do any customization to your theme or other plugins (such as WooCommerce), create a child theme. It is the safest way to add functions or change styles in WordPress. Creating a child theme isn’t hard. I’ve made a tutorial here so you can follow easily. It will not take you more than a few minutes to read:

Step by step guide to create child theme in WordPress

Create the folder structure for the WooCommerce shop page template in your child theme

IMPORTANT! Your editing interface might be different to what I’m showing here. However, the files are under yoursite/wp-content/themes/your-theme

So I assume that you have created the child theme. In this example, I’ll use a child theme that I’ve created for storefront. The theme folder is storefront-child-theme:

create child theme folder

Let’s navigate to the theme folder and create a folder named woocommerce:

create woocommerce folder inside child theme

Inside that folder, we are going to create a file called archive-product.php

create shop page templete in woocommerce folder

This archive-product.php is the WooCommerce shop page template file.

Now, if you have followed and done all the steps mentioned above (with the child theme activated), when you visit your shop page, you should see a blank page.

Congratulations, you have successfully customized your WooCommerce shop page.

Creating content for your WooCommerce shop page

Now, it is totally up to you to customize the design of the shop page. If I open the file archive-product.php in a text editor and put the following content:

<h1>Hello this is the shop page</h1>

Then, if I go back to the shop page, sure enough, I’ll see this:

example text on the shop page

It doesn’t look really attractive though. If you are confident in your design and HTML skills, you can stop reading here and start working on your shop page. However, if you just need something that has similar layout to your post’s and allows you to control the products that display on it, read on.

Create shop page template from post’s template

Now, let’s see how quickly you can customize your store shop page using your post’s template. Let’s go to the parent theme of the child theme you’ve created and copy a file named single.php. If that isn’t available, you can copy index.php instead. In my case, I have both single.php and index.php available so I’ll choose single.php.

List of templates file in wordpress theme

Let’s go to our child theme folder, paste the file into woocommerce folder:

paste the single file in woocommerce folder

Now, let’s delete the archive-product.php file and rename the single.php file to archive-product.php. Basically, we’ve replaced the archive-product.php file with the post’s template file.

If I go to the shop page now, I’ll see something like this:

new shop page design from post template

The products are listed basically displayed as posts are.

We are going to use the power of WooCommerce shortcodes to make it looks like a real shop page. You can grab woocommerce shortcodes here to match your need.

So, for example, I want to display products from all categories in 3 columns, 12 products max. The shortcode will be:

woocommerce product shortcode

But where do you put the shortcode? In the archive-product.php file of course.

Let’s open archive-product.php file (inside your child theme folder/woocommerce). Different theme has different structure. This is mine:

content of archive product

You should delete the part between <main and </main. Then, put the following code right at the position of the code you deleted:

How To Customize WooCommerce Shop Page In 5 Minutes Without A Plugin 4

The content of archive-product.php looks like this:

display the woocommerce shortcode in the shop page

Save the file and go to the shop page, here is what I got:

customize woocommerce shop page

You can see, it looks a lot like a shop page now. If you know HTML, you can add additional code in to make the page more lively. In my experience, I just need to play with shortcodes to accomplish my desired design.

Conclusion

That’s it! That’s how you customize WooCommerce shop page. As always, I hope you find the tutorial helpful. Don’t hesitate to ask if you have questions.

Posted on by — 10 Comments

How To Disable Magnifying Glass Effects On WooCommerce Products’ Images Without Using Plugin

If you go to any stores, you can find that if you hover the product’s images, there is a magnifier appears to help you view the products better (the product image is zoomed in so you can see a specific area better). WooCommerce supports this feature too. However, I personally don’t like the default effects of WooCommerce:

Original image:

woocommerce original image

Product image on hover:

woocommerce with magnifier when hover

So, if you are like me, you may wonder: how can I disabled product zoom feature in woocommerce?

How To Disable Magnifying Glass Effects On WooCommerce

Disabling the zoom effect in WooCommerce is quite simple. However, you need to do something first.

First thing first, create a child theme if you haven’t got one

If this is the first time you’ve heard of WooCommerce child theme, let me introduce it quickly. A child theme is an extension of your current theme that lets you add additional functionalities to your site without changing your current theme’s code. Why is it beneficial and how to create one? Check out my post on creating child theme here.

Now, I assume that you have created and activated the child theme. However, if you are in a rush, you can proceed without one.

All you need to do is to go to Appearance -> Editor and put the following code at the bottom of your functions.php file

add_action( 'after_setup_theme', 'bc_remove_magnifier', 100 );

function bc_remove_magnifier() {
remove_theme_support( 'wc-product-gallery-zoom' );
}

If you view the product image now and hover over the image, the effects are now removed.

Conclusion

As you can see, if you don’t like the default behavior that WooCommerce gives to products image on being hovered, removing it is quite simple. This tip is also useful if you are making a custom plugin to add a better magnifying effect to the products’ images.

Posted on by — Leave a comment

How To Change Add To Cart Button Styles In WooCoommerce With Free Plugin

How To Change Add To Cart Button Styles In WooCoommerce With Free Plugin 5

The WooCommerce add to cart buttons are often designed by the theme developer. Sometimes, the default button styles provided by the theme doesn’t suit your need. That’s when you need to do something to change the add to cart button styles. But how?

Customize your add to cart button using plugin

We are going to use a plugin called  Ultimate Custom Add To Cart Button to customize the buttons on your WooCommerce store. This is the plugin I develop so I would love to have your feedback. The plugin is free to use and there is a pro version available here which has additional cool features (Which also has a $20 discount at this time).

Now, we are going to learn how to customize the add to cart button for your site.

Change the add to cart text

I have covered how to change the add to cart, read more, view products… text on the buttons in this post. You can have  a look at that for more details.

Add shopping cart icon to the button

We are going to add the cart icon to the add to cart button. As you can see now, my buttons don’t have any icon.

add to cart button without an icon

Now, we go to Ultimate ATC Button to add a cart icon to that.

I’m going to use a shopping cart icon. So, I enter the text shopping and you can see that, the list of suggestions shows:

How To Change Add To Cart Button Styles In WooCoommerce With Free Plugin 6

I select the last option, fa-shopping-cart and scroll down to the bottom then click on save changes.

Now, if I reload the product page, I will see the cart icon in the button:

add to cart button with shopping cart

Change button’s background color and text color

With this plugin, you can easily change the background color of the button too.

change add to cart button background color

The options are straightforward. You can pick whatever color you want for the button’s background. For example, I’m going to use the blue color for the button:

select color for the button

Now, I click on save changes and view the results:

view button color changed

As you can see, the text color doesn’t work really well with this background. You can change that too with the text color option in the plugin:

 

 

 

How To Change Add To Cart Button Styles In WooCoommerce With Free Plugin 7
change add to cart button’s text color

If I reload the product page, I can see the text color has changed:

button text color has changed

If you are using the pro version, you can change the background to use a gradient or an image too.

Change button’s padding and margin

The last section in the plugin allows you to customize the add to cart button’s padding and margin. You can enter your desired values here (in px) to adjust the button’s style. For example, I set the margin and padding for the button to 20px as in the image below:

change add to cart button padding and margin woocommerce

Now, if I view the product page, the button has changed accordingly:

add to cart button changed padding and margin

In addition to let you change button’s styles, you can do the following in the pro version:

  • Set an image as the buttons’ background. That means you can use an image to replace your add to cart button
  • Remove the up and down arrows in the quantity input box
  • Completely change the style of the input box (add plus and minus buttons to increase and decrease order’s quantity)

Click here to find out more about Ultimate ATC Buttons PRO

Change the add to cart button’s styles with CSS

As the time I write this post, almost all themes support a section called Additional CSS (You can access this panel by clicking on Appearance->Customize). This is the place you can add additional CSS to your site. If you know CSS and confident in your CSS skills, it’s not a big problem to add background color, hover color or even gradient on the background. The important thing is to get the selector of the button. The trick is to use the inspection tool of your browser.

Let me show you how:

As you can see, if you know a bit of front end web development, this is the easiest way.

 

However, not all people can do that. I would recommend you use my plugin above to achieve the designs much quicker and easier.

Conclusion

As you can see, there are quite many options for you to change to tweak the styles of the button. If there are settings you need that aren’t available in the plugin, please let me know and I’ll add that to the plugin.