How to Use the WooCommerce Add to Cart Button Shortcode Anywhere On Your Site

While WooCommerce gives you an exhaustive list of shortcodes to use, the one people find most beneficial when creating content on their site is the WooCommerce Add to Cart Button Shortcode. 

In this post, we’ll explore different ideas on using the WooCommerce Buy Now Button shortcode and how exactly to use it. 

But before we begin, let’s talk a bit about what Shortcodes are exactly and how do they work in general. 

You can skip this part and go directly to WooCommerce Add to Cart Button shortcode guide.

What are WooCommerce Shortcodes?

One of the great things I love about WordPress is its clean and easy shortcode functionality. Shortcodes let non-developers do things that would otherwise be very difficult to get around to. 

Surrounded by square brackets, Shortcodes are small snippets of code, written in a non-cryptic and human-readable way. These codes when inserted inside the content editor of the site, display features and web elements that would otherwise require complex lines of code. 

Shortcodes are the beauty of WordPress. If you’ve ever worked on a WordPress site, you would’ve probably used one of these nifty things when laying out your site pages. We use a ton of them – including the useful WooCommerce cart shortcodes – in our WordPress Development Services. 

WooCommerce offers a number of shortcodes, ready to be inserted on your site where ever you want. Plus, it’s so easy to use WooCommerce shortcodes that even non-techies can use them without a problem. 

Now, let’s talk about our favorite and super helpful WooCommerce Add to Cart button shortcode.

What Does the WooCommerce Add to Cart Button Shortcode do?

The add to cart shortcodes in WooCommerce allow you to embed a clean, Add to Cart button that displays the price and allows the customer to add a product to his cart. 

Say, you are adding a section on your homepage where you are promoting a special promotion running in your store. You wrote some nice compelling copy, added some pictures, and now you want to add a simple Add to Cart button that takes people directly to the cart page with the product loaded.

To add a simple, Add to Cart button, you just need to insert the Add to Cart WooCommerce shortcode. It’s a single line of code that you copy-paste into the text editor and it will show the Add to Cart button that you need. 

How to Insert the WooCommerce Buy Now Button With a Shortcode?

So, here is the WooCommerce Add to Cart button shortcode. 

[add_to_cart id=”99”]

Let’s talk about what these different parts of the shortcode mean and how you can customize it. 

The Name:

The first part of the Shortcode is basically its name, which is pretty descriptive about the kind of feature it adds to your site. For example, this add-to-cart shortcode will add the Add to Cart button on your site wherever you insert it.

Parameters or Arguments:

However, inserting this button won’t do anything useful unless you link this button to some product that you want users to add to the cart.

That’s where arguments or parameters come in. Most WooCommerce Shortcodes accept a list of parameters – some mandatory, some optional – that specify what kind of content you want to display.

In this picture shown above, “id” is an argument that links the button to the product having the id = 99.

The Add to Cart Shortcode can take the following parameters:

These are quite self-descriptive, and it doesn’t take a lot of effort to figure out what these parameters stand for.

For example, in this case:

• ID is the product ID that you can find on the product page
• Style is the CSS style code you can use to customize how the button looks like. For example, you can change the color of your button by using any color code you want instead of #CCC.
• SKU is the product SKU which you can also find on the product page. 
• Show price, when set to true, will show the price with the button.  
• Class is a custom CSS class that allows you to add more customization to your Add to Cart button. Say, you want to customize your button so that it changes color when someone hovers on it. With CSS class and custom CSS style code, that can be easily done. 
• Quantity is the number of products you want to add to the cart. 

As you can see from the above image, it’s not necessary to give all arguments when using the WooCommerce Add to Cart Shortcode. This shortcode above took only the argument of ID. So, when an argument is not specified, it takes the default value.  

To add these arguments to your WooCommerce Shortcode, you just have to add the name of the parameter and assign it to a specific argument using the equals sign notation. 

You can add multiple parameters by separating them with space, like so:

[add_to_cart id=”99” style=”border:4px solid #ccc; padding: 12px;” show_price=”TRUE” quantity=”1”]

The above shortcode will add a WooCommerce Buy Now button that displays the price of the product.

Also, don’t forget to use quotation marks when giving your arguments; these little characters are actually quite important in programming and can make or break the code. 

So, that’s it. It should be pretty clear what the WooCommerce Add to Cart Shortcode is and what it looks like. 

How to Insert the WooCommerce Add to Cart Button Shortcode

There are different ways and places you can insert this shortcode to your website pages and posts. 

Using the Classic Editor

To add the functionality to pages or posts, you can just insert the Shortcode in the classic text editor of WordPress.

Inserting WooCommerce Add to Cart Button Shortcode Using the Block Editor

If you’re using the block editor of WordPress, you can search for Shortcode block and insert the Add to Cart Shortcode in the text field. 

Adding WooCommerce Add to Cart Button Shortcode to Widget Areas

To add the widget, simply navigate to Appearance > Widgets from your WordPress dashboard. Or you can go to the customizer and navigate to Widgets. Drag and drop the Text widget to the area you want to insert in – for instance, the left sidebar. Type in the shortcode and you are done. 

To add a shortcode to a widget area, drag and drop the Text widget to the widget area and paste your shortcode in the text area. It’s as simple as this!

2 More Common and Useful WooCommerce Shortcodes

Apart from the Add to cart button shortcode, WooCommerce offers an exhaustive list of shortcodes. Here are two more WooCommerce shortcodes you’ll find helpful when laying out your website.

You can find the full list of WooCommerce shortcodes in this document. 

Products Shortcode in WooCommerce

The basic Products shortcode is as follows: 

[products]

But you need to give this shortcode other parameters to really define which products you want to show. 

This shortcode can be customized using quite a lot of attributes and arguments. You can find the complete list here. 

For example, if you want to display some popular products that are on sale, you can use the following shortcode: 

[products limit=”4″ columns=”4″ orderby=”popularity” class=”quick-sale” on_sale=”true” ]

The above shortcode will display four on-sale products, by order of their popularity.

Another example is when you want to display your best-selling products on your site. To do that, you can use the following shortcode: 

[products limit=”3″ columns=”3″ best_selling=”true” ]

The above shortcode will display 3 products in 3 columns that are set as best-selling in Product Settings. You can change these parameters, remove them, or add more to customize and define what you want to display. 

Add to Cart URL Shortcode WooCommerce

If you want to add a simple Add to Cart URL instead of a button, you can do so by using the Add to Cart URL shortcode, which is as follows: 

[add_to_cart_url]

This shortcode can take the following arguments: 

     ‘id’ => ’99’,

       ‘sku’ => ‘FOO’

4 Creative Ways Of Using WooCommerce Shortcodes

WooCommerce Shortcodes can be used in a variety of different ways. You can use them to enhance your store layout, customize the way your products are displayed, or use them to increase conversion rates. 

Here are some creative ideas for using WooCommerce Shortcodes. 

Embedding Products and Add To Cart Buttons in Your Blog Posts

Attract your customers with valuable, informative, and interesting content on your blog and sell them right there with the help of WooCommerce shortcodes when you have fully captured their attention. 

If some store visitor has taken the time to read through your blog, it’s the perfect opportunity to embed the product and give them a convenient way to buy instead of linking them to the product page. But make sure your blog post is related to your product in some way. You wouldn’t want to randomly embed products in your blog posts and appear to be too ‘salesy’.

Creating a One Page Checkout

One technique that can help you drive up conversions is to reduce the number of clicks from your customer’s buying journey. Creating a one-page checkout is an excellent technique to increase conversions. Creating a Quick Order form and adding Product Tables are other conversion optimization techniques. 

Read More:

• How To Optimize WooCommerce Product Category Page To Boost Conversions
• Three Ways to Design an Effective WooCommerce Bulk Order Form

Using WooCommerce Shortcodes like the cart, my account, and checkout Shortcodes together on one page can let you create a one-page checkout.

Creating a Product Comparison Table

Product comparison tables can really help your prospect make up their mind by giving all the information they need side by side on one page so they can make an informed decision. 

You can easily create a table and embed the product right there using WooCommerce add to cart Shortcode to give the buyer an option to buy with one click.

Displaying Featured or Discounted Products

Many WooCommerce Themes have this option to display products based on certain categories, product IDs or SKUs. If your theme doesn’t include this feature, you can easily create a Featured Products section using WooCommerce Products Shortcodes. You can even add them on the sidebar to improve visibility and increase conversions. 

How to Edit WooCommerce Shortcodes – Video Guide

Conclusion

I hope this guide gave you all the information you needed about WooCommerce Shortcodes. Go ahead and start experimenting with those powerful snippets. 

If you have any other ideas or techniques for using WooCommerce Shortcodes, do let us know in the comments. 

Get in touch with the experts at CODUP for premium WooCommerce development services.

Read Also:

• Referral System for WooCommerce
• Shopify vs. WooCommerce