Skip to main content

Useful CSS Snippets

Below are some useful CSS snippets that you can add to your WordPress theme.

Hide sale prices for variants not on sale:​

[data-wpshopify-is-on-sale='false'] .wps-product-prices-compare-at {
    display: none !important;
}

Hide cart tab when empty​

You can hide the fixed cart icon in various ways. To hide the icon when the cart is empty:

.wps-cart-icon-fixed.wps-cart-is-empty {
    display: none;
}

Change selected button colors​

The below CSS will customize the variant button selected colors, as well as the variant badge within the cart. Replace #000 with the color of your choice.

.wpshopify-variant-buttons button[data-is-variant-selected='true'] {
    background-color: #000;
    border-color: #000;
}

.wps-cart-lineitem-variant-title[class*='badge'] {
    background-color: #000;
}

Remove "sale" text, but keep sale price​

This CSS snippet will remove the red "Sale!" text over images, but keep the actual sale pricing.

.wps-product-prices-compare-at .wps-pricing-sale-notice,
.wps-component-products-images .wps-product-image-on-sale-label {
    display: none;
}