When using the WooCoommerce plugin on your website you may sometimes need to customize the way that your site functions. WooCommerce is a great and very flexible plugin and can offer a lot of customization features.
One of which is adding the “Add To Cart” button anywhere you want on the page. In this article we’re going to look at the add_to_cart shortcode, how it works and how it can be used.
How Does WooCommerce Add to Cart Shortcode Work?
Before diving into how the WooCommerce add-to-cart Shortcode works, it is important to know what the button does and how it helps your website. The add_to_cart shortcode will display an “Add To Cart” button that allows the user to add a specific product to their shopping cart. It can help the shopping experience of your customer as it makes your page easy to navigate.
There are many situations in which you may want to use the add_to_cart shortcode. For instance, when promoting a new item on your website, you can write a short description of the item, outline the benefits of the offer, and add some pictures of the item.
At the bottom of the promotion, you can use the add_to_cart shortcode to render the “Add To Cart” button. Once the customer clicks it, the product will be added to their shopping cart. This way you won’t have to force the customer to go to the product page and only then click on the “Add To Cart” button, which should help user experience and ultimately your conversions.
Parts of the WooCommerce Add to Cart Button Shortcode
A WooCommerce add to cart button shortcode comprises two main parts: the name of the shortcode and the arguments. The arguments can be used to customize the look or behavior of the rendered button.
Below is a WooCommerce Add to Cart button shortcode with the different parts discussed.
The add_to_cart part is the name of the shortcode, while the rest are the parameters:
[add_to_cart id="99" style="border: 1px solid #000;" show_price="true" quantity="1"]
Shortcode Parameters
For instance, in the example used above, the tag links the product having the id=99 to the button. There are six parameters used, and below is what they stand for:
- id – Stands for the product ID on the page. If this parameter is empty, WooCommerce will assume that the ID of the product is the ID of the current post, page, product or another custom post type that is rendered (unless the SKU argument is provided).
- style – The CSS style code can be used to customize how the rendered button looks.
- show_price – This argument will determine whether to show the price of the product or not. If it’s set to true, then the price of the product will also be displayed.
- quantity – determines how many times the product should be added to the cart. By default, it will be 1 item.
- sku – This is the product SKU that can also be found on the product page. If it’s set and the id argument isn’t set, the shortcode will try to find the product by sku number.
- class – name of a custom CSS class that you may want to add to the button wrapper.
How to Insert the WooCommerce Add to Cart Button Shortcode
There are different ways to insert the WooCommerce add to cart button shortcode to websites and pages. For example, it can be inserted in a classic WordPress editor differs from inserting it in a Guttenberg editor, as shown below.
Classic WordPress Editor
If you’re using a classic WordPress editor on your site, you can simply insert the shortcode inside the editor:
Guttenberg Editor
When using the Guttenberg editor, you can either simply enter the shortcode just like with the classic editor or search for the shortcode block and insert the desired shortcode in the text field:
Add to Cart URL Shortcode
In some instances, instead of using the add to cart button on your website, you can use the add_to_cart_url shortcode. This shortcode will render a link instead of a button and will add the product to cart when you click it.
This shortcode accepts only 2 parameters (id and sku) that work exactly like in the add_to_cart shortcode:
[add_to_cart_url id="99"]
Conclusion
As you can see, WooCommerce is quite flexible and you can display the “Add To Cart” shortcode almost anywhere.
Make sure you use this shortcode when necessary and don’t forget to style the button to match your website’s look.
