Display settings for Blog, Shop single pages

How to show/hide theme elements (title, featured image, tags, etc.)

In some places, you can globally show/hide the theme elements, such as titles, subtitles, images, metadata. These options can be found on Archive and Single page settings such as BlogPortfolioShop and in the HeaderFooterSearch template and Page Title bars.


For example, you can simply refuse to show the Featured Image on Blog single posts by deactivating its option in Customizer > Blog > Blog Single > Settings > Display Elements.

Display Options are not only show/hiding something. But it’s how you choose the layout of your content too. You can choose how your single content look. It also effects on other options if you choose a different template for your single pages.


For example, you can change the layout on a single product page in Customizer > Shop > Product Page > Settings > Template.

Product Archive in Shop Customizer

The Shop Customizer provides an option to customize the product archive pages. The product archive page is a shop page where the products are shown.

Note: You can check out the demo of a product archive page here.

All of the settings below can be found in WordPress left menu, Appearance > Customize.


To customize the product archive page:

1. From the Customizer left dashboard, click on Shop > Product Archive.

2. A new window will open with all the available options to customize and style the product page. Now you can change margin/padding values on the page.

3. After you’ve configured the settings, click on the Close button.

4. Click on the Publish button. The changes you have made will be applied to the front-end of your website.

If you want to style the product archive page, please refer to this article.

Checkout & Cart Pages in Shop Customizer

The Shop Customizer provides an option to customize the Checkout & Cart pages. The Checkout & Cart pages are shop pages where a customer can manage the items that they have decided to purchase.


All of the settings below can be found in WordPress left menu, Appearance > Customize.

To customize the Checkout & Cart pages:

1. From the Customizer left dashboard, click on Shop > Checkout & Cart.

2. A new window will open with all the available options to style the Checkout & Cart pages.

3. You can translate the steps on Checkout and Cart pages in the Steps menu and style the typography settings.

4. After you’ve configured the settings, click on the Close button.

5. Click on the Publish button. The changes you have made will be applied to the front-end of your website.

Note: Your Shop, Checkout and Cart pages should not be edited by Elementor. In case you have edited them with Elementor, you will lose them and won’t be able even to edit them by Elementor. Simply switch to the text editor in those pages and use these page shortcodes inside them:

[woocommerce_cart]

This shortcode will be used for Cart page.

Then make sure they are set correctly inside the WooCommerce settings as described in the Woocommerce article.

Tip: Use Growmatik Personalizer tool, to show related upselling products in checkout page and increase your order bump.

Product Page in Shop Customizer

The Shop Customizer provides an option to customize the product pages. The product page is a single shop page where the customers are able to check out the product in detail and add it to their cart.


Note:
 You can check out the demo of a product page here.


All of the settings below can be found in WordPress left menu, Appearance > Customize.


To customize the product page:

1. From the Customizer left dashboard, click on Shop > Product Page.

2. A new window will open with all the available options to customize and style the product page.

3. After you’ve configured the settings, click on the Close button.

4. Click on the Publish button. The changes you have made will be applied to the front-end of your website.

Tip: Use Growmatik Personalizer tool, to show personalized products that have a high possibility of getting purchase by your current viewer on any page on your website.

Product List in Shop Customizer

Note: In order for the Shop Customizer to work, WooCommerce plugin must be installed and activated. To learn how to activate it, check out this article.

The Shop Customizer provides an option to customize the Product List. The Product List is a shop page with a product loop that displays your products.

Note: You can check out the demo of a product list here.


All of the settings below can be found in WordPress left menu, Appearance > Customize.

To customize the product list:

1. From the Customizer left dashboard, click on Shop > Product List.

2. A new window will open with all the available options to customize and style the product list.

3. There is a new feature is the Styles tab where you can re-order the items position in the product list: Name, Category, Regular price, Rating.

Just drag the items to the position you need.

4. After you’ve configured the settings, click on the Close button.

5. Click on the Publish button. The changes you have made will be applied to the front-end of your website.

TIP: Use Gromwatik Personalizer tool to show highly personalized product groups in your product list.

What is Shop Customizer

Note: In order for the Shop Customizer to work, WooCommerce plugin must be installed and activated. To learn how to activate it, check out this article.

WooCommerce has lots of features that help you run an E-Commerce website the easiest way possible. However, some users may need to customize their shop look even more. It is possible to customize the woocommerce templates in any WordPress theme and then start coding to have a proper look. It’s the classic way to customize your shop. 
However, Jupiter X Shop Customizer introduces a new way of customizing anything in your shop, the easiest way possible without any line of code. It has premade templates, a set of option to customize the paddings, margins, backgrounds, alignments, colors, typography settings, pagination and anything else you can imagine. The good thing about the Shop Customizer is that you can see what you are editing because all the edits are live and available through Shop Customizer.

To make it more classified, we divided the options into 4 main categories:

  • Product Archive (contains options to customize the WooCommerce archive pages)
  • Product List (contains options to customize the list of products anywhere in the archive or single woocommerce pages)
  • Product Page (contains options to customize the WooCommerce Single product pages)
  • Checkout and Cart (contains options to customize the WooCommerce Cart and Checkout pages)

All of the settings can be found in WordPress left dashboard, Appearance > Customize.

There are a couple of points you need to know if you are going to use the Shop Customizer alongside with the main page builder Elementor:

1. Make sure that your default shop pages don’t have any Page Template in the Page Attribute section.

2. You can not edit the default WooCommerce pages with Elementor.

3. There is also a Product element which you can use to create your own product list, but you should put differences between the default Shop Pages and the pages you created with this element. To find out about the Products element, please check this article.

Note: Your Shop, Checkout and Cart pages should not be edited by Elementor. In case you have edited them with Elementor, you will lose them and won’t be able even to edit them by Elementor. Simply switch to the text editor in those pages and use these page shortcodes inside them:

[woocommerce_cart]

This shortcode will be used for Cart page.

Then make sure they are set correctly inside the WooCommerce settings as described in the Woocommerce article.

Tip: Use Growmatik Personalizer tool, to show personalized products that have high possibility of getting purchase by your current viewer on any page on your website.

Setting up Shop page

How to create Shop page with Jupiter X

Jupiter X theme is compatible with WooCommerce plugin, the de facto solution for E-Commerce in WordPress. Take the steps below to install and set up shop.

Setting up Shop

1. Install WooCommerce.  
Woocommerce plugin is bundled in Jupiter X and you can install it via Jupiter X > Control Panel > Plugins and click on Activate button for Woocommerce.


After activating the plugin, you’ll be shown the set up wizard to configure the settings and install default pages like Shop, Cart, Checkout, My Account. But you can skip this and configure the settings later. Also default pages can be installed from the left WordPress dashboard menu in Woocommerce > Status > Tools tab > Create default Woocommerce pages.

3. Set the Shop Settings.  

Set your shop details regarding the location, currency, measure units, tax information, checkout process, shipping and more in WooCommerce settings. You can access this section by going to WordPress Admin Menu > WooCommerce > Settings. For more detailed information regarding WooCommerce settings click here.

4. Add Products.  

The next step will be adding products to your shop. You can add products by accessing WordPress Admin Menu > Products > Add Product. You can add Product Title, Description, Short Description, Categories, Tags and many more details on this page. For more information click here.

You can add description using Elementor page builder and add Elementor widgets to the content, but make sure you enabled Elementor for Products post type in Elementor > Settings as described in this article.

Also you can adjust the styling of a single product page using Shop Customizer in Appearance > Customize > Shop > Product Page. Read the article Product Page in Shop Customizer for the detailed information.

6. Add the Main Shop Page.  

Create a new page by going to WordPress Admin Menu > Pages > Add New. Add proper Title and other information which you would do for any normal WordPress page. You can skip this step if you used Woocommerce set up wizard and default Woocommerce pages were created in that wizard. 

7. Set the Main Shop Page.  

Go to WordPress Admin Menu > WooCommerce > Settings and click on ProductsTab. On that tab you will see a sub tab link called General. Click on that sub tab to show the set of options to select the main shop page. Use the Shop Page option to select the page you just created in the previous step.

Now you have a working shop for your website. For more detailed information about WooCommerce plugin usage, click here.

Warning! If you set the main Shop page via Woocommerce settings, it can’t be edited with Elementor page builder. You can use Elementor only for a custom page that is not assigned to Main Shop Page and other default Woocommerce pages in Woocommerce settings. 

Alternative Product Loops

Jupiter X provides a set of widgets in Elementor to add a product list on your website other than the main shop page. To do that, add a page and use the Elementor editor to add the Raven Products element to the page. In this case, Shop Page in Woocommerce settings must be blank! Also there are a few other elements provided by default in Elementor and WooCommerce that you can take advantage of. The elements are listed below:

  • Products from WordPress
  • Woocommerce Recent Products
  • Product Categories
  • Woocommerce Product
  • Woocommerce Featured Products
  • Woocommerce Top Rated Products
  • Woocommerce Sale Products


If you’d like to customize the styling for product archive pages, like product categories, you can do this via Shop Customizer in Appearance > Customize > Shop > Product List. Refer to this article for more information. It will also style the content for Raven Products element if you added it to your custom Shop page.

Setting Layout for Product Archive pages

When creating a custom page you have a possibility to set its layout to Full Width or Default (with sidebar). But what about archive pages, for example category pages to which you assign the products? What if you want to set sidebar for one category, but have full width page for another? You’ve got such opportunity when creating a category or edit a category after its creation.

1. Go to Products > Categories > Add New Category.

2. Fill in the fields and in Layout setting choose the layout for this new category. You can have a layout with sidebar or without sidebar. If you set it to Global, the setting will be applied from Appearance > Customize > Sidebar.


Note:
 If you forgot to select the layout while creating a category, you can change it in the category editor. Edit a category in Products > Categories and set the Layout option to the needed setting.

Also, you can set a global layout for all category pages.

1. Go to Appearance > Customize > Sidebar.

2. Under the Settings tab in Exceptions section click on Add New Exception.

3. Select Archive item and set Layout setting to the desired layout.

Note: Archive settings are applied to Blog and Portfolio archive pages as well. Shop exception is related to Main Shop Page in this setting.

Setting up Cart and Checkout pages

The point here is to make sure the Checkout and Cart pages do not have any selected page template from the Page Attributes. The Page Template field should be selected to the Default.

Also, please note that your Shop, Checkout and Cart pages should not be edited by Elementor. In case you have edited them with Elementor, you will lose them and won’t be able even to edit them by Elementor. Simply switch to the text editor in those pages and use these page shortcodes inside them:

[woocommerce_cart]

This shortcode will be used for Cart page.

Then make sure they are set correctly inside the WooCommerce settings as described in the Woocommerce article.

Configuring Product Image Ratios

Aspect ratio and image size have a big impact on your site’s design. We can’t just throw any images onto a website shop and expect them to look good. It’s important to assess how they’ll fit with your website design. To do this, we need to configure the image size and aspect ratio on your website. In Jupiter, product image size and aspect ratio settings can be found in two different places:

To learn how to configure the product image sizes, check out this article.

To learn how to configure the product image ratios, continue reading this article below.


Activating the Shop Customizer

The product image ratio settings can be found in the shop customizer. To learn how to activate the shop customizer, check out this article.


Product List Images

To change the image ratio in the product list:

1From the WordPress left menu, go to Jupiter > Shop Customizer.

2Click on Product List.

3Configure the Image Ratio setting.

4Close the settings window and click on the Publish button.


Product Page Images

To change the image ratio in the single product pages:

1From the WordPress left menu, go to Jupiter > Shop Customizer.

2Click on Product Page.

3Click on the Styles tab.

4Click on the Customize button next to Image and configure the Image Ratio setting.

5Close the settings window and click on the Publish button.

Configuring Product Image Sizes

Aspect ratio and image size have a big impact on your site’s design. We can’t just throw any images onto a website shop and expect them to look good. It’s important to assess how they’ll fit with your website design. To do this, we need to configure the image size and aspect ratio on your website. In Jupiter, product image size and aspect ratio settings can be found in two different places:

To learn how to configure the product image ratios, check out this article.

To learn how to configure the product image sizes, continue reading this article below.


Single Product Page Image

To change the main image size on the single product pages:

1From the WordPress left menu, go to Appearance > Customize.

2From the left dashboard, click on WooCommerce > Product Images.

3Change the value under the Main image width to your desired width.

4Click on the Publish button.


Product Loop Images

To change the product loop image size:

1From the WordPress left menu, go to Appearance > Customize.

2From the left dashboard, click on WooCommerce > Product Images.

3Change the value under the Thumbnail width to your desired width.

4Select a desired option under the Thumbnail cropping to change the image aspect ratio.

5Click on the Publish button.

Displaying Product Posts

There are several ways to display products on your website in Ken theme. This article explains the recommended way for displaying product posts using the product loop shortcode.

To see what can be achieved with the product loop shortcode, check the shop section in our main demo.


Adding Product Posts

Before being able to display your products, product posts have to be added. Read Creating a product post article for more information.


Displaying Product Posts

Below we are going to explain how to display products on a shop page using the product loop shortcode.

Creating a Shop Page

1From WordPress left menu, go to Pages > Add New.

displaying product posts

2Enter a title for your shop page.

Adding the Shortcode

1From Visual Composer screen, click +

displaying product posts

2In Add Element pop-up screen, search for Product Loop and click on it to be added to the page.

displaying product posts

3When the shortcode is added, a new pop-up screen called Product Loop Settings opens. It allows you to configure the shortcode settings.

displaying product posts

Showing Specific Items

There are three settings in product loop settings pop-up which allow you to show the items based on specific categories, attributes or IDs: DisplaySelect Specific Categories.

SettingDescription
Display Shows products based on its attributes.
Select Specific Categories Shows items only from specified categories.

4Click on Save Changes and Publish the page to check the result.

Creating a Product Post

First step in creating a shop on your website is creating a product post. Ken uses the most popular WordPress plugin WooCommerce for this, which let’s you create an online shop.

This article covers installing, activating and setting up WooCommerce, adding a product post and enabling visual composer for it.


Installing WooCommerce

Before being able to create a product post, WooCommerce plugin needs to be installed and activated.

To install and activate WooCommerce in the Ken theme:

1From WordPress left menu, go to Plugins > Add New.

2In the Search Plugins input field, type “WooCommerce“.

Creating a product post - Woocommerce

3Install and activate the top result plugin.

Creating a product post - install Woocommerce

WooCommerce Setup Wizard

After activating the plugin, you will be presented with the WooCommerce setup wizard. This setup allows you to easily configure the basics of your shop in a few easy steps.

1Click on Let’s Go to start the setup.

Creating a product post - setup wizard

2Fill in the options as required and click on continue.

3After the last step is done, click on Create your first product!

Creating a product post - create your first product


Creating a Product Post

To add a product post:

1From WordPress left menu, go to Products.

2Click on Create your first product! button.

Creating a product post - create your first product

There is a lot of different options to set up your product like product types, attributes, etc. Below we are going to cover step by step how to create a simple product, and explain about other product types, as WooCommerce already has detailed article on all product options which you can read here.

Creating a Simple Product

To add a simple product:

1Enter a product name and product description in the title input fields.

2From Product Data dropdown, select Simple product.

Creating a product post - simple product

3Enter the price for your product. The box below is a sale price, which should always be less than the regular price.

Creating a product post - price

4Add a product image by clicking on Set product image.

5Add a category by clicking on Add new product category.

Creating a product post - add new category

6Publish your product by clicking on Publish.

Grouped Product

This product type allows you to have multiple items in a single product page. It does not have a price option as it links to other products on your website and allows users to view all the products on a single page.

External/Affiliate Product

This product type is used when you are promoting an item on your website but it’s actually available for sale on a different website. When creating this type of product, you will be asked for a Product URL which will be used to link to the product on another website instead of Add to cart button on your website.

Variable Product

This product type allows you to sell multiple types of an item, like a different sized t-shirts. This can be set up through the attributes and variations, and each combination can have it’s own price and SKU.

Enabling Visual Composer for Product Posts

In order to use visual composer shortcodes for product description, visual composer for product posts has to be enabled.

1From WordPress left menu, go to Visual Composer > Role Manager.

Creating a product post - VC role manager

2From Post types dropdown, select Custom.

Creating a product post - custom post type

3Click on product.

Creating a product post - product type

4Click on Save Changes.

Configuring the Shop Archive

The Shop archive is an accumulation of all products. It contains all the product posts in one place.

In this article we will explain how to access the Shop archive and its settings. If you are looking to create a shop you should also check out the creating a product post and displaying product posts articles.


Configuring the Shop Archive

Archives are special auto generated pages in WordPress which show a list of posts. There are limited options in Ken to configure this auto generated page. We instead recommend that you add a page and use the Product Shortcode to generate a more configurable archive page for your shop page.

To access the product archive settings:

1From the WordPress left menu, go to Theme Settings > Woocommerce.

shop archive


Archive Layout

To change the layout of the product archive:

1From the WordPress left menu, go to Theme Settings > Woocommerce.

SettingDescription

Shop layout Sets shop loop layout.
Product loop image height Sets the height of the product image.
Shop loop image size Sets the size of the product image.
Product Loops image quality Sets the quality of the product image in the category archive. Available options: Normal Size, Retina Compatible.
Woocommerce Shop Loop Page Title This option allows to disable/enable Shop product Loop title (including breadcrumbs).

2Configure the settings and click on Save Settings.


Adding Widgets to the Sidebar

If your product archive layout has a sidebar, you can add widgets to it:

1From the WordPress left menu, go to Appearance > Widgets.

shop archive

2From the widgets page, drag and drop one of the widgets into the WooCommerce Shop widget area.

3Configure the widget and click on Save.

If there are any questions regarding Shop archive configuration, please contact our support team.

Shop Customizer – Widget Styles

The Shop Customizer is a new feature in Jupiter which lets you customize your websites shop.

In this article, we’ll explain how to use shop customizer to style your widgets on the shop pages.


Widget Styles

The Shop Customizer provides an option to style the widgets on the Shop page.

To access the Shop Customizer once it is activated:

1From the WordPress left menu, go to Jupiter > Shop Customizer.

To customize the Widget styles on the Shop pages:

1From the Shop Customizer, click on the Styles button under Widgets Styles

widget styles

2A new window will open with all the available options to style the Widgets.

widget styles

 

Style options are explained below:


Title

Lets you style the display of the Widget Titles on the shop pages :

Available options to customizeDescription

Font Family Sets a font family style for the text
Font Size Sets a font size for the text
Font Weight Sets a font weight for the text
Normal or Italic Sets a font style for the text
Text Color Select the color of the text
Padding Lets you customize the padding


Boxes

Lets you style the boxes of the Widgets on the shop pages :

Available options to customizeDescription
Color Select the color of the box
Border Radius Sets border radius of the box
Border Width Sets border width of the box
Border Color Select the color of the box border
Margin Lets you customize the margin
Padding Lets you customize the padding


Divider

Lets you style the divider of the Widgets on the shop pages :

Available options to customizeDescription
Divider Width Sets border width of the box
Divider Color Select the color of the box border
Margin Lets you customize the margin

Shop Customizer – Checkout & Cart Styles

The Shop Customizer is a new feature in Jupiter which lets you customize your websites shop.

In this article, we’ll explain how to use shop customizer to style your Checkout & Cart page.


Checkout & Cart Styles

The Shop Customizer provides an option to style the Checkout & Cart pages. These are the shop pages to display the cart and checkout the products.

To access the Shop Customizer once it is activated:

1From the WordPress left menu, go to Jupiter > Shop Customizer.

To customize the Checkout & Cart page:

1From the Shop Customizer, click on Checkout & Cart.

Checkout & Cart Styles

2A new window will open with all the available options to style the Checkout & Cart.

Checkout & Cart Styles

Style options are explained below:

Steps

Lets you style the display of the steps from Cart to Checkout the product :

There are 2 styles with different options:

Style Number

There are Active style and Passive style:

Active Style
Number

Available options to customizeDescription

Background Color Select the color of the number background
Font Family Sets a font family style for the number
Font Size Sets a font size for the number
Font Weight Sets a font weight for the number
Normal or Italic Sets a font style for the number
Number Color Select the color of the number

Title

Available options to customizeDescription

Font Family Sets a font family style for the text
Font Size Sets a font size for the text
Font Weight Sets a font weight for the text
Normal or Italic Sets a font style for the text
Text Color Select the color of the text
Margin Lets you customize the margin

Passive Style

Available options to customizeDescription
Background Color Select the color of the number background
Number Color Select the color of the number
Text Color Select the color of the text

Style Icon

There are Active style and Passive style :

Active Style
Icon

Available options to customizeDescription
Icon Size Sets a font size for the icon
Icon Color Select the color of the number
Margin Lets you customize the margin
Font Weight Sets a font weight for the number
Normal or Italic Sets a font style for the number

Title

Available options to customizeDescription

Font Family Sets a font family style for the text
Font Size Sets a font size for the text
Font Weight Sets a font weight for the text
Normal or Italic Sets a font style for the text
Text Color Select the color of the text

Passive Style

Available options to customizeDescription
Icon Color Select the color of the number
Text Color Select the color of the text


Big Heading

Lets you style the Heading of the page :

Available options to customizeDescription
Font Family Sets a font family style for the text
Font Size Sets a font size for the text
Font Weight Sets a font weight for the text
Normal or Italic Sets a font style for the text
Text Color Select the color of the text
Padding Lets you customize the padding


Boxes

Lets you style the boxes of the Checkout page :

Available options to customizeDescription
Color Select the color of the box
Border Radius Sets border radius of the box
Border Width Sets border width of the box
Border Color Select the color of the box border
Padding Lets you customize the padding


Field Label

[image]

Lets you style the Checkout page Field label :

[image]

Available options to customizeDescription
Font Family Sets a font family style for the label
Font Size Sets a font size for the label
Font Weight Sets a font weight for the label
Normal or Italic Sets a font style for the label
Text Color Select the color of the label
Padding Lets you customize the padding


Field

Lets you style the Checkout page Field :

Available options to customizeDescription
Font Family Sets a font family style for the field
Font Size Sets a font size for the field
Font Weight Sets a font weight for the field
Normal or Italic Sets a font style for the field
Text Color Select the color of the field
Color Select the color of the field
Border Radius Sets border radius of the field
Border Width Sets border width of the field
Border Color Select the color of the box field
Margin Lets you customize the margin

Focus Style

Style of the field on focus

Available options to customizeDescription
Text Color Select the color of the field
Color Select the color of the field
Border Color Select the color of the box field


Button

Lets you style the Checkout & Cart pages button :

Available options to customizeDescription
Font Family Sets a font family style for the button
Font Size Sets a font size for the button
Font Weight Sets a font weight for the button
Normal or Italic Sets a font style for the button
Color Select the color of the button
Background Color Select the background color of the button
Border Radius Sets border radius of the button
Border Width Sets border width of the button
Border Color Select the color of the box button
Margin Lets you customize the margin
Padding Lets you customize the padding

Hover Style

Style of the button on hover

Available options to customizeDescription
Color Select the color of the button
Background Color Select the background color of the button
Border Color Select the color of the box button


Back Button

Lets you style the Checkout & Cart page’s back button :

Available options to customizeDescription
Font Family Sets a font family style for the button
Font Size Sets a font size for the button
Font Weight Sets a font weight for the button
Normal or Italic Sets a font style for the button
Color Select the color of the button
Background Color Select the background color of the button
Border Radius Sets border radius of the button
Border Width Sets border width of the button
Border Color Select the color of the box button
Margin Lets you customize the margin
Padding Lets you customize the padding

Hover Style

Style of the button on hover

Available options to customizeDescription
Color Select the color of the button
Background Color Select the background color of the button
Border Color Select the color of the box button

Shop Customizer – Product Page Styles

The Shop Customizer is a new feature in Jupiter which lets you customize your websites shop.

In this article, we’ll explain how to use shop customizer to style your product page.


Product Page Styles

The Shop Customizer provides an option to style the product page. The product page is a single product page that displays your products.

To access the Shop Customizer once it is activated:

1From the WordPress left menu, go to Jupiter > Shop Customizer.

To customize the product page:

1From the Shop Customizer, click on Product Page.

product page styles

2A new window will open with all the available options to customize and style the product page. Click on the Styles tab.

product page styles

Style options are explained below:

Image

product page styles

Let you style the image of your product.

Available options to customizeDescription

Image Ratio Sets an image ratio. Available options are 3:2, 1:1, 2:3, 9:16. The box with pixels value sets the border around the image, just enter the pixels number for the border width and set border color in the color picker.
Gallery Thumbnail Orientation Sets images gallery either under the image or on the left side of the image.
Margin Let you customize the margin around the image

Name

product page styles

Let you style the name of the product:

Regular Price

product page styles

Let you style the regular price listed on the product:

Sale Price

product page styles

Let you style the sale price listed on the product if the item is set to sale:

Category

product page styles

Let you style a category name of the product:

Tags

product page styles

Let you style a tag name of the product:

Add to Cart Button

 

Let you style the “Add to Cart” button.

Available options to customizeDescription

Show Icon Let you display or hide “Add to cart” icon.
Font Family Let you change the font family for the text.
Text Size Let you change the font size of the text.
Text Weight Let you change the font weight of the text.
Text Color Sets the color of the text.
Button Background Color Sets the background color of the button.
Border Radius Sets the border radius for the button.
Border Width Sets border width in pixels for the button.
Border Color Sets border color for the button.
Icon Color Sets icon color.
Hover Style Let you change border color, background color, text color of the button when hovering it.
Margin/Padding Let you change margin and padding values for the button.

SKU

product page styles

Let you style the sku id of the product:

Description

product page styles

Let you style the description text of the product:

Quantity

product page styles

Let you style the quantity box of the product:

Social Share

product page styles

Let you style the social share icons:

Available options to customizeDescription
Social Networks to Display Let you choose what social networks to show on a product page.
Icons Color Set the icons color.
Background Color Sets the background color for the icons.
Border Radius Sets the border radius for the icons.
Border Width Sets the border width in pixels for the icons.
Border Color Sets the border color for the icons.
Hover Style Let you change background color, icons color and border color when hovering the icons.
Margin Let you set margins around the social networks section.

Sale Badge

product page styles

Let you style the sale badge on the product page:

Out of Stock Badge

product page styles

Let you style the Out of Stock badge on the product page.

Rating

product page styles

Let you style the rating star icons and text on the product page:

Available options to customizeDescription
Social Networks to Display Let you choose what social networks to show on a product page.
Size Sets the size for star icons.
Star Color Sets the color of the star icons.
Active Star Color Sets the color for active star icon.
Text Font Sets the font family for the text.
Text Size Sets the font size for the text.
Text Weight Sets the font weight for the text.
Text Style Sets the font style for the text. Available options are cursive and normal.
Text Color Sets the color for the text.
Margin Sets the margins around the rating section.

Shop Customizer – Product Page Settings

The Shop Customizer is a new feature in Jupiter which lets you customize your websites shop.

In this article, we’ll explain how to use shop customizer to customize your product page.


Product Page Settings

The Shop Customizer provides an option to customize the product page. The product page is a single product page that displays the detailed information of your item.

To access the Shop Customizer once it is activated:

1From the WordPress left menu, go to Jupiter > Shop Customizer.

To customize the product page:

1From the Shop Customizer, click on Product Page.

2A new window will open with all the available options to customize and style the product page.

Settings are explained below:

SettingDescription

Layout Sets a layout of the product page. The first option shows the product info beside the image and the product tabs are shown under the image, while the second one locates all the info including the tabs beside the image.
Sidebar Sets a sidebar to the product page. Available options are No Sidebar, Left Sidebar, Right Sidebar.
Display Product Info Let you display or hide specific information about the product.
Product Lightbox Let you enable/disable product lightbox option, so you can see an image in a lightbox when clicking on it.
Product Zoom Lets you enable/disable product zoom option. If enabled, an image will be zoomed in when hovering it.
Related Products Enables/disables related products section on a product page.
Up-Sells  Enables/disables up-sell products section on a product page. Find more information about Up-Sells in the Woocommerce documentation.

3After you’ve configured the settings, click on the Close button.

4Click on the Save & Publish button. The changes you have made will be applied to the front-end of your website.


Product Page Styles

Product page style settings are explained in this article.

Installing and Activating WooCommerce Plugin

WooCommerce is a free eCommerce plugin that allows you to sell anything, beautifully. Built to integrate seamlessly with WordPress, WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control.

In this article, we’ll explain how to install and activate the WooCommerce plugin in the Jupiter theme


Installing and Activating WooCommerce Plugin

1From the WordPress left menu, go to Jupiter > Control Panel.

Installing plugins and addons - activating woocommerce

2Click on Required Plugins.

activating woocommerce

3Next to WooCommerce, click on the Activate button.

activating woocommerce

4A new pop-up window will appear, click on Continue.

activating woocommerce

5After a couple of seconds, a new pop-up window will appear. Click on the Ok button.

activating woocommerce

6WooCommerce is now installed and activated on your website. It will be displayed above in the Installed Plugins section.

Activating Shop Customizer

The Shop Customizer is a new feature in Jupiter which lets you create and modify the Shop pages (Product List, Product Page, Checkout & Cart) easily with a super friendly interface.

In this article, we’ll explain the steps needed for activating Shop Customizer since it’s disabled by default.

 


Activating Shop Customizer

1From the WordPress left menu, go to Jupiter > Theme Options > Shop > General.

activating shop customizer

2Enable the Shop Customizer.

activating shop customizer

3Click on the Save Settings button.

activating shop customizer

4Access the Shop Customizer from the WordPress left menu, Appearance > Customize.

activating shop customizer

5A new option called Shop will be available on the left panel of the Customizer.

activating shop customizer

6 After that, click on the Shop button to see the Shop Customizer pages settings.

Shop Customizer – Product List Styles

The Shop Customizer is a new feature in Jupiter which lets you customize your websites shop.

In this article, we’ll explain how to use shop customizer to style your product list page.


Product List Styles

The Shop Customizer provides an option to style the product list. The product list is a shop page with a product loop that displays your products.

To access the Shop Customizer once it is activated:

1From the WordPress left menu, go to Jupiter > Shop Customizer.

To customize the product list:

1From the shop customizer, click on Product List.

product list styles

2A new window will open with all the available options to customize and style the product list. Click on the Styles tab.

product list styles

Style options are explained below:

Box

product list styles

Lets you style the box which contains the item on your product list:

product list styles

Available options to customizeDescription

Background Color Sets a background color
Border Radius Sets a custom border radius
Border Thickness Sets a custom border thickness
Border Color Sets a custom border color
Margin Lets you customize the margin
Padding Lets you customize the padding

Name

product list styles

Lets you style the name of the product:
product list styles

Regular Price

product list styles

Lets you style the regular price listed on the product:

product list styles

Sale Price

product list styles

Lets you style the sale price listed on the product if the item is set to sale:

product list styles

Add to Cart Button

product list styles

Lets you style the add to cart button.

product list styles

Out of Stock Badge

product list styles

Lets you style the out of stock badge.

product list styles

Sale Badge

product list styles

Lets you style the sale badge.

product list styles

Rating

product list styles

Lets you style the rating of your product.

product list styles


Product List Settings

Product list settings are explained in this article.

Shop Customizer – Product List Settings

The Shop Customizer is a new feature in Jupiter which lets you customize your websites shop.

In this article, we’ll explain how to use shop customizer to customize your product list page.


Product List Settings

The Shop Customizer provides an option to customize the product list. The product list is a shop page with a product loop that displays your products.

To access the Shop Customizer once it is activated:

1From the WordPress left menu, go to Jupiter > Shop Customizer.

To customize the product list:

1From the shop customizer, click on Product List.

product list

2A new window will open with all the available options to customize and style the product list.

 

Settings are explained below:

SettingDescription

Sidebar Sets a sidebar to the product list page. Available options are, no sidebar, left sidebar and right sidebar.
Strecth to Full Width Sets the page to full width.
Item Hover Style Sets a specific style which displays on item hover.
Display Product Info Lets you display or hide specific information about the product.
Image Ratio Sets a specific image ratio.
Grid Settings Lets you customize the layout of the product list page by changing columns, rows and spacing between the products.

3After you’ve configured the settings, click on the Close button.

product list

4Click on the Save & Publish button. The changes you have made will be applied to the front-end of your website.

product list


Product List Style

Product list style settings are explained in this article.

Shop Customizer

The Shop Customizer is a new feature in Jupiter which lets you customize the product list, product page and checkout & cart pages


Product List

The Shop Customizer provides an option to customize the product list. The product list is a shop page with a product loop that displays your products.

To customize the product list:

1From the Shop Customizer, click on Product List.

shop customizer

2A new window will open with all the available options to customize and style the product list.

3After you’ve configured the settings, click on the Close button.

shop customizer

4Click on the Save & Publish button. The changes you have made will be applied to the front-end of your website.

shop customizer


Product Page

The Shop Customizer provides an option to customize the product pages. The product page is a single shop page where the customer is able to check out the product in detail and add it to their cart.

To customize the product page:

1From the Shop Customizer, click on Product Page.

shop customizer

2A new window will open with all the available options to customize and style the product page.

3After you’ve configured the settings, click on the Close button.

shop customizer

4Click on the Save & Publish button. The changes you have made will be applied to the front-end of your website.

shop customizer


Checkout & Cart Pages

The Shop Customizer provides an option to customize the Checkout & Cart pages. The checkout & cart pages are shop pages where the customers can manage the items that they have decided to purchase.

To customize the checkout & cart pages:

1From the Shop Customizer, click on Checkout & Cart.

shop customizer

2A new window will open with all the available options to style the checkout & cart pages.

shop customizer

3After you’ve configured the settings, click on the Close button.

shop customizer

4Click on the Save & Publish button. The changes you have made will be applied to the front-end of your website.

shop customizer


Widget Styles

The Shop Customizer provides an option to style the widgets added to your shop pages.

To style the widgets:

1From the Shop Customizer, click on Styles.

shop customizer

2A new window will open with all the available options to style the widgets

shop customizer

3After you’ve configured the settings, click on the Close button.

shop customizer

4Click on the Save & Publish button. The changes you have made will be applied to the front-end of your website.

shop customizer

Shop Settings

Theme Options is the main section of Jupiter, where you can change your global settings for your website. You can access Theme Options from Jupiter > Theme Options.

In this article we’ll describe the options available under the Shop section of Theme Options. Woocommerce is one of the popular shopping cart plugins and Jupiter has options to fine tune pages related to it.


Shop Archive Settings

There is a section where you can style shop archive pages, to do this go to Theme Options > Shop > General. The settings you can find there are:

1Shop Loop Columns

This setting allows you to select number of products column for shop page. Available options are:

  • Default (4 columns full layout, 3 columns with sidebar)
  • 1 column
  • 2 columns
  • 3 columns
  • 4 columns

2Shop Catalog Mode

Use this option to disable the add to cart functionality of WooCommerce and use this plugin just as a catalog to only display your products.

3Product Category Loop Image Size

You can decide whether you want to have the theme crop and resize your thumbnail product images in the products listing page or if you want the original image size shown in the website. Available options are:

  • Resize and Crop (Not Recommended)
  • Default – Original Size
  • Default – Large Size
  • Default – Medium Size
  • Custom Options listed depending the selection described (Recommended)

Use this option to set the image size for the thumbnails of the products. We suggest that you go to Jupiter > Control Panel > Image Sizes and add your custom width/height size for the shortcode. Then come back to this option and you will see the same option you just created here which you can select. In Jupiter V5 the WooCommerce single product image size is being managed from the location shown below. If you see quality loss in the image, simply go to the WooCommerce settings and change the size to 550×550 pixels. The Suggested Minimum required size is 500 pixels and if you want to avoid cropping the image, leave the height option blank and uncheck the crop checkbox from Woocommerce > Settings > Products > Display.

4Product Category Archive Loop Title

Use this option to change the product category archive page title. This title will be the same for all categories. You do not have options in Jupiter to have the specific category name added into the page title area.

5Use Product Name as Page Title

Use this option if you want to display product name as page title in single product page.

6Use Product Category/Tag Name as Page Title

Enable the option if you want to display product category/tag name as page title on product category/tag page.

7Use Product Category/Tag Name as Product Filter Title

Use this option to display product category/tag as filter label for products on product category/tag page.

8Show Shopping Cart

Use this option to enable or disable the shopping cart icon in the header section of the theme.

9Shopping Cart on Mobile Phone

Use this option to enable or disable the floating shopping cart link for small devices. The visibility is determined based on main navigation threshold width value.

Product Loop

1Product Loop Image Size

The settings are the same as for the option Product Category Loop Image Size described above. You can refer to it to read description of Product Loop Image Size option.

2Product Loop Image Height

Use this option to set the height of thumbnail product images in product listing pages. Default value is 330 pixels.

3Excerpt For Product Loop

Enable this option if you would like to show the small description for products loop.


E-Commerce Single Product Page Settings

1Woocommerce Single Product Layout

Use this option to choose the layout of single product pages. Available options are:

  • Full Layout
  • Left Sidebar
  • Right Sidebar

2Previous & Next Arrows

If you want to show product posts navigation in single product pages, you need enable this option. It guides a visitor to go through previous and next products.

3Show Previous & Next for Same Categories

Use this option to limit the product posts navigation to same categories of current product.

4Single Product Page Title

Use this option to enable or disable the page title area of single product pages. Page title area includes page title and breadcrumbs.

5Social Share

Use this option to enable or disable the social media functionality for single product pages of WooCommerce.

If you have any sort of problem or questions regarding Woocommerce integration with Jupiter, open up a support ticket in our support desk.

Configuring Product Archive

The product archive is an accumulation of all products. It contains all the product posts in one place.

In this article we explain how to access the product archive and its settings. If you are looking to create a shop you should also check out the creating a product post and displaying product posts articles.


Configuring the Archive

Archives are special auto generated pages in WordPress which show a list of posts. There are limited options in Jupiter to configure this auto generated page. We instead recommend that you add a page and use the Product Shortcode to generate a more configurable archive page for your shop page.

To access the product archive settings:

1From the WordPress left menu, go to Jupiter > Theme Options > Shop > General.


Archive Layout

To change the layout of the product archive:

1From the WordPress left menu, go to Theme Options > Shop > General.

SettingDescription

Shop loop columns Sets a specific amount of columns.
Product loop image height Sets the height of the product image.
Product loop image size Sets the size of the product image.
Product category loop image size Sets the size of the product image in the category archive.

2Configure the settings and click on Save Settings.


Adding Widgets to the Sidebar

If your product archive layout has a sidebar, you can add widgets to it:

1From the WordPress left menu, go to Appearance > Widgets.

product archive

2From the widgets page, drag and drop one of the widgets into the WooCommerce Shop Widget Area.

product archive

3Configure the widget and click on Save.

Configuring the YITH WooCommerce Ajax Product Filter Plugin

With the YITH WooCommerce Ajax Product Filter you can simplify the product search in your shop. Thanks to widgets, you can easily set up search filters that allow users to quickly find the products they are interested in.
Remember that the plugin works only on WooCommerce archive pages. By inserting widgets onto different pages you won’t achieve any result.


Installing the Plugin

To install the free version of the YITH WooCommerce Ajax Product Filter plugin:

1From the WordPress left menu, go to Plugins > Add New page.

yith

2Search for YITH WooCommerce Ajax Product Filter and click on the Install Now button.

yith

3After the installation process, click on the Activate button.

yith


Configuring the Plugin

1From the WordPress left menu, go to the YITH Plugins > Ajax Product Filter page.

yith

2There are three tabs on this page. Click on Front End.

yith

3Configure the settings as follows.

OptionsValue

Product Container  .Product
Shop Pagination Container  nav.woocommerce-pagination
Result Count Container .woocommerce-result-count
Scroll top anchor  .yit-wcan-container
Order by Choose between Alphabetically and Woocommerce default.

4Custom CSS can be inserted in the Custom Style tab. 

yith


Configuring Attributes

The YITH WooCommerce Ajax Product Filter widget works with attributes configured in Products -> Attributes. So before the filter widget is added on the sidebar, you’ll need to verify that your shop and product attributes have been set up.

Adding an attribute

1From the WordPress left menu, go to Products > Attributes. 

yith

2Under the Add New Attributes option, configure the values as follows 

Options Value

Name Enter the name of the attribute.
Slug Insert a unique slug/reference for the attribute
Enable Archives? Determine whether or not to enable the archive page.
Type Available options are Text and Select. Text allows manual entry whereas Select allows preconfigured terms in a dropdown list.
Default sort order Determines the sort order of the terms on the front end shop product pages. Available options are: Custom Ordering, Name, Name(numeric), and Term ID


Configure the Terms

Attribute terms can be assigned to products and variations.

1Configure the settings as follows.

Options Values

Name The name is how it appears on your site.
Slug The “slug” is the URL-friendly version of the name. It is usually all lowercase and contains only letters, numbers, and hyphens.
Description Adds a description for the term.

2Create multiple slugs following the table in the step 1.


Adding Attributes to Products

1From the WordPress left menu, go to the Products page

yith

2Hover over a product and click on Edit.

yith

3On the product editor page scroll down to find the Product data section and click on the Attribute tab from the left.

yith

4Select an attribute from the Custom Product Attributes dropdown option and click on the Add button.

5Insert terms separated by the delimiter ‘|’ in the value option opposite to the added attributes.


Configuring the Ajax Product Filter Widget

1From the WordPress left menu, go to Appearance > Widget page

yith

2From the available widgets panel, add the YITH WooCommerce Ajax Product Filter widget to one of the widget areas in the right panel.

3Expand the YITH WooCommerce Ajax Product Filter widget to configure the settings.

4Configure the settings as described.

Options Values

Name Enter the title of the widget.
Type Defines the type of the filter. Available options are: List, Color, Label, and Dropdown
Query type Defines the type of query to apply to the widget when it is added twice in the same sidebar. Available options are AND and OR
Attributes Defines the product attribute to display (out of those created in Products > Attributes).
Display Defines whether or not to display hierarchically. Available options are: All (not hierarchical), All (hierarchical) and Only parents.

5Save the widget.


Type Options

1Configure the options as follows

Options Values

List Shows the list of attributes belonging to the selected type in the option “Attribute”
Color Enables the list of color boxes associated to each element of the selected attribute in the option “Attribute”
Label List of labels associated to each attribute value selected in the option “Attribute”
Dropdown Select menu that shows all values of the attribute selected in the option “Attribute”


Query Type Option

This option defines the type of query to apply to the widget when it is added twice in the same sidebar, giving users the ability to apply different filters at the same time:

  • AND: shows only products that satisfy both conditions set by the user through filters applied;
  • OR: search returns all products that satisfy at least one of the conditions set by the user through the filter applied.

Products Shortcode

In this article, we’ll explain about displaying product posts via Products loop shortcode and configuring the shortcode settings.

To see the Products shortcode in action, you may check the demo page.

Products shortcode - demo


Creating Product Posts

Product posts are created separately in Product post type. To learn about creating different kind of product posts, read Creating a product post article then continue to the next section.


Displaying Product Posts

After creating product posts, it’s time to display them in a page. For this purpose, we need to add Product Loop shortcode in a page. To learn exactly how to do that, read Displaying product posts article then continue to the next section.

Configuring Image Dimensions

There is one setting in the Product Loop settings pop-up to configure the image dimensions called “Image Size”.

SettingDescription

Image Size Sets a specific image size to be used in the product loop.

Adding Custom Image Size Template

You can add custom image sizes to be used in various locations such as product loop shortcode.

To add a custom image size:

1From WordPress left menu, go to Jupiter > Control Panel > Image Sizes.
2Enter a custom image width, height and name.

Products shortcode - custom image size

3Click on Save Settings.

This image size will now be available to use in Product Loop settings pop-up > Image size setting.

Products shortcode - Product Loop settings

Showing Specific Posts

There are three settings in product loop settings pop-up which allow you to show the items based on specific categories, attributes or IDs: DisplaySelect Specific Categories and Select Specific Posts.

SettingDescription

Display Shows products based on it’s attributes.
Select Specific Categories Shows items only from specified categories.
Select Specific Posts Shows only the specified items.

Configuring Pagination

In Product Loop settings pop-up, there is a setting called Pagination to enable or disable the pagination for the loop.


Configuring the Layout

There are 2 layout types: Compacty & Overlay and Open & Seperated. You can check how both layouts look by going to Shop section in our main demo.

SettingDescription

Layout type Sets the predefined layout.
Columns Sets the number of columns.
How many posts? Sets the number of posts in the loop.


Configuring the Style

There is a tab called Style & Colors in Product Loop settings pop-up which let’s you configure the style of the loop.

SettingDescription

Product title color Sets the color of the title.
Product category color Sets the color of the category.
Product image border color Sets the color of border around image.
Price color Sets the color of the price.
Sale price color Sets the color of the sale price.
Original price color Sets the color of the original price.
Product rating color Sets the color of the product rating.

 

Creating a Product Post

First step in creating a shop on your website is creating products. Jupiter uses the most popular WordPress plugin WooCommerce for this, which let’s you create an online shop.

 

This article covers installing, activating and setting up WooCommerce, adding a product post and enabling visual composer for it.


Installing WooCommerce

Before being able to create a product post, WooCommerce plugin needs to be installed and activated.

To install and activate WooCommerce:

1From WordPress left menu, go to Plugins > Add New.

Creating a product post - add new plugin

2In the Search Plugins input field, type “WooCommerce“.

Creating a product post - Woocommerce

3Install and activate the top result plugin.

Creating a product post - install Woocommerce

WooCommerce Setup Wizard

After activating the plugin, you will be presented with the WooCommerce setup wizard. This setup allows you to easily configure the basics of your shop in a few easy steps.

1Click on Let’s Go to start the setup.

Creating a product post - setup wizard

2Fill in the options as required and click on continue.

3After the last step is done, click on Create your first product!

Creating a product post - create your first product


Adding a Product Post

To add a product post:

1From WordPress left menu, go to Products.

Creating a product post - add new product

2Click on Create your first product! button.

Creating a product post - create your first product

There is a lot of different options to set up your product like product types, attributes, etc. Below we are going to cover step by step how to create a simple product, and explain about other product types, as WooCommerce already has detailed article on all product options which you can read here.

Creating a Simple Product

To add a simple product:

1Enter a product name and product description in the title input fields.

2From Product Data dropdown, select Simple product.

Creating a product post - simple product

3Enter the price for your product. The box below is a sale price, which should always be less than the regular price.

Creating a product post - price

4Add a product image by clicking on Set product image.

5Add a category by clicking on Add new product category.

Creating a product post - add new category

6Publish your product by clicking on Publish.

Grouped Product

This product type allows you to have multiple items in a single product page. It does not have a price option as it links to other products on your website and allows users to view all the products on a single page.

External/Affiliate Product

This product type is used when you are promoting an item on your website but it’s actually available for sale on a different website. When creating this type of product, you will be asked for a Product URL which will be used to link to the product on another website instead of Add to cart button on your website.

Variable Product

This product type allows you to sell multiple types of an item, like a different sized t-shirts. This can be set up through the attributes and variations, and each combination can have it’s own price and SKU.

Enabling WPBakery Page Builder for Product Posts

In order to use WPBakery shortcodes for product description, WPBakery for product posts has to be enabled.

1From WordPress left menu, go to WPBakery Page Builder > Role Manager.

2From Post types dropdown, select Custom.

Creating a product post - custom post type

3Click on product.

Creating a product post - product type

4Click on Save Changes.

Displaying Product Posts

There are several ways to display products on your website in Jupiter. This article explains the recommended way to display them using the product loop shortcode.

To see what can be achieved with the product loop shortcode, check the shop section in our main demo.


Adding Product Posts

Before being able to display your products, product posts have to be added. Read Creating a product post article for more information.


Displaying Product Posts

Below we are going to explain how to display products on a shop page using the product loop shortcode.

Creating a Shop Page

1From WordPress left menu, go to Pages > Add New.

Displaying product posts - add new page

2Enter a title for your shop page.

Adding the Shortcode

1From Visual Composer screen, click +

Displaying product posts - visual composer screen

2In Add Element pop-up screen, search for Product Loop and click on it to be added to the page.

Displaying product posts - add element

3When the shortcode is added, a new pop-up screen called Product Loop Settings opens. It allows you to configure the shortcode settings.

Displaying product posts - product loop settings

Showing Specific Items

There are three settings in product loop settings pop-up which allow you to show the items based on specific categories, attributes or IDs: DisplaySelect Specific Categories and Select Specific Posts.

SettingDescription
Display Shows products based on its attributes.
Select Specific Categories Shows items only from specified categories.
Select Specific Posts Shows only the specified items.

4Click on Save Changes and Publish the page to check the result.

Configuring the YITH Infinite Scrolling Plugin

YITH Infinite Scrolling WordPress is a plugin from the YIThemes group. This plugin allows you to have infinite scrolling on your WooCommerce shop page, simplifying navigation through your shop, helping customers view more products quicker, and giving you more chances to boost your sales!

You can see how it works with the official demo from YITH here.

There are Free and Premium versions of this plugin available, and in this article, we explain how to install and configure the free version of the YITH Infinite Scrolling plugin.


Installing the Plugin

To install the free version of the YITH Infinite Scrolling plugin:

1From the WordPress left menu, go to Plugins > Add New page.

yith Infinite Scrolling

2Search for YITH Infinite Scrolling and click on the Install Now button.

yith Infinite Scrolling

3After the installation process, click on the Activate button.

yith Infinite Scrolling


Configuring the Plugin

After the plugin installation, it’s time to configure the plugin in a way that it works for the Jupiter theme.

To configure the plugin:

1From the WordPress left menu, go to the YITH Plugins > Infinite Scrolling page.

yith Infinite Scrolling

2Configure the setting fields according to the table below.

Setting Value for Product page
On
Navigation Selector nav.woocommerce-pagination
Next Selector nav.woocommerce-pagination a.next
Item Selector article.product
Content Selector .theme-content
Loading Image Upload your image or leave it default
3Click on the Save Changes button and check your shop page.


Common Issues

Q: The plugin does not work.
A: The plugin will only work on the default shop pages and categories. It won’t work when the Product Loop or Shop Customizer is used in the page. Deactivate all of your plugins. If the issue persists, please open a ticket in the support desk.

Q: When I scroll down and load more items, the images are not showing.
A: If you have Jetpack, make sure that the JetPack image optimizer (formerly Photon) is turned off from JetPack settings. Otherwise, open a ticket in the support desk.