WooCommerce Tutorials Archives - Page 10 of 14

Posted on March 29, 2019December 5, 2019 by Đạt Trần — 5 Comments

The Ultimate Guide to WooCommerce Flat rate Shipping

WooCommerce flat rate shipping is the easiest shipping method to set up. In this post, let’s find out how to setup flat rate shipping in WooCommerce and see how it fits to your business model.

What is flat rate shipping?

If you have sent a package via post office before, you should be familiar with flat rate shipping. As the name suggests, flat rate shipping impose an uniform shipping price on your package as long as it doesn’t exceed a certain weight or size.

For example, the shipping cost for packages less than 10 kg and 1 cubic meter is $10 per package.

The same idea applies to WooCommerce flat rate shipping.

How to setup flat rate shipping in WooCommerce

By default, WooCommerce has three shipping methods

flat rate shipping
local pickup
free shipping

In order to use one of those method, you need to create a shipping zone first then in the zone, you can add one or more shipping methods, including flat rate.

how to add flat rate shipping to shipping zone in woocommerce

After creating one WooCommerce flat rate shipping method as in the above image, you can configure the rate, tax of that shipping method by clicking on the Edit link under “Flat rate”:

As you can notice, there is a toggle button right below the Enabled title. You can enable or disable the shipping method by turn that button on or off.

Can I have multiple flat rate shipping setup?

There is no limit on number of shipping method per zone so you definitely can have multiple flat rate shipping setup, in one zone. You may wonder, why do I need multiple flat rate shipping for one zone?

One good example is you provide standard shipping at a lower rate and priority shipping at higher rate. At the cart page, customers can choose which shipping method they want to use. If they need the products to be delivered fast, they will choose the priority shipping method. Otherwise, they can choose the standard shipping method to save money on shipping.

Let’s set that up:

adding multiple flat rate shipping for one zone

Now, on the cart page, the customers will see all the shipping options available:

How to add flat rate shipping per item using shipping classes

At this point, you should be comfortable with adding flat rate that applies to all items. What if you want to set a different shipping rate for some particular items? For example, I have a store selling computer hardware. While keyboards, mice can be shipped without much care, monitor requires special packaging and handling. I would like to charge $50 more for monitors. How can I set that up?

First we need to add a shipping class. Adding shipping class in WooCommerce is simple. Let’s go to WooCommerce->Settings->Shipping->Shipping classes and add one:

Now, the next step would be to go the monitor and assign it the “monitor” shipping class:

Finally, let’s configure the shipping rate for “monitor” shipping class in our shipping methods.

Let’s go to WooCommerce->Settings->Shipping->Shipping zones and edit our zones. Let edit all the enabled flat rate shipping method in that zone and add the additional fee accordingly:

Now if I go to the cart, I can see that the shipping cost is higher:

shipping cost updated after using shipping classes

If you remember, the standard shipping was $10 and the priority shipping was $30. Since we added $30 for the “monitor” shipping class, the shipping cost updated accordingly.

WooCommerce flat rate shipping by quantity

If you notice that we have 2 items in cart here. The shipping cost for the “monitor” only calculated once. What if you want to charge the additional shipping cost PER ITEM?

That’s easy, let’s go back to our shipping methods and edit each of them then enter this:

using formula to calculate flat rate shipping cost

Now, if I go to the cart page, surely I’ll see the shipping cost is calculated for all items in cart:

Hide flat rate shipping if free shipping is enabled

You may want to reward the customers by offering free shipping to all order exceeds $300. In this case, you also want to hide other flat rate shipping methods. What can you do to achieve this?

You’ll need to enter some code. Don’t worry, it won’t be hard.

First thing first, you need to create a child theme if you haven’t got one. Why do you need a child theme? How to create one? Find all the answers here

Now you have your child theme ready. Let’s go to its functions.php file and paste the following code:

function bc_hide_shipping_when_free_is_available( $rates ) {
  $free = array();
  foreach ( $rates as $rate_id => $rate ) {
    if ( 'free_shipping' === $rate->method_id ) {
      $free[ $rate_id ] = $rate;
      break;
    }
  }
  return ! empty( $free ) ? $free : $rates;
}
add_filter( 'woocommerce_package_rates', 'bc_hide_shipping_when_free_is_available', 100 );

add code to functions.php to hide other shipping methods when free shipping available

Click on update file and let’s go to the cart page, you’ll see that if free shipping is available, all other methods are hidden:

other shipping methods hidden when free shipping available

Conclusion

As you can see, flat rate shipping at first seems to be rigid and hard to customize. However, when combine with shipping classes and free shipping method, you can offer very flexible shipping options for your customers. Using WooCommerce shipping classes enables you to set the max shipping fee for an order, set the shipping fee based on the quantity and the total of the cart.

Posted on March 28, 2019April 14, 2019 by Đạt Trần — 3 Comments

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:

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:

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.

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.

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.

Posted on March 19, 2019April 14, 2019 by Đạt Trần — 3 Comments

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

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:

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:

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 March 19, 2019December 5, 2022 by Đạt Trần — 11 Comments

List of shortcodes In BC Woo Thank You Page Builder

You can find below the list of the shortcode that supported by my plugin BC Woo Thank You Page Builder:

Most common pieces of data

[bctk_formatted_billing_full_name] : Full customer billing name
[bctk_formatted_shipping_full_name] : Full customer shipping name
[bctk_formatted_billing_address]: Full billing address
[bctk_formatted_shipping_address]: Full shipping addres
[bctk_formatted_order_total]: Order total, currency formatted
[bctk_customer_note]: Customer note
[bctk_order_number]: Order number
[bctk_order_id]: Order ID
[bctk_view_order_url]: URL to view the order details
[bctk_order_details]: Table that list the order details
[bctk_billing_first_name]: Billing first name
[bctk_billing_last_name]: Billing last name
[bctk_billing_company]: Billing company
[bctk_billing_address_1]: Billing address 1
[bctk_billing_address_2]:
[bctk_billing_city]
[bctk_billing_state]
[bctk_billing_postcode]
[bctk_billing_country]
[bctk_billing_email]
[bctk_billing_phone]
[bctk_shipping_first_name]
[bctk_shipping_last_name]
[bctk_shipping_company]
[bctk_shipping_address_1]
[bctk_shipping_address_2]
[bctk_shipping_city]
[bctk_shipping_state]
[bctk_shipping_postcode]
[bctk_shipping_country]
[bctk_order_item_totals]

Bank transfer shortcode

[bctk_payment_bacs_account_name]
[bctk_payment_bacs_account_number]
[bctk_payment_bacs_bank_name]
[bctk_payment_bacs_routing_number]
[bctk_payment_bacs_iban]
[bctk_payment_bacs_swift]

Less common order data

[bctk_order_key]
[bctk_customer_id]
[bctk_user_id]
[bctk_user]
[bctk_address_prop]
[bctk_payment_method]
[bctk_payment_method_title]
[bctk_transaction_id]
[bctk_customer_ip_address]
[bctk_customer_user_agent]
[bctk_created_via]
[bctk_date_completed] (probably empty if payment is COD/bank transfer…)
[bctk_date_paid] (probably empty if payment is COD/bank transfer…)
[bctk_date_created]
[bctk_address]
[bctk_shipping_address_map_url]
[bctk_downloadable_items]
[bctk_checkout_payment_url]
[bctk_checkout_order_received_url]
[bctk_cancel_order_url]
[bctk_cancel_order_url_raw]
[bctk_cancel_endpoint]
[bctk_edit_order_url]
[bctk_customer_order_notes]
[bctk_refunds]
[bctk_total_refunded]
[bctk_total_tax_refunded]
[bctk_total_shipping_refunded]
[bctk_item_count_refunded]
[bctk_total_qty_refunded]
[bctk_qty_refunded_for_item]
[bctk_total_refunded_for_item]
[bctk_tax_refunded_for_item]
[bctk_total_tax_refunded_by_rate_id]
[bctk_remaining_refund_amount]
[bctk_remaining_refund_items]

Posted on March 1, 2019December 12, 2019 by Đạt Trần — 10 Comments

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

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:

Create a child theme of your current theme (if you haven’t)
Create the folder structure for the WooCommerce shop page template in your child theme
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:

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:

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:

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:

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:

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

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:

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.

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.