Big Cartel Theme Support

How do I change the way pricing and currency is displayed in my Big Cartel shop?

How do I change the way pricing and currency is displayed in my Big Cartel shop?

Single price format

The format of your prices / currency can be easily set via custom CSS. The default CSS is as follows:

/* Price format */
.price:before {
	content: attr(data-symbol);
}
.price:after {
	content: none;
}

To change this format, navigate to your custom style coding area - see Where do I add custom style code? - paste in the above default CSS and then edit it to your preference.

The following variables are available to use in your content settings:

attr(data-symbol)
The symbol for your shop currency, e.g. £
attr(data-code)
The code for your shop currency, e.g. GBP
attr(data-price)
The price, e.g. 30.50
attr(data-wnprice)
The whole number price, e.g. 30
attr(data-max-price)
The maximum price (for products with variable option pricing), e.g. 38.78
attr(data-max-wnprice)
The whole number maximum price (for products with variable option pricing), e.g. 38
attr(data-min-price)
The minimum price (for products with variable option pricing), e.g. 24.15
attr(data-min-wnprice)
The whole number minimum price (for products with variable option pricing), e.g. 24

For example, let’s say that our shop currency is the euro, and we want to change the default format of our prices..

€18.20

..to this format..

18.20 €

To achieve this, we paste the default CSS into our custom style coding area and then edit it to:

/* Price format */
.price:before {
	content: none;
}
.price:after {
	content: " " attr(data-symbol);
}

Here we have set the content before the price to none and changed the content after the price to a space and then the currency symbol. As shown above, any plain text or spaces we enter in between double quotes will be added to the content.

For another example, let’s say our shop currency is Australian dollars and we want to change the default format of our prices..

$18.00

..to this format..

$18 AUD

None of our products have a cents value (i.e. everything is priced at whole dollar values), so we don’t want to display the .00.

We can also add standard CSS style attributes to our format. So let’s say we also want the AUD to be in bold text and a shade of red.

To achieve this, we paste the default CSS into our custom style coding area and then edit it to:

/* Hide default price number */
.price > span {
	display: none;
}
/* Price format */
.price:before {
	content: attr(data-symbol) attr(data-wnprice);
}
.price:after {
	content: " " attr(data-code);
	color: #cc0000;
	font-weight: bold;
}

As always, we click the Done and then Save button to apply our changes when we’re ready.

Variable price format

The default CSS for variable priced products is as follows:

/* Variable price format */
.product.variable-price .price:before {
	content: attr(data-symbol);
}
.product.variable-price .price:after {
	content: attr(data-min-price) " - " attr(data-symbol) attr(data-max-price);
}

As with our standard pricing in the previous section, to change this format we navigate to your custom style coding area - see Where do I add custom style code? - paste in the above default CSS and then edit it to your preference.

For example, let’s say the default format of our variable prices is..

$222.25 - $430.50

..and we want to change this to..

starting at $222.25

To achieve this, we paste the default CSS into our custom style coding area and then edit it to:

/* Variable price format */
.product.variable-price .price:before {
	content: "starting at ";
}
.product.variable-price .price:after {
	content: attr(data-symbol) attr(data-min-price);
}

We click the Done and then Save button to apply our changes when we’re ready.

Targeting specific products

In some cases you may want specific products to have different pricing / currency formatting. To do this, refer to the methods detailed in Using the article tag to create product specific custom styles.

The .after-price element

The .after-price element is located immediately after the .price element and can be styled in the same way. All of the same variables are available. For an example of using the .after-price element, refer to How do I display both my standard and sale price for on sale products?

To display and change the format of the cart total price, refer to How do I edit my Cart menu link?

AarcadeHow do I change the way pricing and currency is displayed in my Big Cartel shop?