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.
Note: The shop customizer is by default disabled. To learn how to activate it, check out this article.
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.
2A new window will open with all the available options to style the Checkout & Cart.
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 customize | Description |
|---|---|
| Background Color | Select the color of the number background |
| Font Family | Sets a font family style for the number |
| Font Size | Sets a font size for the number |
| Font Weight | Sets a font weight for the number |
| Normal or Italic | Sets a font style for the number |
| Number Color | Select the color of the number |
Title
| Available options to customize | Description |
|---|---|
| Font Family | Sets a font family style for the text |
| Font Size | Sets a font size for the text |
| Font Weight | Sets a font weight for the text |
| Normal or Italic | Sets a font style for the text |
| Text Color | Select the color of the text |
| Margin | Lets you customize the margin |
Passive Style
| Available options to customize | Description |
|---|---|
| Background Color | Select the color of the number background |
| Number Color | Select the color of the number |
| Text Color | Select the color of the text |
Style Icon
There are Active style and Passive style :
Active Style
Icon
| Available options to customize | Description |
|---|---|
| Icon Size | Sets a font size for the icon |
| Icon Color | Select the color of the number |
| Margin | Lets you customize the margin |
| Font Weight | Sets a font weight for the number |
| Normal or Italic | Sets a font style for the number |
Title
| Available options to customize | Description |
|---|---|
| Font Family | Sets a font family style for the text |
| Font Size | Sets a font size for the text |
| Font Weight | Sets a font weight for the text |
| Normal or Italic | Sets a font style for the text |
| Text Color | Select the color of the text |
Passive Style
| Available options to customize | Description |
|---|---|
| Icon Color | Select the color of the number |
| Text Color | Select the color of the text |
Big Heading
Lets you style the Heading of the page :
| Available options to customize | Description |
|---|---|
| Font Family | Sets a font family style for the text |
| Font Size | Sets a font size for the text |
| Font Weight | Sets a font weight for the text |
| Normal or Italic | Sets a font style for the text |
| Text Color | Select the color of the text |
| Padding | Lets you customize the padding |
Boxes
Lets you style the boxes of the Checkout page :
| Available options to customize | Description |
|---|---|
| Color | Select the color of the box |
| Border Radius | Sets border radius of the box |
| Border Width | Sets border width of the box |
| Border Color | Select the color of the box border |
| Padding | Lets you customize the padding |
Field Label
[image]
Lets you style the Checkout page Field label :
[image]
| Available options to customize | Description |
|---|---|
| Font Family | Sets a font family style for the label |
| Font Size | Sets a font size for the label |
| Font Weight | Sets a font weight for the label |
| Normal or Italic | Sets a font style for the label |
| Text Color | Select the color of the label |
| Padding | Lets you customize the padding |
Field
Lets you style the Checkout page Field :
| Available options to customize | Description |
|---|---|
| Font Family | Sets a font family style for the field |
| Font Size | Sets a font size for the field |
| Font Weight | Sets a font weight for the field |
| Normal or Italic | Sets a font style for the field |
| Text Color | Select the color of the field |
| Color | Select the color of the field |
| Border Radius | Sets border radius of the field |
| Border Width | Sets border width of the field |
| Border Color | Select the color of the box field |
| Margin | Lets you customize the margin |
Focus Style
Style of the field on focus
| Available options to customize | Description |
|---|---|
| Text Color | Select the color of the field |
| Color | Select the color of the field |
| Border Color | Select the color of the box field |
Button
Lets you style the Checkout & Cart pages button :
| Available options to customize | Description |
|---|---|
| Font Family | Sets a font family style for the button |
| Font Size | Sets a font size for the button |
| Font Weight | Sets a font weight for the button |
| Normal or Italic | Sets a font style for the button |
| Color | Select the color of the button |
| Background Color | Select the background color of the button |
| Border Radius | Sets border radius of the button |
| Border Width | Sets border width of the button |
| Border Color | Select the color of the box button |
| Margin | Lets you customize the margin |
| Padding | Lets you customize the padding |
Hover Style
Style of the button on hover
| Available options to customize | Description |
|---|---|
| Color | Select the color of the button |
| Background Color | Select the background color of the button |
| Border Color | Select the color of the box button |
Back Button
Lets you style the Checkout & Cart page’s back button :
| Available options to customize | Description |
|---|---|
| Font Family | Sets a font family style for the button |
| Font Size | Sets a font size for the button |
| Font Weight | Sets a font weight for the button |
| Normal or Italic | Sets a font style for the button |
| Color | Select the color of the button |
| Background Color | Select the background color of the button |
| Border Radius | Sets border radius of the button |
| Border Width | Sets border width of the button |
| Border Color | Select the color of the box button |
| Margin | Lets you customize the margin |
| Padding | Lets you customize the padding |
Hover Style
Style of the button on hover
| Available options to customize | Description |
|---|---|
| Color | Select the color of the button |
| Background Color | Select the background color of the button |
| Border Color | Select the color of the box button |
