Posted on 2 Comments

Create Custom WooCommerce Thank You Page Using Page Builder (Elementor, Beaver, Visual Composer, Divi)

The thank you page (order received page) is the page that your customers see after placing an order. They are not visitors anymore, they are already customers. If you are leaving your thank you page as default, you may miss a chance to make more sales. In this post, I’m going to help you create custom WooCommerce thank you page using page builders that you love (Elementor, SiteOrigin, Beaver, Divi, VisualComposer, WP Lead Plus X…)

There are plugins out there, however, from the ones that I tried, none provide Page Builders integration.

How to create custom WooCommerce thank you page

It turned out, create custom thank you page for all products, for each product or for every product in a particular category isn’t an impossible task. The idea is is to create the content of the thank you page first and then when the product get purchased, the customer will be sent to that thank you page with the details from their recent purchase.

I hope it makes sense to you. Let’s see how to create multiple WooCommerce thank you pages. After this tutorial, you’ll be surprise of how simple it is.

Step 1: Download and install WooCommerce thank you page plugin

This is the easiest step. You can download the WooCommerce thank you page plugin here and install it as normal WordPress plugins. After that, let’s go to step 2.

Step 2: Create WooCommerce thank you page using page builder

Page builders have made the task of creating pages on WordPress an easy task. So, pick your favorite page builder and start creating a page right away. You can name the page however you like. Make sure it makes sense when you show it to your customer after the order confirmed.

I’m going to use Elementor in this case. However, you can use Visual composer or Divi or any tool that you have.

Before we begin, you may ask: How do I enter order-related data to the page, for example:

  • List of products
  • Billing address
  • Shipping address
  • Customer name

Don’t worry, the plugin comes with a list of useful shortcodes here that let you fill all the data you want from the order.

Here are some example:

To display:

  • Customer’s name, you enter:
    [bctk_formatted_billing_full_name]
  • Customer’s billing address:
    [bctk_formatted_billing_address]
  • List of items and price in the order:
    [bctk_order_details]
  • And so on..

Let me give an example in Elementor. In the builder, I entered the following data in the thank you header:

enter thank you page shortcode into page builder

Then, when the customer makes an actual purchase, his name is displayed instead of the shortcode:

the shortcode get replaced by actual order content

It’s cool, isn’t it.

OK, so let me finish the thank you page and assign it to my products. Here is my thank you page:

custom WooCommerce thank you page

As you can see, the page has some shortcodes entered. The shipping address and billing address sections actually have shortcode but Elementor is smart enough to display the content instead of the shortcodes.

You also see that I have a section called People also buy. You can put extra products here to encourage the customers to make more purchase. Many people has confirmed that this tip alone has increased their revenue up to 40%.

Step 3: Assign the page built by page builder to products

This is the last step. Now, I’m sure you have BC Woo Custom Thank You Pages installed and activated. If you haven’t, do it now.

Go to the plugin’s dashboard by click on Binary Carpenter->Woo Custom Thank You Pages:

woo custom thank you page

Click on that menu item, you’ll see a very simple dashboard:

woocommerce custom thank you page settings

There are three separate sections.

  1. The first section is for you to set a general thank you page for all products. This page will replace the default order-received/thank you page for all products. Leave this blank if you don’t want to set that.
  2. If you want to set thank you pages by categories, you can go to section 2. Look at the right, there are buttons (+/-). That means you can add more rows to specify different thank you pages for different categories (cool?)
  3. This is where you set thank you page for single products. Similar to section 2, you have the buttons to add and remove options.

So, you can guess, the third section has the most power then the second and then the first.

That means if you have a product that has a thank you page set for it (in the section 3), then that would be its thank you page.

If the section 3 is not set and the product’s category has a thank you page set in section 2, then the page set in section 2 would be the thank you page.

and so on.

When the order has more than one product, the first product is taken into account to get the thank you page. This is very important.

Now, click on save changes and let’s make a test order.

Step 4. Make a test purchase to test the thank you pages.

I’m going to make a purchase on 2019 Dell Optilex. As you can see, we have set a thank you page for this particular product in section 3. After completing the purchase, I see this:

custom woocommerce thank you page for single product

As you might expected, the site now shows the thank you page we created before. That means everything works.

Video tutorial for BC Woo Custom Thank You Page

If you have time, please watch this video that I made to demonstrate the way the plugin works. It’s almost 20 minutes but you can speed up since I spoke quite slowly:

Posted on 1 Comment

How To Enable Search Products By SKU, Tags, Categories In WooCommerce

search box woocommerce

The product search function comes with WooCommerce is often enough for most stores. When you enter a search term in the WooCommerce default search box, if the search engine finds a text match in title or in content, the result will return.

However, what if you want to search products by SKU, tags or catetgories? With WooCommerce default search function, you are out of luck.

The good news is, there is a good plugin that let you add SKU, tags, categories to the product search. It works with most themes too.

So,  how to add the new search power to your site? Let’s find out.

Step 1: Install Advanced Woo Search

The first step is to install a plugin called Advanced Woo Search from WordPress.org repository. You can download it here.

The other method to install this plugin is to search for Advanced Woo Search from your Plugins->Add new panel. At the time of this writing, it’s at the #1 position:

searching for advanced woo search in plugins add new

After installing and activating the plugin, you’ll see its menu appears on the left:

advanced woo search menu item

Step 2: Configure Advanced Woo Search’s options to enable advanced products search on your site

click on that and we’ll get to the main configuration screen:
advanced woo search options first screen

How To Enable Search Products By SKU, Tags, Categories In WooCommerce 1

Here are the most important settings you need to pay attention to:

1. Re-index table: You need to click on this, wait for a while for the process to complete

index products for advanced search

2. Clear cache: As you first use the plugin, this button doesn’t hold much importance. However, it’ll be useful later.

3. Seamless integration: I would recommend set this option to On simply because it will enable the search functions for the existing WooCommerce search box. However, some themes may implement their own search functions so this is not guaranteed to work on all themes.

4. Cache results: Caching will make the search faster if the same term is searched over and over.

5. Sync index table: This option will update the index every time your products are updated. This will help bring fresh results. However, if you notice your site’s performance decrease, you should leave this off.

6. Search in: This is the most important feature of this plugin. It enables you to search in SKU, category, tags (fields that are not supported in WooCommerce’s default search function). You can even exclude title, content, excerpt from the search field if you want. However, I don’t see much sense in doing so:

add fields to search when searching for products

7. Show out of stock: This is self-explanatory. Do you want to show out of stock items? If yes, select show.

8. Stop words list: Stop words are words that have little to no meaning and should be exclude from search. You can add or delete words from this list. Make sure to re-index (1.) after changing the text in this box.

9. Do you want to use Google Analytics to track search? If yes, click On. However, you need to setup your Analytics account if you select On for this option.

Now, you are done with 90% of the work. Click on save changes to save your options.

At this point, you can go ahead and try the search function on your site. If you choose seamless integration, you could see the result right away. Let me demonstrate:

Before I have the Advanced Woo search’s seamless integration enabled. I couldn’t search for SKU. For example, I have a product that has SKU is SNK111. Without seamless integration, I couldn’t find the product:

woocommerce default search failed on sku search

Now, with the plugin Advanced Woo Search enabled and seamless integration On, I can search for products with SKU:

search successful with advanced woo search

The plugins does provide other tabs for users to customize the search function further and I encourage you to try those tabs out. The options are very straightforward and easy to understand.

Step 3: Add the Advanced Woo Search widget to your sidebars so your customers can use the advanced search option

If you have used WordPress for a few weeks, I think you don’t have a problem adding widgets to the website’s sidebar. In case you don’t know, let’s go to Appearance->Widgets:

How To Enable Search Products By SKU, Tags, Categories In WooCommerce 2

Simply drag the AWS widget to the position on the sidebar you want to show the search box and click on Save. You now have a search  box that is way more powerful than WooCommerce’s default.

 

Conclusion

As you can see, WooCommerce’s default search function stop at searching through text in title and content only. If you want to search a product by tags, by categories or by SKU, you need plugins like Advanced Woo Search. As a free plugin, it allows you to extend the search function, add stop words (words to ignore) and custom design your search box. That’s is great and I think it’s enough for most stores. If you need for more features, consider upgrade to the pro version. (I have no affiliation with the author).

Posted on 5 Comments

How To Quickly Add Cart Icon On Your WooCommerce Site Navigation Bar

How To Quickly Add Cart Icon On Your WooCommerce Site Navigation Bar 3

Nowadays, almost all WooCommerce theme has the support for the cart icon on menu. However, what if your theme doesn’t support WooCommerce extensively? What if it lacks the cart icon on the navigation menu? Don’t worry, you don’t have to change your theme. There is a plugin for that.

Here are the steps you need to do to get the cart icon on your navigation menu:

  1. Check if you have a menu created
  2. Check the location of your menu
  3. Install and activate  WooCommerce Menubar cart plugin
  4. Add the cart icon to your navigation bar

Without further ado, let’s get started.

Check if you have a menu created

Creating a menu is one of the tasks that you do first when creating your site. However, speaking from my personal experience, many times I use the default menu that WordPress provides, that is the list of pages on my site. To be honest, sometimes it’s all I need. However, as we are going to display the cart icon on our navigation bar, we need to have at least one menu.

So, let’s go to Apperance->Menus:

no menu available in wordpress

As you can see, I don’t have a menu on this site. So, let’s create one.

I’m going to quickly create a menu here so we can get on display the cart icon on my site’s navigation bar. So, I’ll enter the menu name and click on Create Menu:

create a menu in wordpress

Now I have a menu. You may think that we are done here with the menu. However, there are a few things we need to do. First, it’s to add some items to the menu. I’m going to add the Cart, Shop and Checkout page to the menu:

add woocommerce page to the navigation menu

After clicking on Add to menu, I got my pages appears on the menu. Let’s click on Save menu to save the changes.

The last step is to set this menu to the top navigation position. Let’s click on Manage Locations. The number of navigation menu locations depends on the theme. As I’m using StoreFront, I have three locations as shown below.

available navigation locations on wordpress theme

I want to set the menu to the Primary Menu location only. So I click on Select a Menu and select the menu I’ve just created. I click on Save changes when all is done.

set menu location in wordpress

Now, we are done with the menu. Let’s install the plugin to display the cart icon on the navigation menu of our site.

Install and activate  BC Menu bar cart plugin

Now, it’s the to install the plugin I mentioned in the beginning of this post. It’s a free plugin on WordPress.org. You can download it from here

After activating the plugin, you’ll see it in the plugins list:

bc menu bar cart icon plugin activated

Now, let’s click on Get started to start creating the cart icon on your menu.

 

bc menu cart main interface

Start configuring the cart icon design

Now, click on the Create new cart design tab:

bc menu bar cart icon create design

You can see there are quite many options. However, don’t be intimidated. I created this plugin to let you customize every bit of the cart icon on your navigation menu.

To create the cart icon on your navigation bar, you just need to set a few options.

Let me explain the way the plugin works really quickly.

In the previous section, you created a menu and assign it to specific location(s).

Now, with BC Menu bar cart icon, you will create designs (this is the cart icon design). Then, you can attach designs to menu.

As you can see, you can attach any design to any menu. This is one of the advantages of this plugin over other ones on the market. Most of other plugins only allow you attach a cart icon to a menu.

Design sections explained

So, let’s go ahead and create a design. Let me briefly introduce the options you can set on this page:

Section 1: Design title: this is the title of your design. It is similar to the title of a post. You can name it anything you like. Make sure it makes sense. For example, “cart icon design for main navigation menu” 0r “cart icon design for footer menu”.

Section 2. This section let you set the display rule for the cart. If you want to hide the cart icon when it is empty, uncheck the first checkbox. For the second checkbox, I always check it.

Section 3: Cart layout: Here you can select the layout of the cart icon. As you can see, we have 6 layouts for you to choose from. Let’s pick the one you like. “My cart replacement” is the alternative text for “My cart” on the design that have this text. Finally, you can set the cart icon to float left, right or center.

After selecting all the option, click on save changes to save the changes. You will see the page reload and new design created:

icon cart design created

As you can see, all the options are saved and there is a shortcode created. You can put this shortcode anywhere to display the cart icon.

Link the design to your navigation menu

Now, the next step would be link this cart design to a menu. Let’s click on the “Link Design to menu” tab:

link menu to design

Now, since we only have one menu and one design, the choice would be obvious. However, when you have multiple designs and multiple menu, you’ll see a list of designs appears under the menu.

For now, select the design for the menu and click on Save links.

Check the cart icon on the navigation menu

Now, you can open your site and see the  cart icon appears on the navigation menu. Here is what it look like on my theme:

cart icon with cart total and item count on the menu

As you can see, the icon with items count and cart total appears on the menu. You may wonder:

  • Can you change the cart icon color (blue/red… instead of black)?
  • Is it possible to change the cart icon to something else

The answer for all the questions above is yes. I’ll leave it for you to discover in the plugin. You can download the BC Menu Cart Icon plugin here for free.

I also make a pro version, which let you customize the icon much further. You can also see the list of items in cart when you hover/click on the icon. You can find out more about the pro version here.

Conclusion

Adding a cart icon (with different designs, to include cart icon, cart total, cart item count…) to your navigation menu used to be a difficult task and required coding. However, with BC Menu Cart Icon, the problem is so simple to solve now. I hope you enjoy using the plugin as much as I enjoy creating it. If you have questions, don’t hesitate to send me a message or leave a comment below.

 

 

 

Posted on Leave a comment

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:

How To Add Multiple Images For WooCommerce Product Variations 4

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. 

Posted on Leave a comment

WooCommerce Product Attributes Q&A – The Ultimate Guide

WooCommerce Product Attributes Q&A - The Ultimate Guide 5

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:

WooCommerce Product Attributes Q&A - The Ultimate Guide 6

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:

WooCommerce Product Attributes Q&A - The Ultimate Guide 7

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:

WooCommerce Product Attributes Q&A - The Ultimate Guide 8

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

WooCommerce Product Attributes Q&A - The Ultimate Guide 9

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:

WooCommerce Product Attributes Q&A - The Ultimate Guide 10

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:

WooCommerce Product Attributes Q&A - The Ultimate Guide 11

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.