Open Store Free
  • Buy Themes
  • Documentation
    • Kalles Shopify Theme
    • Kalles WordPress Theme
    • Gecko Shopify Theme
    • Elessi Shopify Theme
  • License FAQs
  • Open Ticket
  • Buy Themes
  • Documentation
    • Kalles Shopify Theme
    • Kalles WordPress Theme
    • Gecko Shopify Theme
    • Elessi Shopify Theme
  • License FAQs
  • Open Ticket

Kalles WordPress Theme

home/Documentation/Kalles WordPress Theme
Popular Search:Import demo, Update theme, Custom color
  • 2. CHANGELOGS
  • 3. INSTALLATION
    • How to import demo data?
    • Install theme
    • Installing Required and Recommended Plugins
    • System Requirement
  • 4. UPDATE THEME
    • How to update the plugins that came with the theme
    • How to update the theme?
  • 5. SHOP PAGE
    • How to add the content for filter on mobile device
    • Sub Categories
    • Top Categories Menu
  • 6. PRODUCT PAGE
    • Brand page
    • Buy more save move feature
    • Complete The Look
    • Dynamic checkout buttons
    • External/Affiliate Product
    • Frequently Bought Together
    • Grouped Product
    • Other product swatch types
    • Product 360 viewer
    • Product Swatches Color
    • Product Swatches Gallery
    • Product Swatches Images
    • Product Upsell Features
  • 7. THEME OPTIONS
    • Blog
    • Cart & Checkout
    • Categories page
    • Color Scheme
    • Custom 404 page
    • Custom CSS JS
    • Footer settings
    • General Settings
    • Header
    • Maintenance Mode
    • Popup
    • Portfolio
    • Product Page Configuring
    • Social Network
    • Typography
    • WooCommerce General
  • 8. ELEMENT SECTIONS
    • Banner
    • Banner carousel
    • Banner Custom
    • Banner Packery
    • Blog
    • Categories List
    • Deal of the day
    • Featured Product
    • Heading
    • Icon and Text
    • Instagram shop
    • Kalles Newsletter
    • Links list
    • MailChimp
    • Member
    • Portfolio
    • Product
    • Product Tabs
    • Products
    • Testimonial Carousel
  • 9. FEATURES
    • Ajax Login, Google Capcha Verify
    • Myshopkit Configuration
    • New Filter Layout
    • Popup Login
    • Portfolio
    • Price Range Slider Filter
    • Social Login
    • Store Location page
    • White Label
  • 10. THEME FAQs
    • Currency
    • How to Build a Mega Menu?
    • Why and how to install the child theme?

Products

249 views 0 January 12, 2022 Sarah

This section is allowing to show a product grid on your page.

1. Add Products

  1. From Dashboard > Pages > All Pages > Choose the elementor page you want to modify > Edit with elementor.
  2. Scroll down to Kalles Theme > drag and drop the Products above the section then it will appear an Edit box.

2. Configure Products’ Content

2.1. Content

  • List product style: There are 4 styles. They are Grid, Metro, Masonry, Carousel.

  • Display: This option allows to display product by some conditions.  They are All products, Recent products, Featured products, Sale products, Best selling products, Top Rated Products.
  • Order By: This option allows to display product by some conditions. They are Title, Date, ID, Author, Modified, Random, Comment count, Menu order.
  • Order: This option allows to display product by 2 conditions. They are Ascending or Descending.

You can watch this video below to get more detail about the Display, Order By, and Order options.

  • Products: Input the name of the product that you want to show on the product list. Then you’ll see suggestions.

  • Product Category: If you don’t want to add product manual, you can select product categories that you want to show on the product list.
  • Per page: Enter the number of products that you want to display on one page.

2.2. Settings

  • Columns: There are 3 number of column types. They are 2-column style, 3-column style, 4-column style, 5-column style, 6-column style.
  • Enable Flip Product Thumbnail: When you hover over the product, the second image will appear.

  • Load more button: Turn on this option to show the Load more button.  Please note that if you want to show Load More button so the number of product must more than product Per Page from Content option block.

  • Load More Type: There are 4 types.

  • CSS Animation: There are 5 style animation. They are Top to bottom, Bottom to top, Left to right, Right to left, Appear from center.
  • Extra class name: You also can add an extra class name in this option. (Style particular content element differently – add a class name and refer to it in custom CSS).

3. Configure Products’ Style

From this tab, you will able to config attribute of Hover Product Style, Product Title, Product Title Color, Product Price, Product Price Color.

Image size: This is important option and you should understand. Because customers always upload product image with different size so we developed this option to allow make all product images have same size. For example: If I config image size is Medium – 500×500.  This is the result:

Was this helpful?

Yes  No
Copyright 2021 the4.co. All Rights Reserved.
Popular Search:Import demo, Update theme, Custom color