Use CSS variable for customization
You can customize the appearance of your Wishlist (colors, spacing, typography, etc.) using CSS variables.
These variables can be overridden directly in Theme Editor → Custom CSS :
Here’s an example of how to use them:
:root {
--ooo-wl-page-product-card-form-button-background: #ff6600;
--ooo-wl-page-empty-title-font-size: 28px;
--ooo-wl-copy-button-border-radius: 8px;
}
You can find below the CSS variables that allow you to customize the different parts of Wishlist Power.
Product page button
These variables let you style the Wishlist button located on the individual product page (usually near the “Add to cart” button).
--ooo-wl-product-page-button-justify-self : alignment of the button in its container (e.g., start, center, end). --ooo-wl-product-page-button-gap : space between icon and text inside the button. --ooo-wl-product-page-button-padding-inline : horizontal padding inside the button. --ooo-wl-product-page-button-padding-block : vertical padding inside the button. --ooo-wl-product-page-button-width : fixed width of the button (optional). --ooo-wl-product-page-button-min-width : minimum width to prevent it from collapsing. --ooo-wl-product-page-button-max-width : maximum width allowed (can be `auto` or a fixed value). --ooo-wl-product-page-button-height : minimum height of the button. --ooo-wl-product-page-button-margin-block : top and bottom margin of the button. --ooo-wl-product-page-button-border-radius : border roundness (in px or %). --ooo-wl-product-page-button-font-family : font used inside the button. --ooo-wl-product-page-button-font-weight : thickness of the font. --ooo-wl-product-page-button-font-style : italic, normal, etc. --ooo-wl-product-page-button-font-size : size of the text. --ooo-wl-product-page-button-letter-spacing : spacing between characters. --ooo-wl-product-page-button-line-height : vertical spacing between lines (useful with multiline buttons). --ooo-wl-product-page-button-text-color : color of the button text. --ooo-wl-product-page-button-background-color : background color of the button. --ooo-wl-product-page-button-text-transform : forces uppercase, lowercase, etc. --ooo-wl-product-page-button-icon-color : color of the heart icon (inside the button). --ooo-wl-product-page-button-border-width : border thickness (used in outline variant only).
Product card button
This section allows you to customize the Wishlist icon displayed on each product card (grid/list views).
--ooo-wl-product-card-z-index : stack order of the Wishlist icon relative to other elements (higher = on top). --ooo-wl-product-card-button-block-start : vertical distance from the top of the product image. --ooo-wl-product-card-button-block-end : vertical distance from the bottom of the image. --ooo-wl-product-card-button-inline-end : horizontal distance from the right edge of the image. --ooo-wl-product-card-button-inline-start : horizontal distance from the left edge of the image. --ooo-wl-button-card-button-padding : padding (inner spacing) of the button icon. --ooo-wl-product-card-button-background-color : background color of the button icon. --ooo-wl-product-card-button-icon-color : color of the heart icon itself. --ooo-wl-product-card-button-border-radius : border radius (roundness) of the button shape. --ooo-wl-product-card-button-fade-seconds : duration of the icon's hover/fade animation.
Wishlist page
Page content
These CSS variables allow you to customize the wishlist page content:
--ooo-wl-page-content-margin-block-start : top margin of the main wishlist area. --ooo-wl-page-content-margin-block-end : bottom margin of the main wishlist area. --ooo-wl-page-content-margin-inline : horizontal margin (left/right). --ooo-wl-page-content-gap : vertical spacing between inner sections. --ooo-wl-page-item-per-row : number of product columns per row. --ooo-wl-page-product-card-container-column-gap : horizontal spacing between product cards. --ooo-wl-page-product-card-container-row-gap : vertical spacing between product rows. --ooo-wl-page-product-card-container-background-color : background color of the product card section.
Product card
These CSS variables allow you to customize the product card of the wishlist page:
--ooo-wl-page-product-card-gap : spacing between elements inside the product card. --ooo-wl-page-product-card-text-align : horizontal alignment of content (left, center…). --ooo-wl-page-product-card-background-color : background color of the product card. --ooo-wl-page-product-card-border-radius : corner radius of the product card.
Product card remove button
These CSS variables allow you to customize the remove product button from the product card:
--ooo-wl-page-product-card-remove-button-block-start : distance from the top of the card. --ooo-wl-page-product-card-remove-button-inline-end : distance from the right edge. --ooo-wl-page-product-card-remove-button-inline-start : distance from the left edge. --ooo-wl-page-product-card-remove-button-width : width of the button. --ooo-wl-page-product-card-remove-button-height : height of the button. --ooo-wl-page-product-card-remove-button-border-width : border thickness. --ooo-wl-page-product-card-remove-button-border-color : border color. --ooo-wl-page-product-card-remove-button-border-radius : border corner radius. --ooo-wl-page-product-card-remove-button-background-color : background color of the remove button. --ooo-wl-page-product-card-remove-button-color : color of the icon or label inside the button.
Product card select
These CSS variables allow you to customize the select dropdown of the product card:
--ooo-wl-page-product-card-form-select-padding-inline : horizontal padding inside the select. --ooo-wl-page-product-card-form-select-padding-block : vertical padding inside the select. --ooo-wl-page-product-card-form-select-border-width : border thickness of the select input. --ooo-wl-page-product-card-form-select-border-color : color of the border. --ooo-wl-page-product-card-form-select-border-opacity : opacity of the border. --ooo-wl-page-product-card-form-select-border-radius : rounded corners of the select field. --ooo-wl-page-product-card-form-select-height : height of the select field. --ooo-wl-page-product-card-form-select-background : background color of the select input. --ooo-wl-page-product-card-form-select-color : text color. --ooo-wl-page-product-card-form-select-font-family : font family used in the field. --ooo-wl-page-product-card-form-select-font-size : font size. --ooo-wl-page-product-card-form-select-font-weight : font weight (e.g. bold, normal). --ooo-wl-page-product-card-form-select-text-align : alignment of the text (left, center, right). --ooo-wl-page-product-card-form-select-letter-spacing : letter spacing inside the select.
Product card add to cart button
These CSS variables allow you to customize the add to cart button of the product card:
--ooo-wl-page-product-card-form-button-padding : internal padding of the button. --ooo-wl-page-product-card-form-button-height : total height of the button. --ooo-wl-page-product-card-form-button-min-height : minimum height for responsiveness. --ooo-wl-page-product-card-form-button-border-width : border thickness. --ooo-wl-page-product-card-form-button-border-color : border color. --ooo-wl-page-product-card-form-button-border-opacity : border opacity. --ooo-wl-page-product-card-form-button-border-radius : button corner radius. --ooo-wl-page-product-card-form-button-margin-block : top and bottom margin. --ooo-wl-page-product-card-form-button-background : background color of the button. --ooo-wl-page-product-card-form-button-color : text color. --ooo-wl-page-product-card-form-button-font-family : font used in the button. --ooo-wl-page-product-card-form-button-font-size : text size. --ooo-wl-page-product-card-form-button-font-weight : font weight (e.g. 500, 700). --ooo-wl-page-product-card-form-button-text-align : text alignment inside the button. --ooo-wl-page-product-card-form-button-letter-spacing : letter spacing in the button. --ooo-wl-page-product-card-form-button-text-transform : text transformation (uppercase, lowercase). --ooo-wl-page-product-card-form-button-line-height : line height of the text. --ooo-wl-page-product-card-form-button-outline-border-color : border color for “outline” style. --ooo-wl-page-product-card-form-button-link-color : text color for “link” style buttons. --ooo-wl-page-product-card-form-button-disabled-color : text color when disabled. --ooo-wl-page-product-card-form-button-disabled-background : background color when disabled. --ooo-wl-page-product-card-form-button-disabled-opacity : opacity when button is disabled.
Share wishlist button
These CSS variables allow you to customize the share wishlist button:
--ooo-wl-copy-button-gap : space between icon and text. --ooo-wl-copy-button-padding : internal spacing of the button. --ooo-wl-copy-button-min-height : minimum height of the button. --ooo-wl-copy-button-border-width : thickness of the button border. --ooo-wl-copy-button-border-color : border color. --ooo-wl-copy-button-border-opacity : opacity of the border. --ooo-wl-copy-button-border-radius : roundness of the corners. --ooo-wl-copy-button-margin-inline : left and right margin. --ooo-wl-copy-button-background : background color of the button. --ooo-wl-copy-button-color : text color. --ooo-wl-copy-button-font-family : font family used. --ooo-wl-copy-button-font-size : font size. --ooo-wl-copy-button-font-weight : font weight. --ooo-wl-copy-button-letter-spacing : space between letters. --ooo-wl-copy-button-line-height : height of a line of text. --ooo-wl-copy-button-text-transform : transform text to uppercase/lowercase/capitalize.
Pagination
These CSS variables allow you to customize the pagination:
--ooo-wl-page-empty-gap : vertical spacing between elements. --ooo-wl-page-empty-padding : internal spacing of the empty state block. --ooo-wl-page-empty-title-color : color of the title. --ooo-wl-page-empty-title-font-family : font of the title. --ooo-wl-page-empty-title-font-size : title size. --ooo-wl-page-empty-title-font-weight : title weight (bold, etc.). --ooo-wl-page-empty-title-line-height : height of title lines. --ooo-wl-page-empty-title-text-transform : uppercase/lowercase/capitalization for title. --ooo-wl-page-empty-description-color : color of the description text. --ooo-wl-page-empty-description-font-family : font of the description. --ooo-wl-page-empty-description-font-size : size of the text. --ooo-wl-page-empty-description-font-weight : text weight. --ooo-wl-page-empty-description-line-height : line height for readability. --ooo-wl-page-empty-button-padding : spacing inside the CTA button. --ooo-wl-page-empty-button-border-width : thickness of the border. --ooo-wl-page-empty-button-border-color : border color. --ooo-wl-page-empty-button-border-opacity : transparency of the border. --ooo-wl-page-empty-button-border-radius : rounded corners of the button. --ooo-wl-page-empty-button-width : width of the button. --ooo-wl-page-empty-button-min-height : minimum height of the button. --ooo-wl-page-empty-button-background : background color. --ooo-wl-page-empty-button-color : color of the button text. --ooo-wl-page-empty-button-font-family : font used in the button. --ooo-wl-page-empty-button-font-size : size of the button text. --ooo-wl-page-empty-button-font-weight : weight of the text. --ooo-wl-page-empty-button-line-height : line height inside the button. --ooo-wl-page-empty-button-text-transform : uppercase/lowercase style.
Empty state wishlist
These CSS variables allow you to customize the empty state elements of the wishlist:
--ooo-wl-page-not-accessible-gap : space between elements in this section. --ooo-wl-page-not-accessible-padding : internal padding of the block. --ooo-wl-page-not-accessible-title-color : color of the title. --ooo-wl-page-not-accessible-title-font-family : font family used. --ooo-wl-page-not-accessible-title-font-size : font size. --ooo-wl-page-not-accessible-title-font-weight : font weight. --ooo-wl-page-not-accessible-title-line-height : height of text lines. --ooo-wl-page-not-accessible-title-text-transform : case transformation (uppercase, etc.). --ooo-wl-page-not-accessible-description-color : text color. --ooo-wl-page-not-accessible-description-font-family : font used. --ooo-wl-page-not-accessible-description-font-size : size of the description text. --ooo-wl-page-not-accessible-description-font-weight : font weight. --ooo-wl-page-not-accessible-description-line-height : line height. --ooo-wl-page-not-accessible-button-width : width of the button. --ooo-wl-page-not-accessible-button-padding : inner spacing of the button. --ooo-wl-page-not-accessible-button-border-width : thickness of the border. --ooo-wl-page-not-accessible-button-border-color : color of the border. --ooo-wl-page-not-accessible-button-border-opacity : transparency of the border. --ooo-wl-page-not-accessible-button-border-radius : corner rounding. --ooo-wl-page-not-accessible-button-min-height : minimum height. --ooo-wl-page-not-accessible-button-background : background color. --ooo-wl-page-not-accessible-button-color : text color. --ooo-wl-page-not-accessible-button-font-family : font family used. --ooo-wl-page-not-accessible-button-font-size : size of the button text. --ooo-wl-page-not-accessible-button-font-weight : font weight. --ooo-wl-page-not-accessible-button-line-height : line height of the text. --ooo-wl-page-not-accessible-button-letter-spacing : spacing between letters. --ooo-wl-page-not-accessible-button-text-transform : capitalization style.