Shop Customizer – Checkout & Cart Styles

Updated on January 3, 2019

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

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

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 customizeDescription
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 customizeDescription
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 customizeDescription
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 customizeDescription
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 customizeDescription
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 customizeDescription
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 customizeDescription
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 customizeDescription
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 customizeDescription
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 customizeDescription
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
Did this answer your question?