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 ColorSelect the color of the number background
Font FamilySets a font family style for the number
Font SizeSets a font size for the number
Font WeightSets a font weight for the number
Normal or ItalicSets a font style for the number
Number ColorSelect the color of the number
Title
Available options to customizeDescription

Font FamilySets a font family style for the text
Font SizeSets a font size for the text
Font WeightSets a font weight for the text
Normal or ItalicSets a font style for the text
Text ColorSelect the color of the text
MarginLets you customize the margin
Passive Style
Available options to customizeDescription
Background ColorSelect the color of the number background
Number ColorSelect the color of the number
Text ColorSelect the color of the text

Style Icon

There are Active style and Passive style :

Active Style
Icon
Available options to customizeDescription
Icon SizeSets a font size for the icon
Icon ColorSelect the color of the number
MarginLets you customize the margin
Font WeightSets a font weight for the number
Normal or ItalicSets a font style for the number
Title
Available options to customizeDescription

Font FamilySets a font family style for the text
Font SizeSets a font size for the text
Font WeightSets a font weight for the text
Normal or ItalicSets a font style for the text
Text ColorSelect the color of the text
Passive Style
Available options to customizeDescription
Icon ColorSelect the color of the number
Text ColorSelect the color of the text

Big Heading

Lets you style the Heading of the page :

Available options to customizeDescription
Font FamilySets a font family style for the text
Font SizeSets a font size for the text
Font WeightSets a font weight for the text
Normal or ItalicSets a font style for the text
Text ColorSelect the color of the text
PaddingLets you customize the padding

Boxes

Lets you style the boxes of the Checkout page :

Available options to customizeDescription
ColorSelect the color of the box
Border RadiusSets border radius of the box
Border WidthSets border width of the box
Border ColorSelect the color of the box border
PaddingLets you customize the padding

Field Label

[image]

Lets you style the Checkout page Field label :

[image]

Available options to customizeDescription
Font FamilySets a font family style for the label
Font SizeSets a font size for the label
Font WeightSets a font weight for the label
Normal or ItalicSets a font style for the label
Text ColorSelect the color of the label
PaddingLets you customize the padding

Field

Lets you style the Checkout page Field :

Available options to customizeDescription
Font FamilySets a font family style for the field
Font SizeSets a font size for the field
Font WeightSets a font weight for the field
Normal or ItalicSets a font style for the field
Text ColorSelect the color of the field
ColorSelect the color of the field
Border RadiusSets border radius of the field
Border WidthSets border width of the field
Border ColorSelect the color of the box field
MarginLets you customize the margin

Focus Style

Style of the field on focus

Available options to customizeDescription
Text ColorSelect the color of the field
ColorSelect the color of the field
Border ColorSelect the color of the box field

Button

Lets you style the Checkout & Cart pages button :

Available options to customizeDescription
Font FamilySets a font family style for the button
Font SizeSets a font size for the button
Font WeightSets a font weight for the button
Normal or ItalicSets a font style for the button
ColorSelect the color of the button
Background ColorSelect the background color of the button
Border RadiusSets border radius of the button
Border WidthSets border width of the button
Border ColorSelect the color of the box button
MarginLets you customize the margin
PaddingLets you customize the padding

Hover Style

Style of the button on hover

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

Back Button

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

Available options to customizeDescription
Font FamilySets a font family style for the button
Font SizeSets a font size for the button
Font WeightSets a font weight for the button
Normal or ItalicSets a font style for the button
ColorSelect the color of the button
Background ColorSelect the background color of the button
Border RadiusSets border radius of the button
Border WidthSets border width of the button
Border ColorSelect the color of the box button
MarginLets you customize the margin
PaddingLets you customize the padding

Hover Style

Style of the button on hover

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