Big Cartel Theme Support

How do I display the price for sold and coming soon products?

How do I display the price for sold and coming soon products?

The price for sold out and coming soon products is hidden by default. To display the price for these products, navigate to your custom style coding area - see Where do I add custom style code? - and add the following CSS as needed.

Display price for sold products

/* Display price for sold products */
.product.sold .price-wrap {
	display: block;
}

Display price for coming soon products

/* Display price for coming soon products */
.product.soon .price-wrap {
	display: block;
}

Combining both styles

As with any CSS, you can combine both of the examples above to display the price for both sold and coming soon products.

/* Display price for sold and coming soon products */
.product.sold .price-wrap,
.product.soon .price-wrap {
	display: block;
}

Forcing display

For some themes, the above methods may not work if specific display styles have been assigned to the product pricing. In this case you can force display with the addition of the !important declaration after block and before the end of line semicolon. For example:

/* Display price for sold products */
.product.sold .price-wrap {
	display: block !important;
}

Matching your theme’s style

In some cases, displaying the price as a block may not match your theme’s price display style. In this case use display: inline-block instead of display: block. For example:

/* Display price for coming soon products */
.product.soon .price-wrap {
	display: inline-block !important;
}

Targeting product thumbnail or product page

Any of the above examples can be made specific to your product thumbnails or product page by adding an extra class to the .products element.

To make the style specific to product thumbnails we add .tile. For example:

/* Display price for coming soon product thumbnails */
.product.tile.soon .price-wrap {
	display: block;
}

To make the style specific to product pages we add .single. For example:

/* Display price for coming soon product page */
.product.single.soon .price-wrap {
	display: inline-block !important;
}

Hiding the prices

If your sold and/or coming soon product prices are already displayed and you wish to hide them, first check the following:

  1. If you displayed the prices using the methods in the previous sections of this article, find the relevant CSS you added and delete it from your custom style coding area.
  2. If the prices are displayed by default for your theme, check for theme-specific CSS — see The theme-specific custom styles — that enables the display and, if found, delete it from your custom style coding area.

If neither of the above items applies, your sold and/or coming soon prices are most likely displayed via core theme CSS. You can override this by adding the following CSS to your custom style coding area.

For sold products…

/* Hide price for sold products */
.product.sold .price-wrap {
	display: none !important;
}

…or for coming soon products…

/* Hide price for coming soon products */
.product.soon .price-wrap {
	display: none !important;
}

…or both…

/* Hide price for sold and coming soon products */
.product.sold .price-wrap,
.product.soon .price-wrap {
	display: none !important;
}

AarcadeHow do I display the price for sold and coming soon products?