Let’s find out how to insert “Add to Cart” buttons anywhere you want so you can transform your website into a storefront instantly, which is what I’ve done with my website (see the red Add To Cart WooCommerce button below).
To do this, you can use the WooCommerce shortcode
[add_to_cart id="" sku=""]
where id = product ID (required) and SKU is optional.
You can get the product ID from the Products screen: the ID is shown when you hover over the product – see below. Don’t mistake product ID with SKU as the latter can be a number too! If your shortcode doesn’t work, it’s most likely because the id is incorrect so that’s the first place I would check.
Also, to get rid of the border surrounding the button, you can add style=”display:inline;margin: 0px”.
As an example, [add_to_cart id="23" style="display:inline;margin: 0px"] will display the button below, preceded by the original and current price:
In addition, if your site doesn’t have a lot of products, you may want to set WooCommerce to go directly to the Shopping Cart site once a product has been added so your user can easily checkout after that. You can do this by going to WooCommerce-Settings-Products-Display and ticking “Redirect to the cart page after successful addition” as shown below. This has been implemented for this website so you can test it out to see what happens when you check the Add To Cart button.
Visit WooCommerce shortcodes for more useful shortcodes.
Please share or leave a comment if this is useful so I can do more of the same!