AppCommerce Customization

AppCommerce is a fully API based integration with WooCommerce. That means it won't display your theme or custom plugins (except on checkout), so all your customization happens in the app builder (or through the API).

Customizing Your Shop and Cart Pages

You can customize the shop and cart pages as much as you want by adding extra components.

You must have the 1 required component (woo-list or woo-cart) on the page somewhere, but you can add whatever you want around that.

For example let's say you want your shop page to look like this:

Using blocks, you would add a Product Slider, then a Title block, then a Products block.

On a custom HTML page, you would use this code:

<woo-slider route="products/categories?hide_empty=true"></woo-slider>

<h2 class="ion-padding">Featured</h2>

<woo-slider slidesPerView="3" route="products?featured=true"></woo-slider>

<h2 class="ion-padding">All Products</h2>

<woo-list route="products" class="col-2" search="true" infiniteScroll="true"></woo-list>

Customize as much as you want. 

On your cart page, you could display some featured products to entice people to buy more.

The code would look like this:


<h3 class="ion-padding">You may also be interested in...</h3>

<woo-slider route="products?featured=true" card="true" slidesPerView="3"></woo-slider>

Customizing Product Lists

To display different products in your lists or sliders, for example from a specific category, you would use url parameters with the route.

On a block page, you can add these in the parameters field.

On a custom HTML page, you can add these in the route attribute as shown below.


Display products from a certain category (use the category slug):


Display items from multiple tags:


Display only products that are in stock:


To customize API responses further, you will need to use WooCommerce API hooks and filters that can also be found in their documentation.

To customize the categories that show in the category filter toolbar, you can use categoryParams like this:

<woo-list categoryParams="exclude=32,33" route="products"></woo-list>

If using a plugin like WooCommerce Bookings, you can add the bookings product type like this: route="products?type=booking,simple,variable"

Please see this article for all available product list parameters.

Visual and CSS Customization

All AppCommerce pages except checkout are hardcoded into the app, so if you want to change the way they look, you have to use custom CSS.

You'll need to use a browser inspector to find the CSS selectors, and then add those in the custom CSS box in your Design tab. This is an advanced customization technique, and we can only offer limited support.

Each woo element has a selector you can use to customize it:

  • woo-list for the <woo-list> component
  • woo-slider for the <woo-slider> component
  • woo-cart for the <woo-cart> component
  • woo-account for the <woo-account> component
  • page-woo-list for search results and categories

Example CSS

Here's an example of changing the toolbar color:

.woo-list-toolbar .toolbar-background { background-color: #000; }

Here's how to make the woo-slider background images full size:

woo-slider ion-slides .card-featured-wrap {
height: 100%;
background-size: contain;

Here's how to make the woo-list featured images bigger:

woo-list .card-featured-image, page-woo-list .card-featured-image {
height: 50vh;

Remove cart quantity buttons:

woo-cart .product-quantity { display:none }

Hide the price on product lists:

woo-list .product-price, page-woo-list .product-price { display: none }