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:

You would use this code:

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

<h2 padding>Featured</h2>

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

<h2 padding>All Products</h2>

<woo-list route="products" class="col-2" 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:

<woo-cart></woo-cart>

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

Examples

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

route="products?category=123"

Display only certain products:

route="products?include=12,13,72"

Display only products that are on sale and in stock:

route="products?on_sale=true&stock_status=instock"

You can find other parameters for displaying products in the WooCommerce API documentation.

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>

You can use any argument found in the WooCommerce category API documentation, such as include, exclude, product, etc.

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 }