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;
}

Hide cart counter when empty​

You can hide the "counter" within the fixed cart icon—only when the cart is empty—with this CSS:

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

And to hide the counter within a standard cart icon (not fixed), use this CSS:

.wps-btn-cart.wps-cart-is-empty .wps-cart-counter {
	display: none;
}

Change selected button colors​

The below CSS will customize the variant button selected colors. Replace purple with the color of your choice.

.swp-variants button[data-is-variant-selected='true'] {
	background: purple;
	border-color: purple;
}

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;
}

Change color of subscription dropdowns​

This CSS snippet will customize the background color of the subscription dropdowns.

[class*='SellingPlansListCSS'] [class*='MenuList'] [class*='option'] {
	background-color: white;
	color: black;
}

[class*='SellingPlansListCSS'] [class*='MenuList'] [class*='option']:hover {
	background-color: black;
	color: white;
}

Remove border radius​

Sometimes your theme design will conflict with the small "border radius" that ShopWP puts on all it's elements. You can remove this border radius with the below CSS:

.wps-btn-cart,
.wps-btn,
.wps-btn-checkout,
.wps-quantity-decrement,
.wps-quantity-increment,
.wps-input,
.wpshopify-variant-buttons button,
.wps-input-textarea,
.wps-add-to-cart,
.shopwp-selling-group,
[class*='DropdownCSS'] {
	border-radius: 0 !important;
}

Reduce the size of the ShopWP cart icon​

.swp-icon.swp-icon-cart {
	width: 23px;
	height: 23px;
}

.swp-cart-icon-inline .swp-cart-counter {
	top: -4px;
	right: -7px;
	width: 20px;
	height: 20px;
}

Force all product titles to one line​

.swp-product-title {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

Move cart icon to left​

This CSS snippet will move the cart icon to the left side of the page.

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