I want to set a custom style for displaying prices on sale in woocommerce archive page. I could do that in single-product.php file but in archive page its just wc_get_template_part( 'content', 'product' ); and there is no reference to find it.
How can I find the html template and set a custom css class for on sale products in archive page?
I want to set a custom style for displaying prices on sale in woocommerce archive page. I could do that in single-product.php file but in archive page its just wc_get_template_part( 'content', 'product' ); and there is no reference to find it.
How can I find the html template and set a custom css class for on sale products in archive page?
In your Theme you should have several template files with names beginning with "content" followed by a hyphen, a unique name, and .php, e.g. "content-xxx.php". Sometimes they may be in a sub-folder called something like "template parts".
That's where you would find the content-product.php file and within it the loop that you can modify to add your custom style declaration.
However I would strongly encourage you to be certain you're modifying a CHILD Theme you've created, otherwise Theme updates will overwrite your edits.
Alternatively, you can add some code to your (Child) Theme's functions.php, or better yet a custom plugin that exists in your Plugins folder not your Theme folder (to make it Theme agnostic), to add classes.
You can do this using Filters, I've done it to add classes to the Body and Post class, but you can get more granular as you need to. See this page for some examples:
https://developer.wordpress.org/reference/functions/body_class/
Scroll down to see the examples, you could target your template easily enough.
You can customize the HTML for sale products in the WooCommerce archive page by overriding the content-product.php file, which is called by wc_get_template_part( 'content', 'product' ). Here’s how you can do it:
Locate the Template File
The wc_get_template_part( 'content', 'product' ) function loads the content-product.php template file. This file is located in:
wp-content/plugins/woocommerce/templates/content-product.php
Copy the Template to Your Theme
To safely modify it, copy the content-product.php file to your theme or child theme. Place it in this directory:
wp-content/themes/your-theme/woocommerce/content-product.php
Add a Custom CSS Class for Sale Products
Open the content-product.php file in your theme. To add a custom class for sale products, wrap the price display code with a conditional check. Look for the following line that renders the product price (or something similar):
<?php echo $product->get_price_html(); ?>
Replace it with:
<?php if ( $product->is_on_sale() ) : ?>
<span class="custom-sale-price"><?php echo $product->get_price_html(); ?></span>
<?php else : ?>
<?php echo $product->get_price_html(); ?>
<?php endif; ?>
Style the Custom Class
Add your custom CSS for the sale prices in your theme’s style.css or a custom CSS file. For example:
.custom-sale-price {
color: red;
font-weight: bold;
}
Test Your Changes
Clear any caches and test the archive page to ensure the custom style is applied only to sale products.
If you don’t want to edit the template files directly, you could also use the WooCommerce hooks like woocommerce_before_shop_loop_item_title to add your custom class dynamically. But for your specific use case, editing the content-product.php template is the simplest approach.
Let me know if you need more guidance!