User Tools

Site Tools


Write-in Purchase Buttons

Write-in button support allows you to code purchase buttons into the block, which connect to CE4 Cart.

In a typical CE4 Gallery, each image has its own purchase button. Write-in button support allows you to create a single button for an entire page, when using any of the following plugins:

  • CE4 Auto Index
  • CE4 Pages
  • CE4 Stage
  • CE4 Theme for WordPress

So as an example, you might use CE4 Stage to create a product page. You setup a Galleria slideshow featuring images relating to your product, highlighting specific features or qualities. In the block, you provide a product description and a purchase button. The purchase button adds the item to CE4 Cart for checkout.

The basic format for write-in buttons is this:

<button class="add-to-cart" data-item="unique-item-id" data-name="item-name" data-price="default">BUTTON TEXT</button>

So, let's break this down and tackle each component individually.

We're using the <button /> HTML element. In practice, it looks like this:


The BUTTON TEXT will be readable on the button, so this should be something like “Add to Cart”, “Buy” or “Purchase This Widget”:


The “add-to-cart” class is required. This triggers our script so that we know to run the cart on the button:

<button class="add-to-cart">Buy</button>

If you want to setup some custom button styling, you can do that using PHPlugins and Custom CSS. Any classes that you add to the button will be applied in the normal way, so you can make different button types with varying colors, sizes, etc. For example, you might create classes such as “button-green” to make green buttons, and “button-large” to increase the overall size of your buttons:

<button class="add-to-cart button-green button-large">Buy</button>

The button uses HTML5 data- attributes to communicate necessary information to the cart. There are four attributes:

A unique identifier for the item being sold; do not use spaces or punctuation (hyphens and underscores are okay).

A human-readable name for the item being sold.

The name of the price profile to be used for the item. This should match the name of a price profile setup within the CE3 Cart admin.

A representative thumbnail image for the item which will appear in the cart listing. Should be a relative URL from the page's own location.

Putting it all together, a complete purchase button might look like this:

<button class="add-to-cart" data-item="ebook-0001-litportraiture" data-name="Better Portraits with Portable Strobes" data-price="ebook" data-thumbnail="litportraiture-cover.jpg">Buy My New eBook</button>
ce3cart_write-in_buttons.txt · Last modified: 2015/03/07 12:33 by ben

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.