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?

Product Tabs

208 views 0 January 20, 2022 Updated on January 21, 2022 Sarah

Product tabs allows you to display categories as tabs. For example, you may have three tabs, each tab for one collection. You can build any tab to show whatever collection you want.

1. Add Product Tabs

  1. From Dashboard > Pages > All pages > select the home page you want to add Product Tabs > Edit with elementor.
  2. Scroll down to Kalles Theme > drag and drop the Product Tabs into the page.

2. Configure Product Tabs’ Content

2.1. Tabs

  • Title: Enter title for the product tab.
  • 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.
  • Category: If you don’t want to add product manual, you can select product categories that you want to show on the product list.
  • 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.

2.2. Settings

  • Tabs style: There are 3 styles.

  • Tabs Color: Select for color for the tab.
  • Product style: There are 3 styles. They are Grid, Masonry, Carousel.
  • Columns: There are 5 types. You can choose 2 columns, 3 columns, 4 columns, 5 columns or 6 columns.
  • Items per page: Enter the number of products that you want to display on one page.
  • 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.

  • 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 Product Tabs’ 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 – 300×300.  This is the result:
This video below is an example of how sections work after you’ve made all of the necessary changes.

Was this helpful?

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