Core Shop
The price of a product, with a sale price
wp="product-price" The price from WooCommerce, and during a sale the new price next to the crossed-out old one. The shop owner sets them in the product.
Where it goes
Three blocks side by side: wp="product-price" (the price without a sale), wp="product-price-sale" and wp="product-price-regular" (shown only during a sale). The theme hides the ones that do not apply.
On the product page (single-product.html) and in the cards of the catalog.
Example: a bag of coffee beans
Markup single-product.html
<div class="price-row">
<div class="price" wp="product-price">$14.00</div>
<div class="price is--sale" wp="product-price-sale">$12.00</div>
<div class="price is--old" wp="product-price-regular">$14.00</div>
</div>In the admin Products → Edit product
Regular price ($) 14.00
Sale price ($) 12.00
On the site during a sale
Ethiopia Yirgacheffe
Sale $12.00
Was $14.00
During a sale the regular price block hides itself.
What matters
- Needs WooCommerce.
- For a product with variations the theme updates the price when the buyer picks one.
Common mistakes
The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.
Not like this
<div class="price" wp="product-price">$14.00</div>Only product-price: a product on sale shows no price at all, and the log is silent.
Like this
<div wp="product-price">$14.00</div>
<div wp="product-price-sale">$12.00</div>
<div wp="product-price-regular">$14.00</div>All three side by side.
Alternative spelling
wp="product_price" works the same: the build gives an identical theme.