Checkout and Cart

Last Updated on

The shop customizer is a new feature in Jupiter X which lets you customize your websites shop.

In this article, we’ll explain how to use shop customizer to style your Checkout & Cart page.

In this article


Checkout & Cart Styles

The shop customizer provides an option to style the Checkout & Cart page. These are the shop pages to display the Cart and Checkout the products.

To access the shop customizer once it is activated:

1
From the WordPress left menu, go to Appearance > Customize.

To customize the Checkout & Cart page:

1
From the shop menu, click onĀ Checkout & Cart.

2
A 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 :

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

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

Field Label

Lets you style the Checkout page Field label :

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

How can I correctly set my checkout and cart pages using Elementor?

  • The point here is to make sure the Checkout and Cart pages are not having any selected page template from the Page Attributes. The Page Template field should be selected to the default.

  • Also, please note that your Shop, Checkout and Cart pages should not be edited by Elementor. In case you have edited them with Elementor, you will loose them and won’t be able even to edit them by Elementor. Simply switch to the text editor in those pages and use these page shortcodes inside them:

[woocommerce_cart]

This shortcode will be used for Cart page.

  • Then make sure they are set correctly inside the WooCommerce settings as described in the Woocommerce article.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket