Product List

Last Updated on

The shop customizer is a feature in Jupiter X which let’s you customize and style the product list, product page and checkout & cart pages.

x
Note: In order for the shop customizer to work, WooCommerce plugin needs to be installed and activated. To learn how to activate it, check out this article.

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

In this article


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.

x
Note: You can check out the demo of a product list here.
1
From the customizer left dashboard, go to Shop > Product List.

To customize the product list:

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

Settings are explained below:

SettingDescription
SidebarSets a sidebar to the product list page. Available options are, no sidebar, left sidebar and right sidebar.
Strecth to Full WidthSets the page to full width.
Item Hover StyleSets a specific style which displays on item hover.
Display Product InfoLets you display or hide specific information about the product.
Image RatioSets a specific image ratio.
Grid SettingsLets you customize the layout of the product list page by changing columns, rows and spacing between the products.
3
After you’ve configured the settings, click on the Close button.
4
Click on the Save & Publish button. The changes you have made will be applied to the front-end of your website.

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.

x
Note: You can check out the demo of a product list here.
1
From customizer left dashboard, go to Shop > Product List.
2
A new window will open with all the available options to customize and style the product list. Click on the Styles tab.

Style options are explained below:

Box

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

product list styles

Available options to customizeDescription
Background ColorSets a background color
Border RadiusSets a custom border radius
Border ThicknessSets a custom border thickness
Border ColorSets a custom border color
MarginLets you customize the margin
PaddingLets you customize the padding

Name

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

Regular Price

Lets you style the regular price listed on the product:

product list styles

Sale Price

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

product list styles

Add to Cart Button

Lets you style the add to cart button.

product list styles

Out of Stock Badge

Lets you style the out of stock badge.

product list styles

Sale Badge

Lets you style the sale badge.

product list styles

Rating

Lets you style the rating of your product.

product list styles

 

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket