Customise products page
How can I customise the WooCommerce product page on my app?
AppMySite enables you to customize how product screens look and work on your app. To do this, navigate to the Products screen from your WooCommerce app dashboard. You will find all configurable settings in two sections. These sections have been covered below:
Product list
Show filter - Allow app users to filter products by attributes.
Show sort - Allow your customers to sort products based on their preferences.
Show search icon in header - Display a search icon in header for quicker access to relevant content.
Show grid view - Display products in a grid view instead of a list view.
Show discount badge - Display the discount badge on your products. This will appear for products that have a discounted sale price.
Badge background color - Customize the background color of discount badges.
Badge icon color - Customize the icon color of discount badges.
Show discount percentage - Display the discount percentage in the discount badge.
Show the "Out of stock" watermark - Display the discount percentage on the badge.
Original images - Display uploaded initial images of your products. Original images are not optimized and will increase your app's load time.
Show add to cart button - Display the "Add to Cart" button.
Image ratio - Define the aspect ratio of product images. Select a suitable image ratio corresponding to the product image.
Image shape - Define the preferred shape of the product images.
Centre crop images - When enabled, the images will be centred within the frame for a consistent look. When disabled, they will be displayed to fit the frame while maintaining their original aspect ratios.
Product details
Render as web view - Render the product details page exactly as displayed on your mobile browser.
Show images in gallery - Allow users to tap on the product image to launch a gallery.
Show images as thumbnails in gallery - Allow users to tap on the product image to launch a gallery.
Show additional information - Display additional product information.
Show additional information as list - Display additional product information as a list instead of values separated by commas.
Show related products - Display related products on the product page.
Filter-related products - Choose what related products to show on the product page.
Image ratio - Define the image aspect ratio for your products. Select a suitable image ratio corresponding to the product image.
Centre crop images - When enabled, the images will be centred within the image frame, for a consistent look. When disabled, images will be displayed to fit the frame while maintaining their original aspect ratios.
Checkout
Show native payment screen - Display the payment options on a native screen. Disabling this option allows users to choose payment options directly on the rendered web view payment screen.
With these settings, you can customize the appearance of your products in your mobile app. These settings are only available if you use the WooCommerce product for your app.
Last updated