WooCommerce Setting

Last updated 4 months ago

This section will go through the guide for Setup from your WooCommerce site

Product Display Sizes

Open your WordPress Dashboard admin. Open WooCommerce > Settings > Products > Display

Open the file src/config.js and config at the Step 2 and enable the option:

ProductSize: {
enable: true,
CatalogImages: { width: 300, height: 360 },
SingleProductImage: { width: 600, height: 720 },
ProductThumbnails: { width: 180, height: 216 },
},

You may get the blank image issues at the first place when change to your Wordpress URL, this cause by the product image size is not display correctly or the Better Feature Image plugin is not install, please check following solution:

  1. Try to update enable: false to see if the images can be shown, if not check the Wordpress plugin (https://docs.mstore.io/~/drafts/-LJC5tEPd8BLT3fsljHG/primary/basic-app-setting#wordpress-plugins-install)

  2. The app could be quite slow without image optimize loading, try enable: true and go the the setting to map the image size as above guide

This setting will help to boost up your app performance as the default setting will load the full resolution product image that cause the app low lower.

Product Display Color

Open your Wordpress Dashboard admin, select Products > Attributes > create or edit new attribute with slug "color", then add your own items

Example setting color

To support more color from the app, open the src/common/Color.js and update the below object (make sure the key should be same as the Slug name):

  • Try to use Flat Color setting.

  • In order to show the color attribute the slug should be name "color"

If you have trouble with these setting and would like to refer the pre-config website from us, try to download from http://github.com/inspireui/mstore

Variation Products

Ref to this document to know how to set up the product variant from WooCommerce website - https://docs.woocommerce.com/document/variable-product/

Select Products/Attributes from the left menu and create new attribute for the product

The correct setting for attributes

Video demo: