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

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
Text Let you change the text. By default it is set to “Add to Cart”.
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

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

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 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.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket