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:

<woo-cart></woo-cart>

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

Examples

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

route="products?category=clothing"

Display items from multiple tags:

route="products?tag=women,red,small"

Display only products that are in stock:

route="products?stock_status=instock"

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 either custom CSS or template hooks (covered further down).

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 }

Customizing Product Lists and Product Details page

Product list and product details pages in your app display predefined content and data from the API. If you want to add more information, such as a product brand or other data, this is possible with template hooks. Below you can find the available template hooks.

appp.woo_list.above_title - Display content above the title on the product list page

appp.woo_list.below_title - Display content below the title on the product list page

appp.woo_list.below_content - Display content below the description on the product list page

appp.woo_detail.above_title - Display content above the title on the product detail page

appp.woo_detail.below_title - Display content below the title on the product detail page

appp.woo_detail.above_description - Display content above the description on the product detail page

appp.woo_detail.below_description - Display content below the description on the product detail page

appp.woo_detail.above_add_to_cart - Display content above the "Add to cart" button on the product detail page

appp.woo_detail.below_add_to_cart - Display content below the "Add to cart" button on the product detail page

appp.woo_detail.below_content - Display content below the description on the product detail page

Usage

This code goes in a plugin on your WordPress site. First, make sure the appcommerce plugin is enabled. In this example, we are adding brand meta to the wp-json/appcommerce/v2/products endpoint.

function extend_product_response($response) {
    $response['appp']['woo_detail']['below_content'] = '<span class="brand-name">' . get_post_meta($response['id'], 'brand', 1) . '</span>';

    return $response; 
} 
add_filter('appcommerce_get_product_response', 'extend_product_response', 10, 1);

You can edit the code above to add any information you want on your product list or/and product details. This is an advanced customization technique, and we can only offer limited support.