I got an interesting question the other day from Jean:
I’m switching from WooCommerce to iThemes Exchange, but I don’t see a way to use shortcodes for products in my blog posts like I could with WooCommerce. Am I missing something?? Or does this not exist?
Unfortunately this is one shortcoming of Exchange — product and add to cart shortcodes are not included in the core plugin, so you can’t “embed” your products in a blog post on your site.
However, there is a tutorial on creating a shortcode you can follow, but I’m going to expand on this a bit today to give you a Exchange add to cart shortcode with a few more possibilities.
In its simplest form, our shortcode will let you do this:
[ite_add_to_cart id="42"]
You’ll replace 42 with your product ID (the WordPress post ID).
This will generate a product section in your content that looks like this:
It includes the image, price, and quantity selector. We’re going to take this shortcode a step further to let you determine whether you want to show the image or not, the quantity selector, and change the button text.
Before you follow this guide, be sure you know how to add custom code to your site properly. We’ll need one function to create our new shortcode to output our product’s content and add to cart button.
First, here’s the code we’ll need to do so:
This gives us a few possibilities for the code: we must set the product ID, but then we can determine whether to set “qty”, “img”, and “label” if desired:
[ite_add_to_cart id="product_id" qty="yes/no" img="yes/no" label="Add to Cart"]
Here’s what you need to know about each attribute:
- id: the product ID; must be a valid ID for an Exchange product
- qty: determines if the quantity box is shown; defaults to yes (shown)
- img: determines if the product images is shown; defaults to yes (shown)
- label: the button text; defaults to “Add to Cart”
If your’e okay with the default attributes, you don’t need to change them while using the shortcode.
Example 1: All defaults
Just using [ite_add_to_cart id="99"] will give you an output with the image, quantity selector, and default label:
Example 2: No quantity, new label
You can turn the quantity selector off by setting it to anything other than “yes”, and you can set the button text to whatever you want:
[ite_add_to_cart id="42" qty="no" label="Get this!"]
Example 3: No quantity or image
If you want a more compact display, you can get rid of the image and quantity selectors by setting them to anything but “yes”:
[ite_add_to_cart id="42" qty="no" img="no"]
If you change the code to create this shortcode, be sure to adjust your usage as well.
