Tag: woocommerce

Posted on by — Leave a comment

Fix Invalid value in field “priceSpecification” (in “offers”)

With recent Google changes in rich snippets, you may find your WooCommerce sites hit with this error.

Fix Invalid value in field "priceSpecification" (in "offers") 1

Investigate further, you see this error highlighted:

Invalid value in field "priceSpecification" (in "offers")

For someone who don’t know much about code, this looks like Greek.

However, the fix is quite simple, you need to remove that part.

Remove priceSpecification

Before doing this, make sure you created a child theme or have a plugin available that you can paste custom code to.

If you have a child theme, put the following code in the functions.php of that theme:

function wc_remove_some_structured_data( $markup ) {
unset($markup['offers'][0]['priceSpecification']); // price removed without stock info
return $markup; }
add_filter( 'woocommerce_structured_data_product', 'wc_remove_some_structured_data' );

This need to be in a <?php block. If you are not sure, hire somebody to do that for you. Doing it wrong may break your site:

Pasting code to remove priceSpecification snippet
Pasting code to remove priceSpecification snippet

Save the file and you are done. Time to request Google to validate the fix.

Credit of this fix goes to paddydoran on this post https://wordpress.org/support/topic/invalid-value-in-field-pricespecification-in-offers/

Posted on by — Leave a comment

How To Create Pre-Order Products With WooCommerce

woocommerce pre orders

Pre-order products are not something strange to us. We see them all the time. For example, game producers usually let people order their games before the release date.

The main benefit of pre-order products is to get some funding even when the product is not available. For example, you may need a bit of capital upfront to develop the product. Another benefit is to see how much your customers want the product you are making (stocking…) Whatever the reason, pre-order products can be a great option for your store.

How to create pre-order products in WooCommerce

WooCommerce itself doesn’t support pre-orders by default. However, there are many plugins available to help you accomplish this. I’ve tried some and found the one from WooCommerce store itself is the easiest to use. You can get it below to get started.

Get WooCommerce Pre-Orders

Create a Pre-order product

Now I assume that you have WooCommerce Pre-Orders plugin installed and activated. Let’s create a product that enable your customers to pre-order it.

Now, go to Products->Add new and scroll down to product data area, you’ll see there is a new tab called pre-orders:

How To Create Pre-Order Products With WooCommerce 2

The details of that tab is quite simple but enough for your to enable a product to be pre-orderable (That’s my made-up word)

I’ll explain the fields briefly since they are straightforward enough:

  1. Enable pre-orders: This is obvious. If you want to enable pre order for the current product, check this box
  2. Availability Date/Time: The date, time that this product is available for the customer to use. It should be the day you deliver the product to your customer
  3. Pre-order Fee: Do you want to charge an EXTRA fee for this pre-oder. Note that this fee will not be deducted from the product price. Most products I see on the market don’t charge a pre-order fee.
  4. When to charge: You can either charge now or charge when the product is shipped to the customer. Normally, stores will charge upfront. However, if you don’t need cash upfront, you can choose to charge later (upon release)

Now let’s quickly fill some details to make a valid pre-order enabled product.

How To Create Pre-Order Products With WooCommerce 3
How To Create Pre-Order Products With WooCommerce 4

As you can see that, the test product is a simple product that has regular price at $60 and sale price $45. Let’s make a test order.

Making a test order on pre-order product

Let’s click on the pre-order now button and walk through the checkout flow. Note that if your customer has other products in cart, those products are removed since pre-order products must be order separately.

Let’s go to the cart page. You’ll notice that other than an available notice right below the product name, there isn’t any difference from a cart page of normal products:

How To Create Pre-Order Products With WooCommerce 5

Let’s finish the checkout. As the admin of the site, you’ll see the pre-order appears in WooCommerce->Pre-orders:

How To Create Pre-Order Products With WooCommerce 6

Some cautions

Now you see that creating pre-orders products in WooCommerce is quite simple. However, as I mentioned above, pre-order products must be ordered separately. That means you can’t have two pre-order products in one cart.

You may say that you can use grouped products to group multiple products together. That doesn’t work too.

The only option as I know now is to create a product bundle (you will need another plugin from WooCommerce :O). However, using product bundle doesn’t bring much flexibility. Your customer still can’t order two or more random pre-order products together.

Conclusion

As you can see, with the help of WooCommerce pre-orders plugin, you can create pre-order product quite easily. However, this plugin works best if you only have one product in store (think about a video game that has its own domain) or a store that people will buy products separately. If your customers usually order multiple products including “buy it now” products, this product may not be your choice.

If this plugin fits your need, great! Click here to get it now

Posted on by — 3 Comments

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

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

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.

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

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:

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

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:

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

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:

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

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); })

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

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 Ultimate Guide To Adding Products To Cart Using Ajax In WooCommerce 13

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 by — Leave a comment

How To Set Up WooCommerce Free Shipping Coupons

free shipping coupon code woocommerce

Coupon is a great way to reward your customers. In WooCommerce, you can create coupons for almost anything. You can create a coupon that offers a 10% discount or a fix amount discount. However, little people know that you can create a free shipping discount. You can even set a minimum order for that coupon to be effective. Sounds good? Let’s find out how to set up WooCommerce free shipping coupon.

Here are what we are going to do to setup WooCommerce free shipping coupon:

  1. Make sure your store has coupon enabled
  2. Create the coupon that enables free shipping
  3. Add free shipping to your shipping zone
  4. Apply the coupon on a test order

Make sure your store has coupon enabled

The very first step is to make sure you have the use coupon option checked. Let’s go to WooCommerce->Settings->General and scroll down to the Enable coupons section:

enable the coupon codes usages in WooCommerce

Make sure you have the checkbox “Enable the use of coupon codes” checked. We are ready for the next step.

Create the WooCommerce free shipping coupon

Let’s go to WooCommerce->Coupons and click on Add coupon:

go to woocommerce coupon

Now, enter the details for your coupon:

create WooCommerce free shipping coupon

There are three fields you need to pay attention to, other fields are not important in enabling free shipping for the coupon.

  1. You need to give the coupon a name. In the example above, my coupon’s name is SHIPZERO
  2. You may or may not give the coupon a description. However, it’s extremely helpful when you come back and visit your coupons later, you will know exactly what they do.
  3. There is a small check box says “Allow free shipping” and you need to check it.

That’s all we need to do with the coupon. Now, click on submit and move on to the next step.

Create free shipping method for your shipping zone

In order to activate the WooCommerce free shipping coupon, the next step is to create a free shipping method in your shipping zones. If you have multiple shipping zones, you may need to create one free shipping method for each zone.

Let’s head to WooCommerce->Settings->Shipping->Shipping zone:

all shipping zones in woocommerce

As you can see, I have four zones here. I’m going to enable free shipping for Australia. As mentioned before, if you need to enable the use of the WooCommerce free shipping coupon we have just created in other zones, you may need to repeat the following steps for all zones.

Let’s click on the Edit link under Australia:

all shipping methods in Australia

Let’s click on Add shipping method:

add free shipping method for zone

Select free shipping in the drop down box and click on Add shipping method.

Then, you will see a new shipping method added in our list:

free shipping method is now under Australia

Let’s click on the Edit link under free shipping. We are going to configure the condition for the free shipping option to be effective.

configure free shipping option

Here, you can edit the title. I’ll leave the default title as Free shipping. The most important field is the select box: Free shipping requires…

There are a few options you can select from. You can require that the order must have a minimum amount so the coupon can be active. However, I’m going with the first option here, which requires only a valid shipping coupon.

After that, click on Save changes and we are done.

Apply the coupon on a test order

We are going to make a test order on my store. Let’s add some items and go to cart and click on Proceed to check out.

change country

The total before coupon is applied:

total before coupon applied

You can see the notice says: “have a coupon?…” If you are going to apply the coupon now, the coupon will not have any effect. Why? As you may remember, we only enabled free shipping for Australia. However, the country in the Country field is Vietnam. Let’s add our address to Australia and try to apply the coupon:

apply the coupon code
code apply successfully

Now, if we check the cart total, the free shipping fee is $0:

free shipping applied

Restrict the coupon to be available on particular products

In case you want to restrict the use of free shipping on some particular products or categories, it is definitely possible.

Let’s click on the Usage restriction tab:

free shipping coupon usage restrictions

As you can see, in the product categories section, I enter the product category “Dress”. That means this free coupon is available for products in this category only.

There are also other restrictions such as the minimum spent, exclude sale items… that you can set for the coupon.

Conclusion

As you can see, setting up WooCommerce free shipping coupon is quite easy. If you have multiple zones, you may need to do some repetitive work. There is a workaround though. That is to create a shipping zone that cover all shipping zones then create a free shipping method for that zone.
In case your store requires more complex shipping, I would recommend you use table shipping plugin. You can setup very complex shipping rule with this tool. Checkout my table rate shipping tutorial here to get started.

Posted on by — 10 Comments

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

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

Original image:

woocommerce original image

Product image on hover:

woocommerce with magnifier when hover

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

How To Disable Magnifying Glass Effects On WooCommerce

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

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

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

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

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

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

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

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

Conclusion

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