Đạt Trần, Author at Binary Carpenter

Posted on May 23, 2019June 12, 2019 by Đạt Trần — Leave a comment

BC Menu Bar Cart Icon Plugin Tutorial

In case you prefer to watch a video, I’ve made one here. It’s about 6 minutes long so you can get all the details quickly:

The purpose of BC Menu Bar Cart Icon

The sole purpose of this plugin is to help you: WooCommerce users to add a cart icon to the menu or any other locations (with the help of shortcode). When your customers see that icon, they will know

How many items are in their carts
How much is in their cart

In the pro version, when they hover or click on the cart icon (you can define the action), they’ll see the list of items and their quantity.

Sounds good? Let’s find out how to create one icon like that.

Here are the steps to create and icon and stick it to your menu

Create a menu (if you don’t know how, click here for the step by step tutorial to create a menu and set its location in WordPress)
Go to BC Menu Bar Cart and create a design.
Link the design to the menu.

I’ll skip step 1 since I’ve covered it in a different post. Let’s create a design in BC menu bar cart and link it to the menu.

How to create a design in BC Menu Bar Cart Icon plugin

First go to the bc menu cart dashboard by click on its menu item here:

You’ll see the interface like so:

If you use the free version, you will not see the green notification since I’m using the pro version.

Click on Create new cart design tab to start creating the design:

On the left is the place where all the design you created reside. On the right are the options you can set to the designs. If this is the first time you go to this page, you’ll probably see to item under “Designs you created”. That’s OK. Now, let’s click on Create new design button (Blue button).

I’ll go through every sections and explain every options for you to create the design.

This is where you put the title for the design. You can put anything here. It’ll appear under “Designs you created” section.

The first checkbox, if checked will show the cart icon all the times, even when the cart is empty. If this is your desired behavior, then check this box.

The second checkbox is to display the cart icon. As you’ll see in the next section, there are layouts that contain cart icon. You can decide to hide or show it here. Check the checkbox if you want to show the cart icon.

Select cart layout: Here you have 6 layouts to choose from. Select the one that you think it’s the best match for your site. If there are layouts that isn’t in this list, please let me know and I’ll add it for you.

“My Cart” replacement is where you can put the text to display instead of “My Cart” as you see in the layout 3 and 4.

Cart float: As the cart display in the menu, it is another list item as other menu items. You can set it to float left or right.

Now, let’s click on the design settings tab to customize the cart icon further:

Here, you can customize the cart icon further:

Cart icon type: In pro version, you can either choose a icon font or an image to be the cart icon. However, in free version, you are locked to the font icon.

Select icon for your cart: Here, you can select the icon you want to display. If you select image as cart icon in the section above, make sure to select your image by clicking on the select button.

Icon width, Icon height, Icon font size: The names of those fields are quite self-explanatory. If you use icon font, make sure to set Icon font size to adjust the size of the icon to your liking.

Cart icon color: If you use icon font, you can set the color of the cart icon here. It’s a feature of the pro version though.

If you choose the cart layout 1 and 5, you’ll see there is a small circle that shows the number of items in cart. Here is the section you can customize that circle.

Item count circle background color: Background color of the circle

Item count circle text color: Text color of the number

Item count circle width, height, font size: These are for the width, height and the font size of the circle count

This section lets you define the behavior of the cart icon when your customers click or hover over it.

There are three actions:

Go to cart: browser will open the cart page
Do nothing
Show cart items list: Show the list of items in cart

Here you can select various designs for the item list (the cart list that appears when visitors hover or click on the cart icon). Currently, there is only one design so it’s selected by default.

The cart list has a close button for customer to close it. Here it is:

This section lets you select various close buttons and its font size.

This section helps you specify the display of product image in the cart list. You can select to show and hide the images and their width and height here.

This section is similar to the above section about the cart list close button. Before each product in the cart list, there is a close button. This is the section you can work to customize that button.

This section is where you can customize the display of the cart list further (the list that appears when you hover the cursor over the cart icon).

Cart list header text: Type the text you want to display instead of “Your cart” in position 1 here

Cart list subtotal text: What do you want to use instead of “Subtotal” in position 2, put it here

Go to cart button: Customize the button at position 3

Go to checkout button: Customize the button at position 4

Conclusion

I hope the tutorial has been helpful. Hopefully you can start using the plugin now. If you have questions, please let me know.

Posted on May 23, 2019 by Đạt Trần — Leave a comment

The Ultimate Guide To WordPress Navigation Menu

A navigation menu is not something alien to webmasters today. It’s a must have for any website. In WordPress, menu are created automatically for you the time you set up your site. However, do you know that you can create your own menu, set your own styles for the menu? Sounds interesting? Let’s get started.

How to create a navigation menu in WordPress

Create a menu is super easy in WordPress. Simply go to Appearance->Menus:

As you can see, I have no menu created yet. Let’s create one.

In the Menu name box, enter the name of the menu. It can be anything. As I’m going to create a primary navigation menu, I’ll call it primary nav.

Now, click on create menu.

You can see that we have a new menu called primary nav but there isn’t any item on it yet. Let’s add some.

How to add your WordPress pages to the menu

On the left, you’ll see the list of items you can add to the menu:

Click on Pages, for example, you’ll see the list of pages of your site:

To add any item to the navigation menu, check the checkbox in front of that item and click Add to menu.

How to add custom links to the menu

There are times you may want to add external links to the menu (pages that are not on your site). It’s super easy to add such links to the menu. Let’s click on custom links:

As you can see, there are two boxes for you to enter the details. Let’s enter the URL you want to point to in the URL box and the text you want to display in the Link Text box.

For example, I add a link to Google with the link text “Search Engine”. It’ll look like this:

After clicking on Add to menu, it appears on my menu:

Now, let’s add some other items to the menu to finish the creation of our menu. Make sure you click on the “Save Menu” button to save all your changes. Here is the final version of my menu:

How to change the order of menu items

As you notice, the order of items is the order you add them to the menu. First added items appear first and so on. So, does that mean you need to delete and re-add the items if you wan to change the order? Fortunately, not.

You can drag the items up and down to change the order they appear in the menu:

As you drag, you can see that there is a dotted box appear. If you release the mouse, the item you are dragging will fit into that dotted box.

How to create menu hierarchy (Create child menu items)

There are times you want to create a menu item that contains other items (children). You can do this by click and drag too. For example, I want to make Cart item is a child of Shop item. I’ll click and drag the cart under the shop (still hold the mouse) and then drag a little bit to the right:

As you can see, the dotted box is aligned a bit to the right of the shop item. That means if you release the mouse now, the cart will be a child of Shop.

You can even drag an item under the Cart item and make that item a child of Cart. There is no limit of the number of levels you can create in your menu.

Make sure you click on Save Menu to save your changes.

Why don’t I see the menu

If I view my site now, I don’t see the menu I’ve just created. Instead, I may see no menu or the default menu that WordPress creates for me (consisted of all pages in my site). So, how to make the menu appears at the location(s) I wanted?

It’s time to talk about menu locations.

What are menu locations

Menu locations are locations that you can display the menu and is defined by your theme.

That means if you use a different theme from mine, you may have less or more locations to put your menu. In addition, the locations may be different.

Now, still in Appearance->Menus scree, click on Manage Locations:

As you can see, my theme offers two menu locations, one is Primary menu, the other is footer menu.

Now, each location has a select box to let you select the menu you want to display at that location. The menu I’ve created in the previous step is available in these select box.

Now let’s select it for the Primary Menu location:

Click on Save changes and view the site:

Sure enough, we have the menu at the right place and the Cart item is the child of the Shop item.

Can I have the menu at this place?

Often times, you may need to display a navigation at places that isn’t support by default by the theme. One example is to display the menu inside page, post… If this is what you want, you may need to use a plugin to achieve the result.

There are plugins that available in the WordPress repo. However, they are not supported for quite a long time so it’s quite risky to use them. If you have this need, please let me know and I’ll create one. It should be very simple.

Conclusion

Hopefully you’ll find working with WordPress menu easier now. If you have any suggestions/questions, please let me know.

Posted on May 19, 2019February 18, 2021 by Đạt Trần — 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:

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:

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

woocommerce custom thank you page settings

There are three separate sections.

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.
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?)
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 May 6, 2019May 6, 2019 by Đạt Trần — 1 Comment

How To Enable Search Products By SKU, Tags, Categories In 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:

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

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:

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

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:

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:

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

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:

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 May 3, 2019July 9, 2019 by Đạt Trần — 5 Comments

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

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:

Check if you have a menu created
Check the location of your menu
Install and activate WooCommerce Menubar cart plugin
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:

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:

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:

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.

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.

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:

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

Start configuring the cart icon design

Now, click on the Create new cart design tab:

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:

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:

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:

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.

Cookie	Duration	Description
cookielawinfo-checbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.