Chap WordPress theme
Chap

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
?add-to-cart=76
[add_to_cart_url id="76"]

Notes

Echo the URL on the add to cart button of a single product by ID.

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).

Add to cart button using add to cart URL
Add to cart button
Add to cart link
<a class="ui large primary button" href="[add_to_cart_url id=76]">[icon cart plus] Add to cart</a>
<a href="[add_to_cart_url id=76]">Add to cart link</a>

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

$3.00 $2.00View product

[add_to_cart id="99"]

Notes

Show the price and add to cart button of a single product by ID.

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 shortcode arguments
idProduct ID.
skuProduct SKU.
quantityQuantity (default: 1).
show_priceShow price (default: true).
wrapper_classesWrapper classes (default: "ui paddingless compact segment product woocommerce add_to_cart_inline").
price_classesPrice wrapper classes (default: "ui big top attached center aligned bold text basic primary segment").
button_classesAdditional classes for the button.
Add to cart button by ID
$3.00 $2.00
View product
[wcaddtocart id="99"]
Add to cart button by SKU
[wcaddtocart sku="patient-ninja"]
Add to cart button without price
View product
[wcaddtocart id="1045" show_price="false"]
Add to cart button with custom classes
View product
[wcaddtocart id="67" show_price="false" button_classes="big positive circular"]