Add to cart

WooCommerce add to cart URL shortcode

The WooCommerce [add_to_cart_url] shortcode can be used to output a relative URL to a product by specifying it’s ID.

<add_to_cart_url id="76">

The shortcode can be used within HTML to create a button or a link to add a product to the cart. In HTML context the double quotes (") should be omitted from surrounding the shortcode attributes in order to not conflict with HTML’s double quotes (alternatively single quotes (') can be used for either the HTML or shortcode attribute).

{lt}a class="ui large primary button" href="<add_to_cart_url id=76>"{gt}<icon cart plus> Add to cart{lt}/a{gt}
{lt}a href="<add_to_cart_url id=76>"{gt}Add to cart link{lt}/a{gt}

WooCommerce add to cart shortcode

The WooCommerce [add_to_cart] shortcode can be used to create an add to cart button by using the template that is used to produce it for products on the Shop page (/woocommerce/loop/add-to-cart.php). The button works with AJAX and can add an item to the cart without reloading the page. The appearance depends on your current active theme. For Chap theme the button doesn’t look very good since the products are normally displayed in Semantic UI Card context. The shortcode is also not AMP-compatible so Chap theme includes a custom [wcaddtocart] shortcode (see below) to do the same thing in a different manner.

<add_to_cart id="99">

Chap theme’s add to cart shortcode

The [wcaddtocart] shortcode is Chap theme’s AMP-compatible alternative for the WooCommerce [add_to_cart] shortcode.

<wcaddtocart id="99">

<wcaddtocart sku="patient-ninja">

<wcaddtocart id="1045" show_price="false">

<wcaddtocart id="67" show_price="false" button_classes="big positive circular">