docs PHP, CSS & JS


Oxygen's WooCommerce integration makes it easy to create the checkout page using the Checkout element. This element needs to be added to the page assigned to "Checkout page" via WooCommerce -> Settings -> Advanced.

Add the Checkout element to your page or template by clicking +Add -> WooCommerce -> Checkout.


Style the background color and padding.

  • Background Shadow - style the background shadow.
  • Background Border - style the background border.


Style the checkout typography.


Style the background color, placeholder text color and input padding.

  • Typography - style the input typography.
  • Border - style the input border.
  • Focus Border - style the focused input border.
  • Box Shadow - style the input box shadow.
  • Focus Box Shadow - style the focused input box shadow.


Style the label typography.


Style the typography of the headings.

Prices and Quantity

Set the text color, font-family and font size.

Order Background

Set the background color.

  • Background Border - style the order background border.

Secondary Buttons

Set the secondary button background color, hover color and padding.

  • Typography - style the secondary button typography.
  • Border - style the secondary button border.
  • Hover Border - style the secondary button border on hover.

Primary Button

Set the button background color, border color, hover color and padding.

  • Typography - style the button typography.

Info Messages

  • Typography - style the info message typography.
  • Links - style the info message links.

Payment Methods

  • Typography - style the payment method typography.
  • Bubble Box - style the payment method bubble box.

Last modified: June 15, 2021
Copyright © 2024 Soflyy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram