WordPress product settings

How to customize product screen settings in your app

AppMySite enables you to customize how product screens look and function in your app. To do this, navigate to the Products screen from your WooCommerce app dashboard. You will find all configurable settings under two sections: product list and product details.

Customize product list settings

Customize the way products are displayed in the app's product listing.

Product Display Options

• Show filter – Allow users to filter products by attributes.

• Show sort – Enable sorting options so users can arrange products based on their preferences.

• Show search icon in header – Display a search icon in the header for quick product searches.

• Show grid view – Display products in a structured grid format instead of a list.

• Show wishlist icon – Display a heart icon allowing users to add products to their wishlist.

To use the Wishlist feature, the app user must be logged in. The feature is not available in offline mode.

Discount & Availability Indicators

• Show discount badge – Display a badge on products with a sale price.

• Badge background color – Customize the background color of the discount badge.

• Badge icon color – Choose the icon color of the discount badge.

• Show discount percentage – Display the discount percentage within the badge.

• Show "Out of stock" watermark – Indicate when a product is out of stock.

Image & Button Settings

• Original images – Display uploaded original images without optimization (may affect app load time).

• Show add to cart button – Display the "Add to Cart" button on product listings.

• Image ratio – Define the aspect ratio of product images to match your design.

• Image shape – Select the preferred shape of product images.

• Center crop images – Maintain a consistent image appearance by centering them within the frame.

Enable grid view for a structured product layout and use discount badges to highlight promotions effectively.

Customize product details settings

These settings control how individual product pages appear and function.

Page Display Options

• Render as web view – Display the product details page as it appears in a mobile browser.

• Show additional information – Display extra product details.

• Show additional information as a list – Present additional details in a list instead of comma-separated values.

• Show wishlist icon – Enable to display a wishlist icon in the header for quick access to products added to the app user’s wishlist.

Saved items in the appear on the Wishlist screen with real-time sync and haptic feedback.

Image Settings

• Show images in gallery – Allow users to tap on a product image to view it in a gallery.

• Show images as thumbnails in gallery – Display product images as thumbnails within the gallery view.

• Image ratio – Define the aspect ratio of images within product detail screens.

• Center crop images – Keep images centered within the frame for a uniform display.

Related Products & Discovery

• Show related products – Display related products at the bottom of the product page.

• Filter-related products – Choose how related products are filtered and displayed.

Enabling Render as Web View will automatically disable other page settings, as the page will be displayed exactly as it appears in a mobile browser.

Using related products helps increase product discovery and improves user engagement.

Customize checkout settings

• Show native payment screen – Display payment options on a native checkout screen. Disabling this option redirects users to the web view payment screen.

Save your changes

Once you configure these settings, click save to apply them.

These settings allow you to customize the product screen and improve the shopping experience in your WooCommerce-based mobile app. They are only available if you use the WooCommerce product for your app.

All products, including images and content, are directly fetched from your WooCommerce website, ensuring real-time updates and synchronization in your app.