How To Add Multiple Images For WooCommerce Product Variations

One of the most hard to understand limitation of WooCommerce is the number of a images you can have for product variations. One variation can have only one image:

What if you want to add more images to the variation? Well, bad news is you cannot do that with WooCoomerce’s default functionalities. However, the good news is there is a plugin that let you add up to 2 images for products’ variations (if you are using the free version). If you have the pro version of this plugin, you can add as many images as you want.

Add Unlimited product images to WooCommerce variations using plugin

The plugin we are going to use to day is Additional Variation Images Gallery for WooCommerce. You can download it for free here on WordPress.org

After installing and activating the plugin. You’ll see the effects right away. Let’s go to one of my variable product and open the variations tab. Click on one variation and you’ll see that there is a new button under the default image place holder:

new button to add more images to woocommerce product variation

Now, let me add some images to this product. You need to add the images one by one though. I think it would be more convenient to have the ability to add more than one image at a time.

added images for product variations

As you can see, my product has a “Black” variation and I was able to add 3 images to this one (one supported by WooCommerce and two others I added through the Add Gallery Images button).

Now, let’s view our product:

product variation now has multiple images

As you can see, as soon as changed the color option to Black, I can see the list of images available to that variation. You can add more images to all of your variations.

Some additional settings

I’m not sure about you but I’m pretty happy with the result up to now. However, the plugin offers more options for you to customize in case you have some specific needs. Let’s go to WooCommerce->Settings and you’ll see there is a new tab called WooCommerce Variation Gallery:

new tab to customize variation gallery

All the options are quite self explanatory. If the image slider on the product page is working good for you, then you should not change anything here.

 

Conclusion

This is a very nice plugin to have when you have variable product. The limit one image per variation of WooCommerce is quite limited and in most cases, isn’t enough for store owners. This plugin (free version) allows us to add two more images to the product’s variation. This should be enough for most store. If you need more images, consider upgrading to support the developer. 

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content

WooCommerce Product Attributes Q&A – The Ultimate Guide

What are WooCommerce Product Attributes?

WooCommerce Products Attributes, as the name suggested, are the attributes that products in WooCommerce can have. One product can have multiple attributes as well as many products can share one attribute. Take color as an example. Color could be an attribute of any product. If you sell head phones, your products’ colors could be red, white, black…

Product Attributes vs Product Categories

Sometimes you may wonder, what are differences between product attributes and product categories. The rule of thumb is when if an attribute is distinctive enough, you should make it a category. Attributes are things that products HAVE, categories are groups that products BELONG to. If you sell headphones only and your store only have red, blue, pink headphones then you can categories your headphones according to their colors. If you sell other products too, making color as category doesn’t make much sense. However, the decision is yours.

What are global attributes and product specific attributes

In WooCommerce, there are two ways you can add attributes to your products. Either you go to Product->attributes or in the product edit page, you go to Product Data->Attributes to add new attributes. However, if you choose the first method, you will create global attributes, which means the attributes you created in Product->Attributes are available to all other products. If you choose to go to the product edit page->Product data->attributes, you can create attributes that are available to that specific product only.

So, when you create a global attribute and when to create a product-specific attribute. This is your call. If one attribute is shared among two or more products, it makes senses to make it as global attribute. However, if one attribute that is possessed by only one product, it’s best to make it product-specific.

How to add global attributes in WooCommerce

Creating global attributes is quite simple with WooCommerce. Let’s create an attribute called Color in my store.

  1. In your site’s dashboard, let’s go to Products->Attributes:

go to products then attributes

Now, we are in add attributes screen. You can see that it’s very similar to add post’s categories screen:

There are a few fields here you need to pay attention to:

  1. Name field: This field is required. This is the attribute’s name, in our case is color. This name is visible to your end users so you should make this one user friendly.
  2. Slug: This one could appear in your URL. You can specify this field or let WooCommerce does that for you based on your attribute’s name
  3. Enable archives: Do you want to have a page dedicated to list products that have this attribute? If so, check this box.
  4. Default sort order: What order you want the attributes to displayed in the product page? You can set the order by name (name numeric if the attributes are numbers) or by ID of the attribute. For example, I have 4 colors for the attribute color:

If I set the custom ordering to Name, here is what I see on the product page:

color attribute order on product page

As you can see, the colors are sorted alphabetically.

If you want to customize this order, you can select “Custom ordering”. I’ll show you more about custom ordering in the next section.

Now, let’s click on Add attribute to add the color attribute.

Adding terms for global attributes

Now we have the attribute Color added. It’s time to add the values that it can hold. You can always add more value to your attributes later so you don’t have to add all values at once. In WooCommerce, attributes’ values are called terms. For example, our color attribute can  have Red, White, Blue, Black, Green terms.

Once you have the attribute added, you’ll see there is a link called “Configure terms” appears:

Let’s click on that add add four “terms” for our attributes. They are Blue, Black, White, Red:

Now, let’s go back to talk about the custom ordering of attributes a bit more. As you can see, our terms are ordered by Name or by ID, if you want a different ordering, you need to set the Default sort order to Custom ordering. So, if you want to display the colors in the product page to White->Red->Black->Blue, you need to set the order on this page. Simply click and hold the hamburger icon and drag the items to your desired position:

attribute terms custom ordering

After a bit of dragging, here I have my terms in my desired order:

Now, if I view the product page, I’ll see the colors are ordered from White to Red to Black to Blue:

custom ordering of colors take effects

Adding a product-specific attribute

If your product has a special attribute that only it owns, it’s suitable to use the product-specific attribute. To add a product-specific attribute, simply click on Product data->Attributes:

go to product data then attributes

Now, in the select box, make sure you have “Custom product attribute” selected then click on “Add”. You’ll have a form to enter the attribute details. For example, I’m going to add an attribute called Size with the three possible values: Small, Medium, Large:

adding product-specific attributes

As you can see, I separated the terms (values) by the pipe (|) character. I can either select the attribute to be visible on the product page or not. Check the checkbox if you want to show this attribute on the product page.

If your product is a variable product, you will also see another checkbox “Used for variations”. Check this if you want to create variations based on this attribute.

Finally, click on Save attributes button to save the attribute.

WoCommerce Attributes FAQs

Below, you’ll find answers to some of most common questions regarding WooCommerce product attributes. If you don’t find your questions, feel free to ask.

What to do when WooCommerce stuck spinning ball when saving attributes?

This is usually caused by Javascript error. The best bet is to open the Developer Console (Right click, select inspect/inspect element) and click on Console tab to see the red messages (errors). This error could be the result of:

  1. Poorly coded theme, plugins
  2. Caching plugins that combine and minify Javascript files incorrectly.

You can also try changing your site theme (temporarily) to the Store Front theme from WooCommerce. If the error is gone, you could safely conclude that your theme is the culprit. Otherwise, try deactivating your plugins, one by one (but leave WooCommerce activated) to see which one is the cause of that error.

How To Add Special Symbols (Registered, Trademark…) To Product Attribute

Since WordPress supports Unicode, you can add many special characters to product attributes. In some cases, you may want to add the trademark symbol (™) to the attribute name. Simply copy this character and paste into the attribute’s name input box:

Then, click on Update to save your changes.

Conclusion

WooCommerce product attributes offering more flexibility to your store. They also let your customer search, filter product by specific attributes such as color, size … There is no limit on how many or what kind of attribute you can use on your store.

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content

WooCommerce Featured Products Ultimate Guide

One of the best way to setup a collection of rock-star products in WooCommerce is to set them as featured product. WooCommerce featured products are not different from regular products in terms of features, shipping, functionalities. Any product can be a featured in WooCommerce and the decision is totally up to you (it’s different from best selling products, which are determined by your customers). In this post, I’m going to show you:

  1. Three ways to make a product as featured product
  2. How to remove a product from being a featured product
  3. How can you display the featured products via shortcode
  4. What is the best way to display featured products in a slider

Sounds cool? Let’s get started.

Three ways to make a featured product in WooCommerce

Mark a product as featured product in Products list

The first way to make a product as featured product in WooCommerce is to go to Products->All products:

Most of the time, you can see the column without a title but stars. That’s the featured column. Simply click on the start to mark it as featured product.

When you click on the star, the blank star will be filled and the filled star will be blank:

As you can see, it takes a moment for the status to update since the page need to reload. That’s the quickest way to mark a product as featured product or not.

Oh, I don’t see the stars column!!!

If you don’t see that column (with the stars), simply click on Screen Options button (at the top right of your screen corner) and check the box says Featured:

Make sure you hit the apply button to see the changes.

Mark a product as featured product in Quick Edit

The second way to make a product become featured product is through the quick edit menu. Under every product, you will see the Quick Edit link at the right of Edit link. Click on that and you’ll see this:

Simply click on the Featured checkbox to make it featured product. Uncheck it to remove it from featured products.

Mark product as WooCommerce featured product in product’s edit page

The third and final way to make a product featured product is through its edit page.

In the product Edit page (you get to this page either by click the Edit link under the product in Products page or the Edit product option at the top of the product page), look at the top right (in the Publish box), there is an option called Catalog visibility:

Let’s click on the Edit link under Catalog visibility, you’ll see this:

Well, you probably know what to do next. Simply check the box says: This is a featured product and then click OK.

Display featured products anywhere with WooCommerce shortcode

WooCommerce has as dedicated shortcode for showing featured products, that is: featured_products

Display all features products

To display the list of featured products, you can use the shortcode below:

[featured_products limit="4" columns="2"]

 

What this shortcode does is it will show 4 products in two columns and products are featured products.

Display features products and specify the number of columns

Now, if you want to increase or decrease the number of featured products per row, simply modify the number in the columns field.

For example, you can display all WooCommerce featured products available in your store in 3 columns, you can use the shortcode below:

[featured_products columns="3"]

Simply removing the limit field make the shortcodes display all products.

Display featured products in specific categories

If you want to display the featured products in particular categories only, use category attribute:

[featured_products category="ssd,business-pc"]

As you can see, you can include more than one category by separating them with comma.

Where to place this shortcode? You might ask? You can put this shortcode anywhere in your pages/posts.

 

 

Display featured products in sidebar

With the shortcode, you can display any kind of products anywhere, including in the sidebar. So, I’m going to use the shortcode above (three products, no limit) to put on my sidebar.

Let’s go to Appearance->Widget and drag in a text widget and paste the shortcode in:

display featured products in a sidebar

Now, if I go and view my website, I’ll see the featured products on the sidebar. Since the sidebar is narrow, there is only one product per line and all the products stack one each other to form a very tall column:

woocommerce featured products in the sidebar

At this point, you may wonder if we can display the featured product in a slider so the user can swipe left and right without scrolling very long. Well, of course we can. However, we need a plugin for that. Fortunately, I’ve made a plugin to help you display not just the featured products but all kind of WooCommerce products in a slider. You can checkout the WooCommerce Slider Plugin here

Conclusion

Featured products can offer some flexibility to the way you show your products to your visitors. The good thing about the featured products is you can control what products are featured, unlike best selling products. Using featured products right can increase sales for your store. If you have questions related to this topic, don’t hesitate to leave a comment below.

 

 

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content

The Ultimate Guide To WooCommerce Grouped Products

Alongside simple product, variable and affiliate product, grouped product is one of the four default product type of WooCommerce. Knowing how to use WooCommerce grouped product can help you deliver much more flexible product choices for your customers. In this post, let’s discover what WooCommerce Grouped product is and how it can help you grow your store.

 

What is WooCommerce grouped product?

Grouped product, as its name suggest, is a product that consists of a group of other products. You can think of grouped product as a container of other WooCommerce products. In real life, you see grouped products under the name of combo, set… For example, a BBQ combo may have one dish or tuna, two beer and two dishes of beef. Those individual can be sold individually. However, the guys at the marketing department may suggest that we create these combos to improve sales for our stores.

Why do you want to use grouped product instead of simple product

One good reason to use grouped product is to increase sales of more than one single item as mentioned above. Another good use case of group product is to sell products that usually go together. Computer set is an example. Many times people buy individual parts like monitor, keyboard, mouse… However, the people are very frequently shop for computer set instead of shopping individually.

How to create a grouped product

Creating a grouped product is very simple, especially with WooCommerce. Here are the steps to create a simple grouped product. Let’s go ahead and create a computer set:

First, let’s go to Products -> Add new

create a grouped product in woocommerce

Now, when you change the product type to Grouped product, you will see the field for price and sale price disappear! Don’t freak out. It makes sense since the price of the grouped product is the combination of its children’s price. You will also see the shipping tab disappear for the same reason.

Other than that, you will see that grouped product is similar to simple product. You can enter short description, long description, adding products feature images, gallery images as usual.

enter details for grouped product

After entering all the needed data, it’s time to publish the grouped product and have a look at its product page:

woocommerce grouped product

You may notice that there isn’t an add to cart button. The reason is simple. There isn’t anything to purchase yet. The next step is to add child products to this grouped product.

 

How to add single products into  a grouped product

Adding single products to a grouped products is simple. You need to make sure that you have all the individual products ready first. In this example, I have four simple products ready to add as below:

simple products in a grouped product

 

Now, let’s go to our newly created WooCommerce grouped product, then scroll down, click on Product data tab if it hasn’t been expanded already. Finally, click on Linked product:

adding simple products to grouped products - step 1

Now, let’s click on the Grouped products input box and start typing the product name. You will see the suggestions as you type:

adding simple products to grouped products - type suggestions

As you can see, as I typed UHD, the suggestion for the screen appear. Just click on the result to have it added to the grouped product.

After add all the products to the grouped product, you will see it appears like this:

adding simple products to grouped products - step 3

Hit the update button and let’s see the grouped product page:

woocommerce grouped product with child products

As you can see that, all child products are listed here. For the customer, he just need to enter the number of items per child product and begin to check out.

But wait!

Isn’t it silly to make the customer enter the number of parts when most of the time, the number should be 1?

You only need

  • one monitor
  • one keyboard
  • one case

per computer.

Well, if you ever wonder the same thing, you may want a different type of product called product bundle.

 

 

Use variable product in grouped product

At this point, you now how to create a grouped product and add single child products to that grouped product. You may wonder, can you add variable products to the grouped product instead of simple products? The answer is yes. However, without using any plugin, you may end up with something like this:

variable product inside grouped product

When you click on the select options button, you will get the that variable product page and you add the product to cart from that variable product’s page.

I’m not sure about you but that flow is not convenient for the customer.

So, it’s definitely possible to use variable product inside grouped product. However, in my personal opinion, it is not very convenient for your customers to go to extra steps to add the product to cart.

Ordering child products inside grouped product

In my example, you can see that the Samsung monitor is listed first then the case, then the keyboard and finally the mouse. You may wonder, how does WooCommerce sort these products and how can  you change their order?

For example, I want to list the mouse first, then the keyboard, then the monitor and finally the case, how can I do that?

It actually very simple.

Now, go to our grouped product and go to Product Data->Linked products:

You’ll notice the child products are in a list. You maybe surprised to find that every items on that list is draggable!

So, let’s re-arrange our child products:

After clicking on update product, I can see the product page with new ordering:

new products order in woocommerce grouped products

Show images for single products

At this point, your WooCommerce grouped product is looking good. However, you may notice that individual products in the grouped product don’t have product’s image. What if you want to add the products’ thumbnail just before the product name?

It’s time to add some code. You know where to put the custom code? In a child theme, of course. You must remember to add additional code in a child theme. You don’t know what a child theme is? Check out my ultimate guide to child theme in WordPress. Don’t worry, it’s short.

Now, let’s enter the following code at the end of your child theme functions.php file:

add_action( 'woocommerce_grouped_product_list_before_label', 'bc_woocommerce_grouped_product_thumbnail' );

function bc_woocommerce_grouped_product_thumbnail( $product ) {
    $attachment_url = wp_get_attachment_image_src($product->get_image_id(), 'thumbnail', false)[0];
    ?>
    <td class="label">
        <img src="<?php echo $attachment_url; ?>" />
    </td>
    <?php
}

Then save the file. Now, if you view the grouped product page, you’ll see this:

display single product thumbnail in grouped product with woocommerce

It looks better, doesn’t it?

Now, what if you want to display the thumbnail before the quantity box?

No problem, let’s replace the old code with this one:

add_action( 'woocommerce_grouped_product_list_before_quantity', 'bc_woocommerce_grouped_product_thumbnail' );

function bc_woocommerce_grouped_product_thumbnail( $product ) {
    $attachment_url = wp_get_attachment_image_src($product->get_image_id(), 'thumbnail', false)[0];
    ?>
    <td class="label">
        <img src="<?php echo $attachment_url; ?>" />
    </td>
    <?php
}

The only change is the part after add_action. In the previous code, the text right after the opening ( is ‘woocommerce_grouped_product_list_before_label’. Now it is: ‘woocommerce_grouped_product_list_before_quantity’

As you can guess, the thumbnail is now at the beginning of the row:

product image before quantity box in woocommerce grouped product

Conclusion

I hope you feel more comfortable with grouped product now. Grouped product is great for grouping simple products together in WooCommerce. You can use variable products in WooCommerce grouped products. However, due to the inconvenient checkout flow as shown above, I would suggest you use simple products only. You can also search for a plugin that  let you select the variable product right on the grouped product page. Doing so will greatly improve the customers’ experience on your website.

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content

The Ultimate Guide To Adding Products To Cart Using Ajax In WooCommerce

Working with WooCommerce brings me a lot of joy. If you are a developer, I hope the experience I’m sharing below will be helpful to you.

How to add a simple product to cart using ajax

Adding a simple product via ajax is very simple. From any page, you send the following request, via POST or GET:
{
add-to-cart: product_id,
quantity: x
}
So, for example, I have my product here which has ID 30: woocommerce-simple-product Now, if I want to add this product to cart, I simply append the following data to any URL of my website:
?add-to-cart=30&quantity=2
In this example, I’m going to add two products to cart. For example, I append the string above to the cart url, which makes the full URL like so:
http://localhost/wordpress/cart/?add-to-cart=30&quantity=2
If I open that URL in my browser, I will be redirected to cart page and the product will be in cart. Cool, isn’t it 🙂 Now, simple product is simple. How about variable products? I requires a bit more work.  

How to add a variable product to cart using ajax

With variable product, you need to find the variation ID to add the exact product you need to cart. If you use the parent product ID, you may see an error, which is not surprised at all. Let me show you. I have this product: woocommerce variable product As you can tell from the product page, it’s a variable product (select boxes to select the variations, price in range). Now, the product id is 31. If I execute the following URL:
http://localhost/wordpress/cart/?add-to-cart=31&quantity=2
You’ll see this error: It is not hard to understand, right? Since the product is a variable product, you will need to find the variation ID. Where to find the variation ID? Let’s do an inspection, shall we? If you right click on one of the select boxes (to select variation) and click on inspect (on Chrome), you’ll see this: As you can see, our select box is inside a form. That form has an attribute called data-product_variations . This attribute contains the JSON data of all variations of our product. Let’s extract the data using jQuery. extract variable product data in woocommerce as you can see that, I select the form with the selector .variations_form.cartif you know jQuery or CSS selector, this part shouldn’t be strange to you. I was able to extract the JSON string from the attribute data-product_variations and turned that into javascript object using JSON.parse. Now, you can see that the data is an array contains 4 elements. Since my product has two attributes “Color” and “Size”, it’s not surprising that there are 4 variations. Let’s expand one of the 4 variations and see what we have: There are a tons of data and surely you’ll see the variation_id is 150. That’s all we need to add this product to cart. Now, let’s navigate to this URL:
http://localhost/wordpress/cart/?add-to-cart=150&quantity=2
Sure enough, the product is added to cart. successfully add variable product to cart using custom URL Interesting, right? Now, you are able to add simple and variation products to cart, which is great. However, if you notice the cart at the navigation bar. It’s not updating if you send the requests via ajax. How can you fix that?

How to add products to cart and update the cart widget(at the navigation bar)

To add the products to cart and then update the cart widget, you’ll need a different approach. At least, you need a different URL to send the request to. Are you ready? You still can send the request to any URL of your site, however, this time, you need a new parameter:
?wc-ajax=add_to_cart
Let’s open the browser’s console and enter the following data:
jQuery.post('http://localhost/wordpress/cart/?wc-ajax=add_to_cart', {product_id: 150, quantity: 10}, function(response){ console.log(response); })
We are going to print out the response from the server. It contains some very useful data that let us update the cart. Now, hit enter then wait a second and this is what we got back: The most important piece of data is the fragments. It is an array of objects. The key of each object is the css selector of cart-related element and the value of that key is the HTML content of that element. Updating the cart now should be trivial. Consider it’s your homework 😉

Conclusion

As you can see, adding WooCommerce products via ajax is quite simple. With the knowledge you gain from this post (hopefully), I hope you can use it and make some awesome applications.      

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content