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
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.
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 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

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