Big Cartel Theme Support

How do I display both my standard and sale price for on sale products?

How do I display both my standard and sale price for on sale products?

When you place a product on sale, your Big Cartel admin controls only allow you to enter one price, i.e. your sale price. However you may wish to display your standard price with this sale price, so that your customers can see the amount they are saving at a glance.

Aarcade themes allow you to do this easily via one of two methods.

Method 1: Using the .after-price element

The advantage of this method is that the sale price will be displayed directly inline with the standard price, whereas method 2 displays the sale price as a separate label (much like the “On Sale” label).

The article How do I change the way pricing and currency is displayed in my Big Cartel shop? explains how to use CSS to change your price format. We can use exactly the same method on the .after-price element, which is located immediately after the .price element. All of the same variables are available.

For example, let’s say our price format is currently..

$55.44

..and we want to change it to this..

$55.44 $78.20

We would navigate to our custom style coding area — see Where do I add custom style code? — and add the following CSS:

/* Display sale price */
.after-price:before {
	content: attr(data-symbol) "78.20";
	padding-left: 4px;
	color: #cc0000;
	text-decoration: line-through;
}

Of course this adds the sale price to every price throughout our shop, which we do not want. So we use the methods detailed in the article Using the article tag to create product specific custom styles to make our style specific to the correct products.

For our example, let’s say we want the $78.20 sale price to be applied to all of the products that are both marked on sale and that belong to the product subcategory Jeans - Denim. We change our previous CSS to:

/* Display sale price for Jeans - Denim category */
article.jeans-denim .after-price:before {
	content: attr(data-symbol) "78.20";
	padding-left: 4px;
	color: #cc0000;
	text-decoration: line-through;
}

See the article Using the article tag to create product specific custom styles for more options on targeting specific products.

Another good example, based on these options, is creating x-a categories to control the display of your sale price. Let’s say we create new product categories with the names:

x-a Sale Price 50.50
x-a Sale Price 22.22
x-a Sale Price 9.85

Then we add the following CSS to our custom style coding area:

/* Style all x-a sale prices by using a class
contains "category-sale-price-" selector */
article[class*="category-sale-price-"] .after-price:before {
	color: #999999;
	font-style: italic;
}
/* Set specific sale values */
article.category-sale-price-50-50 .after-price:before {
	content: " was" attr(data-symbol) "50.50";
}
article.category-sale-price-22-22 .after-price:before {
	content: " was" attr(data-symbol) "22.22";
}
article.category-sale-price-9-85 .after-price:before {
	content: " was" attr(data-symbol) "9.85";
}

Here we’ve used a different style, just to show variation. The result would look like:

$34.44 was $50.50

Once we have created and saved the categories and custom CSS, we can control the display of sales prices by simply adding or removing products from our x-a Sale Price X categories as needed.

Method 2: Using an x-d category

An x-d category can be used to label any product. This is detailed in the support article Extended category controls.

For example, you might create a new category with the name..

x-d $80.90

..or..

x-d down from $80.90

..and then add the relevant products to this new category. Then repeat this as needed for other sale prices.

You can style your x-d category labels as shown in the following example CSS:

/* x-d label */
article.product .title-group .label-wrap > .label-x-d {
	color: #cc0000;
	text-decoration: line-through;
}

As with the examples in the previous section of this article, and in reference to the article Using the article tag to create product specific custom styles, these styles can be made more specific to certain products as needed.

Custom CSS

Use your web inspector tool, built into your web browser, to find the appropriate id or class to use for your own custom CSS. Don’t forget to save after making changes.

For more information on creating custom CSS, refer to How do I create custom style code?

AarcadeHow do I display both my standard and sale price for on sale products?