No matter what theme you use, there are universal settings you can choose for WooCommerce so your site looks like the demo. See screenshots and details below about where to find these. I have highlighted the areas you can edit in this area of the site, and note below where more extensive changes can be made through the Elementor templates.
Go to Appearance >> Customize >> WooCommerce
Shop Page: to get to the main settings that determine your Shop and other related pages.
- Product Images – this is by default set to 1:1 for the best layout on the SHOP page. This will create a square shae for your images and crop/resize them appropriately. You can adjust this if you choose to be more creative, or if your product images all tend to be wide in shape.
- Shop Page – this is where most of your changes will probably be made. You can dictate what shows on your main Shop page (most choose Products, but you can change that), you can also indicate how many products are shown in a row. This is a setting that most people like to play around with. Our demo is set for 3 products on each row (Desktop), 3 products in a row (Tablet) and 2 in a row (Phone).
- Item Structure – this is where you choose what you want to show under the main product image on the Shop page. Our demo is showing the default Category > Title of Product > Price > Add to Cart button. You can make changes here if you choose to show more or less details.
KEEP IN MIND – since Elementor is being used, some settings are NOT controlled here like the ones listed below. If you want to make changes to these items, go to
Templates >> Theme Builder >> Shop Template
- You can not hide these items in this area:
- Page Title
- Breadcrumbs
- Result Cont
- Ordering
- You can not change styling for these items here:
- Grid Gap
- Sales Badge Layout
- Sales Badge Font (size & color)
- Sales Badge Color
- Sales Badge Alignment
- Title Font (size & color)
- Price Font (size & color)
Store Notice: you will want to make a quick change in this area, for the notice that comes up when someone adds an item into the cart, or for other store notices.
- Info Notice – change the default WooCommerce color for checkout messages to match your site branding. You can change it to any color here (using the HEX color or by choosing using the color map they offer when you click Select Color.
- Success Notice – make the same change here as above, customizing the color of the message that comes up when an item is added into the cart.
Typical success message when adding an item to the cart
Product Page: the settings in this area are handled through the Elementor template. So if you want to make adjustments to the individual product page go to Templates >> Theme Builder and choose Single Product Template.
Checkout: the settings in this area are so you can customize certain messages and information collected on the final checkout page. You can make edits here and save your changes so they are reflected on the front-end of your website.