How To Create WooCommerce “Add to Cart” Button: An Actionable Guide

How To Create WooCommerce “Add to Cart” Button: An Actionable Guide

Here, in this post, we are going to explain you how to create WooCommerce “Add to Cart” button. By which a user is converted into a customer. Meanwhile, when a user adds the product to the cart it means he/she is going to buy products from your WooCommerce setup.

Fast forward, in WooCommerce, you can add the products to the cart from their shop page or detail page for some type of product like simple products.

Thus, sometimes this is not enough, therefore, it’s great of having a landing page – that featuring the amazing product you created. In this type of case, you can use the woocommerce shortcode [add_to_cart].

Apart from this, by using custom Add to cart URL, you can also create your own add to cart button in WooCommerce. It may be useful if you are visual builder or pricing Table plugin.

Note that sometimes add to cart shortcode cannot work properly due to the styling issue – because it cannot be compatible with your using plugin

Bending towards the point, create add to cart WooCommerce and make their link – add products to cart, redirect to specific pages, include variable and grouped products, etc. With this guide, you can make your task much easier –  Means you can add WooCommerce custom “Add to cart” button on your any page like shop page, detail page, landing page or even in your pricing tables.

So keep reading this guide, let’s get started!

How to create custom “Add to Cart” URLs in WooCommerce?

Simple Products: Add to Cart URL

One of the easiest among them. Simple products are quite easy to add to cart through a custom URL. Just search the product ID by going to product title under WooCommerce>>Products and use the given below links. You can see shown below image.

woocommerce find product ID

[image source file: www.businessbloomer.com]

URL: Add one simple product to cart

href=”http://yourdomain.com/?add-to-cart=25″

  • Remember to change the domain name in the above link, and the button will work out of the box. 1 product with id = 25 will be added to the cart.

URL: Add one simple product to cart with quantity = 3

href=”http://yourdomain.com/?add-to-cart=25 &quantity=3″

  • 1 product with ID = 25 and quantity = 3 will be added to the cart.
  • Note: Remember that 2 different products cannot be added to a cart with a URL.

URL: Add one simple product to cart & redirect to cart afterwards

href=”http://yourdomain.com/cart/?add-to-cart=25″

  • In case you have changed the URL for the cart, so make sure that you will have to change “/cart/” into “/basket/” – for example.
  • For this, you will have tick the “Enable AJAX add to cart buttons on the archives” option under WooCommerce>>Settings>>Products>>General.

URL: Add one simple product to cart & redirect to checkout afterwards

href=”http://yourdomain.com/checkout/?add-to-cart=25″

  • For this , tick the ” Enable AJAX add to cart buttons on archives” option under WooCommerce>>Settings>>Products>>General.
  • And disable “Redirect to cart page after successful addition”.

woocommerce-disable-redirect-to-cart

URL: Add one simple product to cart & redirect to any page afterwards

href=”http://yourdomain.com/your_custom_page/?add-to-cart=25″

  • For this, you have to Enable the AJAX add to cart buttons on archives” option under WooCommerce>>Settings>>Products>>General.
  • And disable “Redirect to the cart page after successful addition”.

Variable Products: Add to Cart URL

Here things get quite difficult!

There are 1 or more attributes and a quantity in the variable products. And you will have to find the variation ID, attribute NAME slug and the attribute TERM SLUG along with finding the product ID.

You can see the images shown below!

woocommerce-find-variaiton-ID

woocommerce-find-attribute-name

woocommerce-find-attribute-slug (1)

As you will have a product ID, variation ID, and its specific properties, you can use the following:

URL: Add one variable product to cart (with 1 attribute only)

href=”http://yourdomain.com/?add-to-cart=47&variation_id=88&attribute_pa_colour=blue”

  • Here we are adding Variable Product ID 47, and especially its variation ID = 88, where the color attribute is equal to blue.
  • It’s a bit complicated but once you will do it becomes easy.

URL: Add one variable product to cart (with 2 attributes)

href=”http://yourdomain.com/?add-to-cart=47&variation_id=88&attribute_pa_colour=blue&attribute_pa_size=m”

  • Here we are adding Variable Product ID 47, and especially its variation ID = 88, where the color attribute is blue and size attribute “M”.

URL: Add one variable product to cart (with 2 attributes and Quantity = 3)

href=”http://yourdomain.com/?add-to-cart=47&variation_id=88&quantity=3&attribute_pa_colour=blue&attribute_pa_size=m”

  • In addition, you can also redirect to cart, checkout, and another page in the same way as we have discussed for the simple product page.

URL: Add one variable product to cart & redirect to cart

href=”http://yourdomain.com/cart/?add-to-cart=47&variation_id=88&attribute_pa_colour=blue”

URL: Add one variable product to cart & redirect to checkout

href=”http://yourdomain.com/checkout/?add-to-cart=47&variation_id=88&attribute_pa_colour=blue”

URL: Add one variable product to cart & redirect to any page

href=”http://yourdomain.com/any-page-url/?add-to-cart=47&variation_id=88&attribute_pa_colour=blue”

Grouped Products: Add to Cart URL

I recently worked with Grouped Products and my task was to add it to cart via a custom URL. A grouped product is a combination of two or more sub-products, and each one can be added with a custom quantity to cart.

The group product I recently worked with grouped products and my job was to add it to the cart through a custom URL. A grouped product has two or more sub-products. Each & everyone can be added to a custom quantity in the cart.

woocommerce-grouped-product

[Image Source File: www.businessbloomer.com]

URL: Add a grouped product to cart

  • You will need a grouped product ID – which can be found in the normal way, and the sub-product ID too. Thereafter use something like this:
  • href=”http://yourdomain.com/?add-to-cart=3111&quantity[1803]=5&quantity[1903]=2″
  • However, In this case, we are adding the grouped product ID=3111, and especially 5x product ID=1803 and 2x product ID=2.
  • Note: You may need to specify &quantity[1903]=0in case you wish to add “zero” for one of the sub-products.

Now you have successfully added the WooCommere add to cart urls, thereafter, know this module features once enabled, keep reading…

After enabling WooCommerce product add to cart

Once enabled WooCommerce add to cart module, it allows:

  • Add the product to the customer’s cart automatically when they visit a product page.
  • When customers have successfully added a product to their cart, it redirects them to any page on your site.
  • On single product and on cart pages it disable quantity field for all product.
  • In variable products, it replaces standard WooCommerce drop-down box with radio buttons.
  • On per product basis, it enable/disable shopping cart buttons.
  • On add to cart, it enable to open the external product in a new window.

WooCommerce Add to Cart Button Not Working

There can be certain reasons for WooCommerce add to cart button not working, stated as follows:

  • A Theme or Plugin conflict
  • Memory issues
  • Wrong Cart or Checkout page link

How can a plugin and theme interfere with shopping cart button?

The compatible theme of WooCommerce having some custom templates helps in customization of the looks and the feel of the several pages. There can be some other reason as well as they might have JavaScript files for the better user experience. So this might create a conflict between the PHP and the JavaScript file tending to interfere with the add to cart button.

How to find out theme or plugin conflict?

You will be required to disable all your plugins except the WooCommerce and need to check whether it solves the issue or not.

In case it does solve the issue, then the reason is the plugin conflict and you will have to enable the plugins one after the another to find out the conflicting plugin.

If even that fails to help then you may switch to a default theme. If switching between the themes solves this issue, then you may conclude that there is something in the theme that is conflicting.

In this case, you need to contact the theme vendor depending upon the place you bought the theme from like the ThemeForest or some other site.

Considering the theme to be custom built then you will have to check the browser console for any kind of error message. If you don’t see any such message on the console, monitor the XHR requests while clicking the add to cart button and monitoring the request to the server.

If deactivating all the plugins except WooCommerce and switching to a default theme does not help

In this situation check the memory limit from the WooCommerce by going through its System Status. If you find it to be below 64MB then that could be a reason, therefore, you are always required to keep your memory limit 128MB for a WooCommerce powered store. Keep a check if there is any kind of change on the cart and all the checkout pages on the settings or the pages with shortcodes if it is correct.

Note that PHP and MySQL version should be 5.6 or higher to use WooCommerce properly.
If any of the above-interpreted tips does not help or makes sense, then feel free to comment your valuable queries below. We will get back will a positive response to all your queries soon.

Change the default “Add To Cart” button text

Think about which custom “WordPress add to cart button” text will work better for your e-commerce store and put the suitable one. However, there are a lot of options by which you can change your default woo shopping cart button text such as ‘Enrol now’, ‘Book a place’, ‘Add to Quote’, ‘Buy’, ‘Add Product’ or ‘Make an Enquiry’, whatever you like.

To change your text, you just need to add given below code to your theme’s function.php file or in a site-specific plugin.

Thereafter, change your “Add to cart” text on line 4 as per your choice.

add_filter(‘woocommerce_product_single_add_to_cart_text’, ‘woo_custom_cart_button_text’);
function woo_custom_cart_button_text() {
return __(‘Add Product’, ‘woocommerce’);
}

Plugins to add WooCommerce “Add to Cart” button

1. WooCommerce Custom Add To Cart Button

WooCommerce Custom Add To Cart Button is a WordPress plugin to customize add to cart buttons of your WooCommerce store. By using this plugin you can also change your WooCommerce shopping cart text, replace the text with just an icon, or add a cart icon to the button.

This plugin is fully accessible. If you want to just display the cart icon, the text is still present in the HTML and can be read by screen readers. More so all the options are set in the customizer. After installing, you need to go to the Appearance>>Customize>>WooCommerce>>Add to cart and select your settings.

Features:

  • It shows a cart icon and remove the text.
  • Add the cart next to next.
  • It can change add to cart button text.
  • With this, you will get full control whether the add to cart button text appears in lowercase, uppercase or in sentence case.

2. Ultimate Custom Add To Cart Button For WooCommerce

Ultimate Custom Add To Cart Button For WooCommerce is also a WordPress plugin allows you to completely customize add to cart button on your e-commerce store. This also helps you to create shopping cart button to increase your sales via the roof.

Features:

  • It works with all themes.
  • This can change the button’s background color.
  • It customizes button text on simple, variable, and grouped product.

Summing Up

Wrapping this all in end! We discussed “How to Create Custom “Add to Cart” URLs in WooCommerce”?

Also, we mentioned the steps. So, follow the above steps and create custom “add to cart” URLs.

We hope this code saved you time & money. Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report.

Need instant help for WordPress? Just feel free to avail our Services by dialling our WordPress help number, +1-844-275-0975 We will be glad to help you.

Read More Blogs:



Leave a Reply

Call Now