Product Page

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

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

Settings are explained below:

SettingDescription
LayoutSets 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.
SidebarSets a sidebar to the product page. Available options are No Sidebar, Left Sidebar, Right Sidebar.
Display Product InfoLet you display or hide specific information about the product.
Product LightboxLet you enable/disable product lightbox option, so you can see an image in a lightbox when clicking on it.
Product ZoomLets you enable/disable product zoom option. If enabled, an image will be zoomed in when hovering it.
Related ProductsEnables/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.
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 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.

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

To access the shop customizer once it is activated:

1
From the customizer left dashboard, go to Shop > Product Page.
2
A new window will open with all the available options to customize and style the product page. Click on the Styles tab.

Style options are explained below:

Image

Let’s you style the image of your product.

Available options to customizeDescription
Image RatioSets 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 OrientationSets images gallery either under the image or on the left side of the image.
MarginLet you customize the margin around the image

Name

Let you style the name of the product:

Regular Price

Let you style the regular price listed on the product:

Sale Price

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

Category

Let you style a category name of the product:

Tags

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
TextLet you change the text. By default it is set to “Add to Cart”.
Show IconLet you display or hide “Add to cart” icon.
Font FamilyLet you change the font family for the text.
Text SizeLet you change the font size of the text.
Text WeightLet you change the font weight of the text.
Text ColorSets the color of the text.
Button Background ColorSets the background color of the button.
Border RadiusSets the border radius for the button.
Border WidthSets border width in pixels for the button.
Border ColorSets border color for the button.
Icon ColorSets icon color.
Hover StyleLet you change border color, background color, text color of the button when hovering it.
Margin/PaddingLet you change margin and padding values for the button.

SKU

Let you style the sku id of the product:

Description

Let you style the description text of the product:

Quantity

Let you style the quantity box of the product:

Social Share

Let you style the social share icons:

Available options to customizeDescription
Social Networks to DisplayLet you choose what social networks to show on a product page.
Icons ColorSet the icons color.
Background ColorSets the background color for the icons.
Border RadiusSets the border radius for the icons.
Border WidthSets the border width in pixels for the icons.
Border ColorSets the border color for the icons.
Hover StyleLet you change background color, icons color and border color when hovering the icons.
MarginLet you set margins around the social networks section.

Sale Badge

Let you style the sale badge on the product page:

Out of Stock Badge

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

Rating

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

Available options to customizeDescription
Social Networks to DisplayLet you choose what social networks to show on a product page.
SizeSets the size for star icons.
Star ColorSets the color of the star icons.
Active Star ColorSets the color for active star icon.
Text FontSets the font family for the text.
Text SizeSets the font size for the text.
Text WeightSets the font weight for the text.
Text StyleSets the font style for the text. Available options are cursive and normal.
Text ColorSets the color for the text.
MarginSets the margins around the rating section.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket